More Custom Column Header

Thanks again for a great library. I’m interested in providing this feature and would submit a PR for it, but I think there might be API additions/changes in order to support this, so I thought I’d start with an issue.

Expected Behavior

What I would really like to be able to do is to create a header that acts as a filter as well as a sortable header. I have a basic implementation, done right now, but the filtering is not possible with the current customHeadRender feature. I need more access to more of the props from the MUIDataTable component.

I’m not really sure what the best way to achieve this is. One thought I had was to be able to allow the API to completely replace components. i.e. I could re-write my custom TableHead component and then inject it something like:

components = {
  'TableHead': <MyCustomTableHead />
}
<MuiDataTable components={components} data={data} columns={columns}/>

Again, what I really want to do is to be able to create a header for a column that is capable of filtering. However you think is best to achieve this, I’m open to implementing.

[loganasherjones]

Ok, I’ve done some work to make the column header that I wanted. Now I just need to figure out the best way to make this available.

Code

• https://github.com/loganasherjones/mui-datatables/tree/filterAndSortHeader

Code Comparison

• https://github.com/loganasherjones/mui-datatables/compare/darkTheme...loganasherjones:filterAndSortHeader

Screenshots

This is all just proof-of-concept and works pretty well. I’d like to figure out how you’d like to see this added as a feature. Here are some screenshots of what the filtering looks like:

Dark Theme

No Filters No Sorting

Sort ascending

Sort descending

Filter Active

Light Theme

No Filters No Sorting

Sort ascending

Sort descending

Filter Active

[chupee120]

Hello,

I will also need this feature.

Any chance to have a Pull Request soon?

Thanks,