0

I am using MUI Data Gri (pro version). I want to add some checkboxes to the sidebar and use those checkboxes to filter various columns. For example, imagine I have three columns:

* Column Letters:  ['a', 'b', 'c', 'd', etc.]
* Column Numbers:  [1, 2, 3, 4,5, etc.]
* Column Names:  ['Bob', 'Bill', 'Jim', 'Joe', etc]

Now let's also imagine that in my sidebar, I have different checkboxes:

* First 10 letters of the alphabet:  []
* Last 10 letters of the alphabet: []
* Even numbers:  []
* Odd numbers: []
* Names that begin with 'B': []
* Names that begin with 'J': [] 

What I want is for someone to check one or more of those checkboxes and have them filter the appropriate columns. What I can't figure out is how to connect the checkboxes to the Data Grid. That is to say, I'm not having an issue with how to set up a filter to filter for only odd numbers or names that begin with B, but rather how to use a custom checkbox to apply such a filter.

I thought of using apiRef: https://mui.com/x/react-data-grid/api-object/

In particular, to use setFilterModel as noted on the Grid Api docs: https://mui.com/x/api/data-grid/grid-api/

Now, I'm not sure this is the right way to do it, but either way it is NOT working. Here is what I tried (using a button rather than a checkbox):

import { useGridApiRef } from "@mui/x-data-grid-pro";
export default function Sidebar({) {
  const apiRef = useGridApiRef();

  <DataGridPro
    apiRef={apiRef}
    components={{ Toolbar: GridToolbar }}
    rows={rowsData}
    columns={columnsData}
  />

  <Button
    variant="contained"
    onClick={() =>
      apiRef.current.setFilterModel([
        {
          id: 1,
          columnField: "roic10y",
          operatorValue: ">=",
          value: 10,
        },
      ])
    }
  >
    Set Filter Model
  </Button>
  );
}

However, when I click on this button, I get the following error: TypeError: Cannot read properties of undefined (reading 'length')

enter image description here

Am I doing this the right way? I.e., should I be using setFilterModel? If so, what am I doing wrong and how can I fix it? If not, what should I be doing?

Thanks :).

Olivier Tassinari
  • 8,238
  • 4
  • 23
  • 23
Moshe
  • 6,011
  • 16
  • 60
  • 112
  • Does this answer help? https://stackoverflow.com/questions/73200492/how-to-filter-datagrid-columns-on-click-of-an-external-button-in-mui/73230178#73230178 – ckesplin Feb 17 '23 at 03:11

0 Answers0