I am currently working with the MUI Data Grid (pro version) and I am looking to implement checkboxes in the sidebar to filter different columns. Consider 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 say I have various checkboxes in my sidebar:
* 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': []
My goal is for users to select one or more checkboxes and have them filter the corresponding columns. The challenge lies in connecting these checkboxes to the Data Grid. Setting up filters for odd numbers or names starting with 'B' isn't the issue; it's how to link custom checkboxes to apply such filters.
I considered using apiRef: https://mui.com/x/react-data-grid/api-object/
In particular, utilizing setFilterModel as mentioned on the Grid Api docs: https://mui.com/x/api/data-grid/grid-api/
The approach described above doesn't seem to be working. Here's what I attempted (using a button instead of 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>
);
}
Upon clicking this button, an error occurs stating:
TypeError: Cannot read properties of undefined (reading 'length')https://i.sstatic.net/KUElq.png
Am I following the correct approach? Should I be using setFilterModel? If so, where am I going wrong and how can I rectify it? If not, what alternative method should I explore?
Thanks :).