Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Grouping Feature #1441

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Grouping Feature #1441

wants to merge 5 commits into from

Conversation

patorjk
Copy link
Collaborator

@patorjk patorjk commented Jul 26, 2020

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
Copy link

@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
Copy link

Coverage Status

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

@patorjk
Copy link
Collaborator Author

patorjk commented Aug 23, 2020

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

@Fullbusters
Copy link
Contributor

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

@Fullbusters
Copy link
Contributor

@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
Copy link

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/

image

@belfortmaycon
Copy link

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
Copy link

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

@jbyerline
Copy link

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

@peterfarina
Copy link

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

@JoseHuertasDev
Copy link

Is there a way to add pagination ?

@servonlewis
Copy link

Is this going to be merged??

@prajain12
Copy link

Any updates on this?

@shadoath
Copy link

shadoath commented Sep 2, 2022

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

@goqa-dev
Copy link

goqa-dev commented Sep 3, 2022

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
Copy link

Neaxic commented Jan 9, 2023

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

@taziksh
Copy link

taziksh commented Sep 6, 2023

bump

@taziksh
Copy link

taziksh commented Sep 6, 2023

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

Comment on lines +1231 to +1232
//console.log('getGroupingData');
//console.log(grouping);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


if (!cols || cols.length === 0) return null;

//console.dir(displayData);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
//console.dir(displayData);


//console.dir(displayData);
let groups = this.getGroups(grouping, cols, displayData, 1, []);
//console.dir(groups);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
//console.dir(groups);

@@ -5,6 +5,7 @@ import MuiTableBody from '@material-ui/core/TableBody';
import TableBodyCell from './TableBodyCell';
import TableBodyRow from './TableBodyRow';
import TableSelectCell from './TableSelectCell';
import TableBodyRows from './TableBodyRows';
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is a great abstraction.

@wizebaseLLC
Copy link

Glad to hear it. This feature caused me to go to react-grid, but I will definitely come back to this library with this feature!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.