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')
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 :).