Mui-datatables: More Custom Column Header

Created on 7 Jan 2019 · 8Comments · Source: gregnb/mui-datatables

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.

Source

loganasherjones

👍5

Most helpful comment

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

dark_main

Sort ascending

dark_sort_asc

Sort descending

dark_sort_desc

Filter Active

dark_with_filter

Light Theme

No Filters No Sorting

light_main_view

Sort ascending

light_sort_asc

Sort descending

light_sort_desc

Filter Active

light_with_filter

loganasherjones on 12 Jan 2019

🚀2

All 8 comments

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

dark_main

Sort ascending

dark_sort_asc

Sort descending

dark_sort_desc

Filter Active

dark_with_filter

Light Theme

No Filters No Sorting

light_main_view

Sort ascending

light_sort_asc

Sort descending

light_sort_desc

Filter Active

light_with_filter

loganasherjones on 12 Jan 2019

🚀2

I would like to see how you would turn this feature on and off? Need more API information. I think it's a great feature it just has to fit in nicely. Also something to consider if filter is turned on for the column header does it mean the filters in the toolbar get hidden? etc

gregnb on 15 Jan 2019

👍1

I'd love to see it working. Some ideas:

To switch it on, use options.filterStyle = "header" (better naming?).
The filter symbol in the toolbar could be used to hide (and disable) the filters. And to show (and enable) them again.
Doesn't make the permanently shown filter the chips redundant? I could imagine adding a cross near the filter word so it can be removed as easily as when using the chip.