mui-datatables
mui-datatables copied to clipboard
gregnb
Grouping Feature
Work in progress. At this moment this is more of a proof-of-concept than a fully fleshed out new feature. You can see the Grouping feature live at the below link by selecting the "Grouping" example (once the project has loaded):
https://codesandbox.io/s/github/gregnb/mui-datatables/tree/groupings
At the moment I'm taking cues from React Grid's Grouping feature: https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/grouping/
What's left to do:
- Add an optional drag dashboard for column headers, so groupings can dynamically be made.
- Figure out how rowsPerPage should work (probably rowsPerPage will work with top level groups).
- Figure out how serverSide=true will deal with groups (users will probably need to supply the possible groups).
- Iron out details of feature + get user feedback.
- Make sure everything works and nothing gets/got broken.
- Add tests.
- Clean up code.
This is a pretty big feature, so I want to get it right. Please let me know if you have any feedback.
@patorjk Nice work! I love this feature so far. One thing I'd like to see is the ability to load with the groups already expanded. I tried passing expandedRows: [0,1,2,3] in the table options, but it didn't seem to make any difference.
Thoughts on this?
Coverage decreased (-3.6%) to 80.181% when pulling a191a3c92945f8591af55cfff2760e82a556b4b0 on groupings into d50ff23334c28035a244233b844501f89afddf7e on master.
I unfortunately haven't had much time recently. I've put together a beta npm release which can be installed here:
npm install [email protected]
If anyone has any feedback let me know. Assuming everything is fine, I'll try and release 3.5.0 this coming week.
Basic API is as follows:
var options = {
grouping: {
columnIndexes: [], // index of column to group by
expanded: {} // expanded columns, see results onGroupExpansionChange method for what this would look like
},
onGroupExpansionChange: (group, expanded) => {
console.dir(group);
console.dir(expanded);
}
}
@patorjk is there exist a way to set handle expand to whole group title row not just to expand arrow ?
@patorjk I also noticed that when adding grouping to options there no block with an empty title ( text showing when data empty )
Many thanks @patorjk, looking great! The only feedback that I have is that we could consider indenting the first column of sub-rows as in DevExtreme: https://devexpress.github.io/devextreme-reactive/react/grid/demos/featured/tree-data/
Hi, I really appreciate it. Very clean and simple!
My feedback actually is more a question... how grouping would works with a hierarchy data? Ex:
data: [
{ Id: 1, Title: 'Row 1', Parent: null},
{ Id: 2, Title: 'Row 1.1', Parent: 1},
{ Id: 3, Title: 'Row 1.2', Parent: 1},
{ Id: 4, Title: 'Row 2', Parent: null},
{ Id: 5, Title: 'Row 2.1', Parent: 2},
{ Id: 6, Title: 'Row 2.2', Parent: 2},
{ Id: 7, Title: 'Row 2.2.1', Parent: 6},
{ Id: 8, Title: 'Row 2.2.2', Parent: 6},
{ Id: 9, Title: 'Row 2.2.3', Parent: 6}
]
I wanna a table like this:
- 1
- 1.1
- 1.2
- 2
- 2.1
- 2.2
- 2.2.1
- 2.2.2
- 2.2.3
Thank you.
A friendly bump! We're really (really) excited to add this to our new project. :-)
A nifty feature, would like to hear if help is needed or a merge is possible.
I did a manual merge as I needed this feature in production a few weeks ago - feel free to use:
https://github.com/goqa-dev/goqa-datatables https://www.npmjs.com/package/goqa-datatables
