Material-table: Allow header cell components to be overridden

[trianta2]

Is your feature request related to a problem? Please describe.

Users cannot override the cell component used for creating the header. Currently the header component creates an array of TableCell: https://github.com/mbrn/material-table/blob/5b5ff47fa5e3e99077de6ee66dc5e6cca36b1443/src/components/m-table-header.js#L75-L84

This limits customization. For example, I could not inject a custom className into TableCell with the current implementation. If I could override the header cell, I could do something like:

function CustomHeaderCell(props) {
  return <MTableCell className={props.columnDef.myClassName}} {...props}/>;
}

Describe the solution you'd like

Users should be able to override the header cell component, similar to how MTableCell can be overridden. The library should pass in the entire columnDef to the header cell. Could MTableCell be reused directly in the header?

[nikunjtilva]

I am also looking for similar solution. Custom render function should be allowed for each header.

[krnareshkumar23]

I am also looking for a similar kind. Which I feel a custom header render function for each column will come handy. for example, I now need to add subheader for certain columns

As of I don't see a way to do it. If there is already a way could you let me know. Also I couldn't find examples for Header component overriding.

As of now I am using title attribute as it accepts HTML component so I have passed title as

with necessary styles

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.

[yoavz]

I'm also interested in this.