Data Grid - API object
Interact with the Data Grid using its API.
The API object is an interface containing the state and all the methods available to programmatically interact with the Data Grid.
You can find the list of all the API methods on the GridApi page.
How to use the API object
The API object is accessible through the apiRef variable.
To access this variable, use useGridApiContext (inside the Data Grid) or useGridApiRef (outside the Data Grid).
Inside the Data Grid
To access the API object inside component slots or inside renders (for instance, renderCell or renderHeader), use the useGridApiContext hook:
function CustomFooter() {
const apiRef = useGridApiContext();
return <Button onClick={() => apiRef.current.setPage(1)}>Go to page 1</Button>;
}
Outside the Data Grid
When using the API object outside the data grid components, you need to initialize it using the useGridApiRef hook.
You can then pass it to the Data Grid's apiRef prop:
function CustomDataGrid(props) {
const apiRef = useGridApiRef();
return (
<div>
<Button onClick={() => apiRef.current.setPage(1)}>Go to page 1</Button>
<DataGrid apiRef={apiRef} {...other} />
</div>
);
}
Common use cases
Retrieve data from the state
You can find a detailed example on the State page.
Listen to grid events
You can find a detailed example on the Events page.