Feature Request: sliders in dropdown

[JordanKadish]

Config

Issue

I'd like to know if you could include sliders for the filtering, so if a column contains numbers it would be possible to slide the two endpoints of the slider up or down

Example:
column contains number 1-10
in dropdown, slide left point up to 2, slide right point down to 7
result: only rows with that column value being between 2 and 7 now show

Your Environment

Tech	Version
mui-datatables	1.0.9
node	9.x
OS	Linux

[gregnb]

I'll have to think about this some more because as it stands right now the filtering type is provided in the options and applies to all the columns. It's not hard to implement this, but think about the following:

If we bring in something like a slider it would start to make more sense to move the filterType (ie: dropbox, select, slider) to the individual columns. But, what about people who don't need that sort of granularity? I'm thinking a possible solution could be you could set your main filterType: 'dropdown' (or whatever you want) and then on the individual column you could change it to slider.

[JordanKadish]

I think you could pass a granularity flag with something like "table" and "column" to signify what level of customisation you'd want (considering, as you've said, not everyone needs specific things for each column). I think this may help with selectability too, since some people have said they need row selections and this would suit any future devs who need column selections I suppose

[gregnb]

Ok, I will look into this after I get through the other features in queue. The one with the most priority at the moment is selectable rows + actions to events on the table. Few requests for that already

[gregnb]

I'm going to take this ticket on next along with something I hand in mind which is providing formatting display (i.e. currency). This all fits into the customization of columns

[gregnb]

@JordanKadish Could use some feedback. So first, I'm thinking what I would do about the following case where a user wants to mix/match checkboxes. If one had a large data set the slider would get buried underneath

One potential solve for this is to convert checkboxes to be really be selects that have checkboxes inside them so it fits nicely in the layout like "Multiple Select": https://material-ui-next.com/demos/selects/

Now onto the actual implementation of the slider. If a column has nothing but values in it and you specify on that column options type with filterType: 'slider' then I could examine the data set and take the lowest and highest number. Now, let's say our dataset is [1,2,3,4,5,6,7,8,9,10] and then slider could always default at the first position if nothing has been selected. Once a user moves the slider, then what would happen is a filter chip would get added to the filterList. Now, if the user moves yet another position that filter chip gets deleted and replaced with the new position.

[JordanKadish]

I didn't understand the part about the slider being burried underneath? I was thinking instead of having the tick boxes, that would be filtered as just numbers on a slider http://www.material-ui.com/#/components/slider this case (having a slider option) can only work on numbers, so it would make sense to just collapse all number tickbox options into a slider if the slider option was chosen for a column

[JordanKadish]

Sliders can be set up in a way where you have a textbox or two under the slider stating what the top/bottom values are. This would be more useful than chips I think? Chips to me don't make sense for this situation (seems like excess rendering idk)

[gregnb]

Sorry, maybe I wasn't clear and what I was trying to say.

I didn't understand the part about the slider being burried underneath?

What I meant was imagine the following column filterTypes: checkbox, checkbox, checkbox, slider. Now, looking at the screenshot above where the dataset is HUGE if the slider came last it would be tough to see because the list of checkboxes is SO long. So, I was thinking maybe the checkboxes need to be revisted and do in a way that doesn't take away from other items in the filters. If you look back above I was mentioning material-ui allows select boxes that can also have checkboxes inside of them. That way, it would only take up a certain amount of room every single time and it be nice and neat. It would look like this:

Sliders can be set up in a way where you have a textbox or two under the slider stating what the top/bottom values are. This would be more useful than chips I think?

For this part, what I meant was currently when you use the filters if you do select something to filter by back on the main view (the table itself) a chip appears above showing which item you selected.

I would want to keep it consistent so I'm thinking the number that is currently selected on the slider appears as a chip exactly where Brynn Robbins is so that if you want to remove it later you can

[JordanKadish]

Ah I see. Hm, I think in that case, the chip should contain two numbers: one starting number and one ending number. Example: I have numbers 1-10 but want to view 2-9. The chip shown could be [2-9]

[gregnb]

I think at best this is going to only allow one sliding dot. And we still need to wait for this PR to merge

mui/material-ui#10665

[JordanKadish]

I think with the sliding dot issue, it would be possible to apply two filters to one Slider option so the Slider option in itself could be an object with something like {verbose:true/false} where verbose determines if the filter applied needs one sliding dot or two. If two, then there could be two separate sliders affecting the same column, one being the reverse of the other? Not sure how doable it would be to map two sliders to one column

[gabrielliwerant]

You can now add custom rendered filters as of 2.6.0.

Use filterOptions: { display: Component } and filterType: 'custom' in column options. There is also an option for custom filter logic via filterOptions: { logic: Function }.

[sampalmer]

@gabrielliwerant, do you have an official example of how to implement a slider filter? I've had a go at it base on https://github.com/gregnb/mui-datatables/blob/master/examples/customize-filter/index.js but it displays weirdly.

[gabrielliwerant]

There is no official example. You could look at https://material-ui.com/components/slider/ for ideas, as implementation should be similar. Can you be more specific about what displays weirdly?