javascriptreactjsfiltermaterial-uimui-x-data-grid

MUI X Data Grid filter based on array values


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


Solution

  • 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.