Is there a way to use custom components on headers in material-table?

Question

Is there a way to use custom components on headers in material-table? Unlike the data cells where you can use the render: rowData => () function, I can't seem to find a way to change the header cells into a custom component. Thank you very much!

As per request, here's a screenshot of what it currently looks like:

What I want to accomplish is having the SCHEDULE, BREAKFAST, LUNCH, and DINNER column headers to have some extra components instead of having it as a text.

Something like these:

         SCHEDULE
SUN-MON-TUE-WED-THU-FRI-SAT   

 BREAKFAST
05:00-07:00

and here's a sample code on how to set the header titles currently:

  const [state, setState] = React.useState({
    columns: [
      {
        title: "MEAL",
        field: "meal",
        headerStyle: {
          textAlign: "left"
        },
        render: rowData => (
          <Link to={"/meals"} className={classes.mealNamesLink}>
            {rowData.meal}
          </Link>
        )
      },
      {
        title:"SCHEDULE",
        field: "schedule",
        headerStyle: {
          textAlign: "left"
        },
        cellStyle: {
          margin: 0,
          padding: 0
        },

as you can see, I managed to make the content cells into a custom component using the render method on the Meals column, but I can't seem to change the headers into a custom component because it is set via title:

Answer 1

Actually... you know what... I'm really sorry but apparently the fix was just to put it on the title: straight. No mumbo jumbos.

For example:

title: <p> I am really dumb for not knowing this </p>

I'm gonna close it now, but here is the answer for those who may find themselves in a conundrum such as I did (I doubt it).