Data Grid - API object

Interact with the grid using its API.

What is the API object

The API object is an interface containing the state and all the methods available to programmatically interact with the 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. Depending on where you are trying to access this variable, you will have to use either useGridApiContext or useGridApiRef.

Use it inside the grid

If you need to access the API object inside component slots or inside renders (e.g: renderCell, renderHeader), you can use the useGridApiContext hook.

function CustomFooter() {
  const apiRef = useGridApiContext();

  return <Button onClick={() => apiRef.current.setPage(1)}>Go to page 1</Button>;
}

Use it outside the grid

When using the API object outside the grid components, you need to initialize it using the useGridApiRef hook. You can then pass it to the apiRef prop of the grid.

function CustomDataGrid(props) {
  const apiRef = useGridApiRef();

  return (
    <div>
      <Button onClick={() => apiRef.current.setPage(1)}>Go to page 1</Button>
      <DataGridPro apiRef={apiRef} {...other} />
    </div>
  );
}