Comments (14)
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.
from mui-datatables.
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
from mui-datatables.
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
from mui-datatables.
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
from mui-datatables.
@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.
from mui-datatables.
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
from mui-datatables.
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)
from mui-datatables.
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
from mui-datatables.
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]
from mui-datatables.
I think at best this is going to only allow one sliding dot. And we still need to wait for this PR to merge
from mui-datatables.
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
from mui-datatables.
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 }
.
from mui-datatables.
@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.
from mui-datatables.
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?
from mui-datatables.
Related Issues (20)
- How can I customize filter options in MUI data grid filter
- Warning "You are loading @emotion/react when it is already loaded. Running multiple instances may cause problems. This can happen if multiple versions are used, or if multiple builds of the same version are used." when using vite HOT 2
- It throws the exception if "page" is larger than its maximum page HOT 1
- Request
- Custom function for selected rows
- Selected rows persist on page change
- Vertical scroll bar on records ONLY?
- customize selectToolbar ( add other actions instead of just the default delete action)?
- how to customize the inbuilt filter function to Cascading Dropdown
- custom filter, removed chip provide wrong `filterPos` when its value is 0 HOT 1
- An option to modify delete icon?
- Pagination Rows per Page resetting itself after clicking on custom button in column HOT 1
- Column Drag not working HOT 1
- in customHeadRender only 1 column needs to sort and not remaining elements
- Link on github front page is malicious HOT 1
- Not wroking
- muidatatable scroll bar reset
- Not able to hide expander icon from specific rows
- Why are all the examples broken? HOT 1
- Print only appeared content rows with tableBodyMaxHeight applied
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mui-datatables.