title: Is there a way to use custom components on headers in material-table? (FIXED)
body: <p>Is there a way to use custom components on headers in material-table? Unlike the data cells where you can use the <code>render: rowData =&gt; ()</code> function, I can't seem to find a way to change the header cells into a custom component. Thank you very much!</p>
  
  <p><a href="https://i.stack.imgur.com/iOcF7.png" rel="nofollow noreferrer">As per request, here's a screenshot of what it currently looks like:</a></p>
  
  <p>What I want to accomplish is having the <strong>SCHEDULE</strong>, <strong>BREAKFAST</strong>, <strong>LUNCH</strong>, and <strong>DINNER</strong> column headers to have some extra components instead of having it as a text. </p>
  
  <p>Something like these:</p>
  
  <pre><code>         SCHEDULE
  SUN-MON-TUE-WED-THU-FRI-SAT   
  </code></pre>
  
  <pre><code> BREAKFAST
  05:00-07:00
  </code></pre>
  
  <p>and here's a sample code on how to set the header titles currently:</p>
  
  <pre><code>  const [state, setState] = React.useState({
      columns: [
        {
          title: "MEAL",
          field: "meal",
          headerStyle: {
            textAlign: "left"
          },
          render: rowData =&gt; (
            &lt;Link to={"/meals"} className={classes.mealNamesLink}&gt;
              {rowData.meal}
            &lt;/Link&gt;
          )
        },
        {
          title:"SCHEDULE",
          field: "schedule",
          headerStyle: {
            textAlign: "left"
          },
          cellStyle: {
            margin: 0,
            padding: 0
          },
  </code></pre>
  
  <p>as you can see, I managed to make the content cells into a custom component using the <code>render</code> method on the <strong>Meals</strong> column, but I can't seem to change the headers into a custom component because it is set via <code>title:</code></p>