Groupe by type of data rows

[ouchaaou]

Hi,
I have several rows in my interface.
I wanted to group my data by 'Product' as in this example:
Example :
https://ibb.co/cx2kwnT

https://codesandbox.io/s/beautiful-jennings-9g92g?file=/src/App.js

Do you have an idea on the code to do?
Thank you

[patorjk]

See this thread: #904

The table doesn't have this ability built in, but it's possible to do by using the expandableRows feature. I started on a feature for this but got sidetracked. I may look back into it and see how far I was.

[ouchaaou]

Thanks Patorjk
Maybe these links could help

https://material-table.com/#/docs/features/grouping

https://material-table.com/#/docs/features/tree-data

Section 'Default Grouped Field Example'
https://material-table.com/#/docs/features/detail-panel

[ouchaaou]

We can have same logic from this link :
https://codesandbox.io/s/kbcee?file=/index.js
What do you think ?

[patorjk]

Nesting tables is already possible: https://codesandbox.io/s/hungry-dubinsky-wr1yu?file=/src/App.js

I'm not a fan of material-table's API, however, I think they're taking queues from React Grid:

https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/grouping/

When I get some time, I'll try and finish up a beta version of this feature.

[ouchaaou]

I just updated my previous comment.
The direct link to the closest example I wanted:
https://codesandbox.io/s/kbcee?file=/index.js

Which code do you recommend (I meant the easiest to integrate with : mui-datatables ) ?
1)
https://codesandbox.io/s/hungry-dubinsky-wr1yu?file=/src/App.js
2)
https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/grouping/
3)
https://codesandbox.io/s/kbcee?file=/index.js

[patorjk]

I've started work on a grouping feature. The beta version is a PR here: #1441

[ouchaaou]

we can add condition for expandal rows ?
example expand only when 'location' = 'Santa Mana'

[patorjk]

Yep, you can do that in the draft I have up. It'd look like this: (assuming location is at column index 1):

    grouping: {
      columnIndexes: [1],
      expanded: {
        "Santa Mana": {open: true}
      }
    }

I think I may want to use columnNames instead of columnIndexes, but indexes were easier to work with starting out. I'm think I may change the API to look more like this:

    grouping: {
      columnNames: ['location'],
      expanded: {
        "Santa Mana": {expanded: true}
      }
    }

I'm thinking of also adding groupBy and groupByLabel options to allow for custom groupings (outside of just using the column value). Ex:

    grouping: {
      columnNames: ['location'],
      expanded: {
        "Santa Mana": {expanded: true}
      },
      groupBy: {
        "location": function(colVal) => {
          if (colVal === 'Santa Mana') return 'Santa Mana';
          return "Not Santa Mana";
         }
      },
      groupByLabel: {
        "location": function(groupByVal) => {
           return groupByVal + "!";
         }
      },
    }

[007AMAN007]

I am not using grouping. I am using "expandableRows". I want to expand some rows on the basis of some condition. I can achieve this with the help of "isRowExpandable". But it is not helping me to hide/remove expandable icon. I want to hide/remove expandable icon of some rows.

[patorjk]

@007AMAN007 can you open a new issue for this?

The table currently doesn't have a way to do this, but it should be a pretty straight forward to add.

[007AMAN007]

Created a new issue #1446

[ouchaaou]

Hi @patorjk ,
Thanks for all the feedback

My question is always for the group by with some precision
https://codesandbox.io/s/github/gregnb/mui-datatables/tree/groupings

I imported your bookseller and I personalized.
I have been using for about a year now
How can I just take the code from 'group by' and insert it into my code?

When I click on the button which is to the left of the title I consult the data as in the photo
(Anything framed in red, I wanted to remove it)
https://ibb.co/TmR2yW4

In my database, I have two types:
User type = single ( id = 1 )
User type = group ( id = 2 )

When :
User type = single : a single line is displayed without the possibility of scrolling
When :
User type = group : we display as in the photo: possibility of group by
Do you know where i can add this condition ?

Thanks

[ouchaaou]

Hi @patorjk ,
Any updat for this issue please ?

[patorjk]

I haven't had a lot of time recently. This week I'm going to try to get a version of the feature into a beta release so it can be properly tested out to see how it works for various scenarios.

[ouchaaou]

ok @patorjk
Thanks