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

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, API object is used to build a custom sorting for the firstName column which is not sortable by the default grid UI (i.e colDef.sortable property is 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>
  );
}