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.

API

• GridApi
• DataGrid
• DataGridPro
• DataGridPremium