Grouping Feature

[patorjk]

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.

[andrewatduckpin]

@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?

[coveralls]

Coverage decreased (-3.6%) to 80.181% when pulling a191a3c on groupings into d50ff23 on master.

[patorjk]

I unfortunately haven't had much time recently. I've put together a beta npm release which can be installed here:

npm install mui-datatables@3.5.0-beta.0

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);
  }
}

[Fullbusters]

@patorjk is there exist a way to set handle expand to whole group title row not just to expand arrow ?

[Fullbusters]

@patorjk I also noticed that when adding grouping to options there no block with an empty title ( text showing when data empty )

[L-U-C-K-Y]

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/

[belfortmaycon]

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.

[goqa-dev]

pump, i really need this feature.. could you please merge?

[jbyerline]

Agreed, this feature would be very useful. Please merge!

[peterfarina]

A friendly bump! We're really (really) excited to add this to our new project. :-)

[JoseHuertasDev]

Is there a way to add pagination ?

[servonlewis]

Is this going to be merged??

[prajain12]

Any updates on this?

[shadoath]

A nifty feature, would like to hear if help is needed or a merge is possible.

[goqa-dev]

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

[Neaxic]

Bump, would really like this feature to be merged - any updates?

[taziksh]

bump

[taziksh]

gonna have to migrate to a different library if this isn't merged

[shadoath]

Suggested change

	//console.log('getGroupingData');
	//console.log(grouping);

[shadoath]

Suggested change

//console.dir(displayData);

[shadoath]

Suggested change

//console.dir(groups);

[shadoath]

I think this is a great abstraction.