[data grid] Conditional row grouping

[igortas]

Search keywords

conditional grouping grid

Latest version

• I have tested the latest version

Summary

I expect I have option to dynamically set which rows I like to be grouped, and not all rows to be in grouped mode, but some of them I choose, or depending from some dynamic data.

So having grouping for all rows, looks terrible, when I expand the data, and I see empty rows, or worse, I need to so much preparation for my data, so I can hide the grouping row below, which also shows as nested children.

Examples

 A (grouping row)
   B nested row
   C nested row
  D (flat, no nested rows)
  E (flat, no nested rows)

Motivation

Lacking of this option, I have issues implementing properly the feature(s) I need with conditional grouping data.

Order ID or Support key 💳 (optional)

No response

[MBilalShafi]

Hey @igortas

You could use groupingValueGetter on the column definition to prevent some rows from being grouped.

In https://codesandbox.io/p/sandbox/admiring-wind-sj64jg, I used it to stop grouping the movies belonging to the company 20th Century Fox. You could do this based on multiple criteria, check the signature of the groupingValueGetter here.

Would that fulfill your requirement?

[igortas]

Hi @MBilalShafi,
There is not a good way of setting when u like or not conditional grouping, I have into inject some values like isEmpty in the data, than hide those, just so I have propery way of saying, conditional grouping, for my shared mui x component. I have hard time customizing the table, not just grouping, but other things too.

Applying groupingValueGetter still under the hood mui see the column as it is in grouping mode, which prevents the grouping row to have other column cells fullfiled (they are all blank, and most important in my case, pinned columns too)...

[MBilalShafi]

@igortas

I'd love to see a live example to understand the pain points clearly, could you provide a minimal reproduction of the mentioned issue and the challenges with the current approach?

Here's a guide on how to prepare one: https://mui.com/x/introduction/support/#bug-reproductions

Thank you

[igortas]

Hi @MBilalShafi

The example u provide is half there, I have few things that premuim version of x grid don't support in way i need, so I need table like this (e.g documents and files for simplicity):

documentTitle   fileName               view                                   more
^ Doc A                     X             (custom component)        (custom component)
                            fiile A            (custom component)        (custom component)  
                            file  B            (custom component)         (custom component)
  Doc B                   X                (custom component)         (custom component)

What I'm trying to do, or I need with mui x are this few things:

• Conditional grouping(not all rows I like to be grouped by document title, that thing I like to control, through files, if files.length === 0, no need for grouping), current implementation is that, even I'm doing conditional rendering, still x grid, set the columns in grouping mode

• I like the grouping row to keep it's own data, own attributes, but also pinned columns (those are view and more, that are custom react components)

So in my simple scenario I have documents and files, first row is grouped, because it have two files, but currently other data in the document grouping rows I can't keep, nor pinned columns. On the otherside, second row I like not to be grouped, because no files exists for that document.

Data comes in fashion like this:

[
  { documentTitle: 'Doc A', fileName: 'file A', view, more },
  { documentTittle: 'Doc A', fileName: 'file B', view more },
  { documentTitle: 'Doc B', view, more }
]

Currently, there is no way in x grid, to express table like this.

[MBilalShafi]

I tried to visualize your use case in this example: https://stackblitz.com/edit/react-y6ukuz?file=Demo.tsx

It has a row with Doc B that has not been grouped via the groupingValueGetter and you could also have the custom components in pinned columns for each row.

Is it close to what you are trying to achieve? If not, could you fork the example, try to reproduce the issue, and attach the updated example to be able to understand the issue better?

[igortas]

Thanks @MBilalShafi

Looks like I was missing all the time the useKeepGroupedColumnsHidden hook, I think this hook will fulfill my need.

What I don't like is that, groupingValueGetter, I don't like to make distinctions directly with fileName, I tend to use some shared variant of the mui x grid, so I need a way through props to decide, when to group or not, this way I'm forced to add some special column, and hide the column that will help me with the distinction for conditional grouping.

Also, I like the first cell below grouping row to be empty.

I'm facing this error: Uncaught TypeError: props.apiRef.current.subscribeEvent is not a function, after adding the useKeepGroupedColumnsHidden hook:

props.apiRef.current.subscribeEvent("rowGroupingModelChange", (newModel) => {

	const initialState = useKeepGroupedColumnsHidden({
		apiRef,
		initialState: {
			rowGrouping: {
				model:  ['documentTitle']
			},
			pinnedColumns: {
				right: ['view', 'more']
			}
		}
	});

[MBilalShafi]

I need a way through props to decide, when to group or not, this way I'm forced to add some special column, and hide the column that will help me with the distinction for conditional grouping.

Not sure if I follow this. Shouldn't row grouping work on some columns to begin with? If there's no column corresponding to the data values, how would the row grouping work?
I have a feeling your use case is more aligned with the tree data rather than row grouping. Have you already given it a try?

Also, I like the first cell below grouping row to be empty.

You could do that by providing a custom grouping cell renderer.

I'm facing this error: Uncaught TypeError: props.apiRef.current.subscribeEvent is not a function, after adding the useKeepGroupedColumnsHidden hook:

Could you reproduce the error on top of the stackblitz demo I linked above or separately and share a live reproduction here? That way it will be easy to assess what the issue is.