search

gregnb / mui-datatables

Datatables for React using Material-UI
MIT License
2.7k stars 931 forks source link

FR: Add option to show filters inline in the table #1111

Open KrzysztofMadejski opened 4 years ago

KrzysztofMadejski commented 4 years ago

My users requested that it would be great to have filters inlined in table so they are easier to find.

I'm thinking that it could be done as in Excel, with an icon next to header name opening a popup:

Screenshot 2019-12-09 at 16 50 06

or as another row just below header (either a real HTML row, or just visually below) with a full filter input as it is now shown in filter popups.

I'm wondering what do you think about it? I could commit some time to work on a PR. I believe this should be optional, to be set by table option filterListInline: bool or similar.

gabrielliwerant commented 4 years ago

I like this feature, and would definitely be open to a PR that would provide it. I think it would be good to somewhat follow the example from this library: https://material-table.com/#/docs/features/filtering. They seem to be using a table row directly under the header. Dropdowns would be good for the dropdown and multiselect types, and then just text input for the text filter type.

Ideally, this functionality would be entirely inter-operable with the existing filters functionality, so it would support custom filters, custom filter chips, serverside, etc. It should probably also maintain the state between the two, so that if someone switched filter views, the correct state of the filters would be reflected.

Agreed on a new option for it. Your name sounds good, but we could revisit that later if we think of something better. This could be quite a bit of effort, and it might take me some time to getting around to reviewing it, as I don't have as much time for that as I would like, but I think it would be a great feature to have, and your help would be very welcome indeed.

I'll assign this to you for now. There's no timeline or anything (I'm not that organized!) so feel free to work on it whenever you feel moved.

KrzysztofMadejski commented 4 years ago

I sent a PR here https://github.com/gregnb/mui-datatables/pull/1120 and have a question re testing. I finally named the option filtersInline because I saw that "filterList" is used in codebase having some meaning already.

KrzysztofMadejski commented 4 years ago

The PR for this feature is ready to be merged in.

ambr89 commented 4 years ago

@KrzysztofMadejski How could I use this branch?

it will also become available in the this trunk?

KrzysztofMadejski commented 4 years ago

@ambr89 you can just check it out manually I guess. Most likely it will be available in the trunk. I'm waiting for @gabrielliwerant decision regarding testing both components at once.

gabrielliwerant commented 4 years ago

@KrzysztofMadejski There's a lot of duplication at the moment that I think we can clean up, I just haven't had a lot of time to work on a solution to suggest to you. But I did not forget, fyi.

ssuvorov commented 4 years ago

@KrzysztofMadejski

I finally named the option filtersInline

How about: filterPosition with values 'top', 'popup', 'bottom', 'embedded'...? Need to think what the values might be

KrzysztofMadejski commented 3 years ago

Lost interest to work on this one, can be closed.