mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.05k stars 1.25k forks source link

[data grid] `gridFilteredDescendantCountLookupSelector` counts a group as a row #14268

Closed ashburnham closed 1 week ago

ashburnham commented 3 weeks ago

Steps to reproduce

Link to live example:

https://home.hirespace.com/events/16bf1c64-8845-4aa0-befd-824dc6784f37/proposal/list-view/53a360a6-7df9-4b40-b5bb-1a7767b19b5d/pricing

Steps:

  1. Create a data table with nested groups
  2. Use gridFilteredDescendantCountLookupSelector in your code
  3. See that gridFilteredDescendantCountLookupSelector overcounts the descendants.

Current behavior

if you have a parent group which has two rows inside that are in the same group, then it will count this as 3 descendants (it counts the 2 rows and then adds another for the group).

This is confusing for the user who only sees 2 descendant rows which just happen to be grouped.

Expected behavior

if you have a parent group which has two rows inside that are in the same group, then it should count this as 2 descendants because there are only 2 descendant rows.

Context

I want to show nested grouped rows to my users. I want to show how many rows are in each group. This is currently not possible.

Your environment

npx @mui/envinfo System: OS: macOS 14.3 Binaries: Node: 18.20.2 - ~/.nvm/versions/node/v18.20.2/bin/node npm: 10.8.1 - ~/Documents/code/v2/hs-suite/node_modules/.bin/npm pnpm: Not Found Browsers: Chrome: 127.0.6533.120 Edge: Not Found Safari: 17.3 npmPackages: @emotion/react: 11.11.3 @emotion/styled: 11.11.0 @mui/base: 5.0.0-beta.29 @mui/core-downloads-tracker: 5.15.20 @mui/icons-material: 5.15.2 @mui/lab: 5.0.0-alpha.158 @mui/material: ^5.15.20 => 5.15.20 @mui/private-theming: 5.15.20 @mui/styled-engine: 5.15.14 @mui/system: 5.15.20 @mui/types: 7.2.14 @mui/utils: ^5.14.5 => 5.15.20 @mui/x-data-grid: 6.18.6 @mui/x-date-pickers: 6.19.6 @mui/x-license: 7.7.1 @types/react: 18.0.31 => 18.0.31 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^5.4.5 => 5.4.5

I'm using latest chrome.

Search keywords: gridFilteredDescendantCountLookupSelector Order ID: 92825

svidskiy commented 3 weeks ago

[Offtopic] You put your license key, not the order id

michelengelen commented 3 weeks ago

[Offtopic] You put your license key, not the order id

Thanks @svidskiy ... I replaced it with the order id and removed the entry from the revision! 👍🏼

michelengelen commented 3 weeks ago

@ashburnham Just to clarify: Are you using Row Grouping or Tree Data?

ashburnham commented 3 weeks ago

Hi Michele, I'm using tree data

michelengelen commented 3 weeks ago

In a tree data structure, a group node is any node with children. Every group node is a descendant of its parent because of the hierarchical nature.

Example:

Consider the following tree:

        A
       / \
      B   C
     / \
    D   E

Why B is a Descendant of A:

In this hierarchy, B is a group node because it has children (D and E), and it's also a descendant of its parent, A.

Therefore Node A has a total of 5 descendants.

This is a representation of the same data in a flat version:

Flat Data Grid with Paths:

Node Parent Path
A None A
B A A > B
C A A > C
D B A > B > D
E B A > B > E

Does that clear it up for you?

ashburnham commented 3 weeks ago

Hi Michel,

Yup, got that and how descendants work, but it's not exactly what I (and I imagine others) are trying to achieve.

I would like to know how many rows are contained in a group so that I can display this to my users. In my context this is how many line items are contained in a group on a quote.

In your example below The rows D, E & C are the row descendants to A. If a user sees group A they might want to know how many rows there are within that group. Saying that there are 4 items is misleading and will confuse them (I know this as it's been reported as a bug to me by users a couple of times now), although I totally get that it is the number of descendant nodes.

    A
   / \
  B   C
 / \
D   E

Is there a way to work around this? Or any scope to include a solution to this in future releases, either by passing an option to gridFilteredDescendantCountLookupSelector, or by creating a new selector called something like gridFilteredDescendantRowCountLookupSelector?

Thanks!

On Tue, 20 Aug 2024 at 12:13, Michel Engelen @.***> wrote:

In a tree data structure, a group node is any node with children. Every group node is a descendant of its parent because of the hierarchical nature. Example:

Consider the following tree:

    A
   / \
  B   C
 / \
D   E
  • Node A is the root.
  • Node B is a group node (it has children D and E).

Why B is a Descendant of A:

  • Parent-Child Relationship: Node B is directly connected to Node A, making A the parent of B.
  • Descendant Definition: Since there's a direct path from A to B, Node B is a descendant of Node A.

In this hierarchy, B is a group node because it has children (D and E), and it's also a descendant of its parent, A.

Therefore Node A has a total of 5 descendants.

This is a representation of the same data in a flat version: Flat Data Grid with Paths: Node Parent Path A None A B A A > B C A A > C D B A > B > D E B A > B > E

Does that clear it up for you?

— Reply to this email directly, view it on GitHub https://github.com/mui/mui-x/issues/14268#issuecomment-2298600335, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABHXQDTK6AHACV5SHDAJSADZSMQFNAVCNFSM6AAAAABMZFSHROVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOJYGYYDAMZTGU . You are receiving this because you were mentioned.Message ID: @.***>

--

Will Swannell Co-Founder, CEO [image: -] https://360.hirespace.com/ t. 0207 099 2512 e: @.*** w: 360.hirespace.com Spotlight: Pergola on the Wharf https://hubs.la/Q02h_fSH0 [image: Pergola on the Wharf] https://hubs.la/Q02h_fSH0 [image: LinkedIn] https://www.linkedin.com/company/hire-space [image: Facebook] https://www.facebook.com/HireSpace [image: Instagram] https://www.instagram.com/hirespace/ [image: Twitter] https://twitter.com/HireSpace/ Latest from our blog: Exploring AI's Impact on Events: A Comprehensive Guide for Event Organisers https://hirespace.com/blog/the-impact-of-ai-on-events

Need a helping hand with your events? Check out Hire Space 360 https://360.hirespace.com/, the ultimate toolkit for modern event planners.

michelengelen commented 3 weeks ago

IMHO this is the way this feature should work. There is one thing that is easily misunderstood here: The group node B is still a valid descendant of A and should therefor be counted towards the descendant count.

Thats why I added the flat representation as well i my last comment:

Flat Data Grid with Paths:

Node Parent Path
A None A
B A A > B
C A A > C
D B A > B > D
E B A > B > E

As you can see here without the tree data grouping B is still a valid row.

Depending on your needs you should probably consider using the Row grouping feature instead.

github-actions[bot] commented 2 weeks ago

The issue has been inactive for 7 days and has been automatically closed.

ashburnham commented 1 week ago

agree this is not a bug, but it is still required so have opened feature request https://github.com/mui/mui-x/issues/14491

github-actions[bot] commented 1 week ago

:warning: This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@ashburnham: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.