MUI X Data Grid filter based on array values

Question

Im currently building a management system that consists of three MUI X Data Grid. There is only ever one showing, but you can change between the three Grids by clicking on tabs above.

My setup looks almost identical to the Facebook Ads Manger (Image).

Similar to the Facebook Ads Manager I want someone to be able to select a row in tab one which has a specific id and then in tab two only display those rows that have the same id.

So I want to filter based on a value. Normally I would do something like this:

            <DataGrid
                rows={rows}
                columns={columns}
                checkboxSelection={true}
                filterModel={{
                    items: [{ columnField: "columnName", operatorValue: "equals", value: valueOfSelectedRowInTabOne }],
                }}
            />

But the issue I have is that users may select multiple rows in tab one meaning I would have to filter based on all the values the selected rows have.

To achieve that I have an array of all the selected row values. But how would I go about filtering based on a whole array? The perfect scenario for me would be to do something like this (Change the filterValue to the whole array):

        <DataGrid
            rows={rows}
            columns={columns}
            checkboxSelection={true}
            filterModel={{
                items: [{ columnField: "columnName", operatorValue: "equals", value: ARRAYofSelctedRowValuesInTabOne }],
            }}
        />

Is there a way to do this with the MUI X Data Grid? Am I missing something?

I'd really appreciate any kind of help.

Kind regards, Peter

Peter · Accepted Answer · 2022-08-01 09:55:50Z

3

I have now fixed this issue.

In case anybody else ever wants to do something similar here is how I did it:

It was literally just changing the operator value from "equals" to "isAnyOf". I was not aware that this was an option but apparently it is.

answered Aug 1, 2022 at 9:55

Peter

731 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

chrismarx Over a year ago

Any idea of where the filter operators like "isAnyOf" are documented?

Peter Over a year ago

I didn't find any documentation on all operators unfortunately. What I did was loop through all possible ones and print them out in the console to know which ones there are. I think I used this function: mui.com/x/react-data-grid/filtering/#customize-the-operators

Nor.Z Feb 17 at 3:10

What is the code you used to find out all operators? \ I found couple ones in source code but not enough. \ github.com/mui/mui-x/blob/… \ mui-x/packages/x-data-grid/src/colDef/gridNumericOperators.ts \ mui-x/packages/x-data-grid/src/colDef \ mui-x/packages/x-data-grid/src/locales/zhCN.ts

Nor.Z Feb 17 at 4:22

Btw, Im not sure, is array in a column supported by Mui Datagrid filter?

Nor.Z Feb 23 at 5:12

Nvm. To find out the operators: \ getGridStringOperators getGridNumericOperators getGridBooleanOperators getGridDateOperators getGridSingleSelectOperators \ mui.com/x/react-data-grid/filtering/customization

Collectives™ on Stack Overflow

MUI X Data Grid filter based on array values

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related