Example: feat - grouping with single group column

[dangkhoa99]

Hello @KevinVandy,

Currently, there is no single column group feature, I have made an example in the storybook.

Could you develop this into a library feature?

Reference: https://www.ag-grid.com/react-data-grid/grouping-single-group-column/

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
material-react-table	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 6, 2024 1:31pm
material-react-table-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 6, 2024 1:31pm

[KevinVandy]

We can develop it, but I think we would have to add it to TanStack Table itself.

[dangkhoa99]

I hope this feature will be released soon. For now, I'll use example code. When this feature is released, please tag me so I can know the information.

[dangkhoa99]

Hi @KevinVandy, how can I get the total depth in the table?

[KevinVandy]

Hi @KevinVandy, how can I get the total depth in the table?

table.getExpandedDepth()

All other table instance apis listed here

https://www.material-react-table.com/docs/api/table-instance-apis

[KevinVandy]

wait, somehow I didn't even know that single column grouping was easily possible in TanStack Table. I thought you were asking me to make the feature, didn't realize you did it.

[dangkhoa99]

In the example, I've tried it out, but I hope you can integrate it and make it easier to use in a table via the props of the useMaterialReactTable hook.

[KevinVandy]

I'll look into this tomorrow. Logic seems pretty good here. You can try and see what needs to be done in the MRT_TableBodyCell and MRT_TableBodyCellValue components before I do.

[dangkhoa99]

Okay, I will try it.

[dangkhoa99]

Hi @KevinVandy , can you review it?

[dangkhoa99]

Implement showOpenedGroup prop, refer to ideas from the following link: https://www.ag-grid.com/react-data-grid/grouping-single-group-column/#showing-open-groups

[dangkhoa99]

Implement addColumnToLeafNode state, refer to ideas from the following link: https://www.ag-grid.com/react-data-grid/grouping-single-group-column/#adding-values-to-leaf-nodes

[KevinVandy]

Could we instead just use the already existing groupedColumnMode option instead of adding this for the logic of whether to show a single column? Maybe not.

[dangkhoa99]

I think we can use it.

[KevinVandy]

This is good work. I want to see if the implementation can be simplified though. Can this be done with no new state or options? Or just 1 new groupingDisplayMode option with a few variants? I'm still trying to dig through and understand your code. Trying to understand why the new state is needed

[dangkhoa99]

You can split addColumnToLeafNode from state. Because I don't have much experience, I put it in the status for no special reason.

[dangkhoa99]

About the showOpenedGroup option, I refer to AG-Grid (link) to implement this feature. You can edit it into a variation if you want.

[KevinVandy]

Closing in favor of #916 , but I branched that PR off of this branch, so you are getting credit for this feature