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 DataGrid) or useGridApiRef (outside DataGrid).

To access the API object inside component slots or inside renders (for instance, renderCell or renderHeader), use the useGridApiContext hook. The snippet below renders Button inside the Grid's GridToolbarContainer:

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

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

Outside the Data Grid

When using the API object outside Data Grid components, you must initialize it using the useGridApiRef hook. You can then pass it to the apiRef prop on the DataGrid:

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

Access the disabled column features

You can control the disabled features of a column (for example hiding, sorting, filtering, pinning, grouping, etc) programmatically using initialState, controlled models, or the API object.

In the example below, the API object is used to build a custom sorting for the firstName column which is not sortable by the default grid UI (using the colDef.sortable property set to false).

const columns = [{ field: 'rating', sortable: false }, ...otherColumns];

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

  return (
    <div>
      <Button onClick={() => apiRef.current.sortColumn('firstName', 'asc')}>
        Sort by ASC
      </Button>
      <Button onClick={() => apiRef.current.sortColumn('firstName', 'desc')}>
        Sort by DESC
      </Button>
      <Button onClick={() => apiRef.current.sortColumn('firstName', null)}>
        Clear sort
      </Button>
      <DataGrid columns={columns} apiRef={apiRef} {...other} />
    </div>
  );
}