API Reference

As you may have already noticed in the Filters tutorial, the grid exposes a rich API that allows you to control the grid's behavior and appearance. This API is available through the apiRef object that is available via the event bus. There is an event bus property on the GridOptions object that you can use to access the apiRef object.

const apiRef = useRef<ApiContext | null>(null);

<ReactDataGrid
  style={{ height: "400px", width: "100%" }}
  gridOptions={{
    dataProvider: Employee.getAllEmployees(),
    uniqueIdentifierOptions: {
      useField: "employeeId",
    },
    columns,
    eventBus: {
      onApiContextReady: (ctx) => {
        apiRef.current = ctx;
      },
    },
  }}
/>;

Important

Please note, the onApiContextReady is called every time the grid is rebuilt. This means that you should not call something onApiContextReady that will cause the grid to rebuild. For example, if you reset the data provider in onApiContextReady, you will get an infinite loop. This includes resizing the grid. The most often times we have seen this happen is when customers do something in the callback that changes the grid's height. This causes a grid to rebuild and the onApiContextReady to be called again.

Accessing the API

The ApiContext has two properties: api and context. The api property is an object that contains all of the API methods. The context property is an object that contains all of the context properties. The documentation for the API methods and context properties can be found in the Event Bus and Grid Context section of the documentation.

API Methods

Lets take a look at some of the API methods that are available. The following example shows how to use the setFilterValue method to set a filter on the firstName column, and the clearFilterValue method to clear the filter on the firstName column. The clearAllFilterValues method clears all filters.

Live Editor

function App() { const apiRef = useRef(/*<ApiContext | null>*/ null); const columns = [ { ...createColumn("firstName", "string", "First Name"), filterOptions: createTextInputFilterOptions(FilterOperation.Contains), }, createColumn("lastName", "string", "Last Name"), { ...createColumn("annualSalary", "currency", "Salary"), filterOptions: createNumericRangeFilterOptions(), }, createColumn("stateCode", "string", "Territory"), createColumn("department", "string", "Department"), ]; return ( <div> <div className="ezgrid-dg-toolbar-section"> <button onClick={() => { apiRef.current.api.setFilterValue("firstName", "Nick"); }} > Set First Name Filter </button> <button onClick={() => { apiRef.current.api.clearFilterValue("firstName"); }} > Clear First Name Filter </button> <button onClick={() => { apiRef.current.api.setFilterValue("annualSalary", { start: 60000, end: 75000, }); }} > Set Salary Filter </button> <button onClick={() => { apiRef.current.api.clearFilterValue("annualSalary"); }} > Clear Salary Filter </button> <button onClick={() => { apiRef.current.api.clearAllFilterValues(); }} > Clear All Filters </button> </div> <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ behaviors: [createFilterBehavior({})], dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, eventBus: { onApiContextReady: (ctx) => { apiRef.current = ctx; }, }, }} /> </div> ); }

function App() {
  const apiRef = useRef(/*<ApiContext | null>*/ null);
  const columns = [
    {
      ...createColumn("firstName", "string", "First Name"),
      filterOptions: createTextInputFilterOptions(FilterOperation.Contains),
    },
    createColumn("lastName", "string", "Last Name"),
    {
      ...createColumn("annualSalary", "currency", "Salary"),
      filterOptions: createNumericRangeFilterOptions(),
    },
    createColumn("stateCode", "string", "Territory"),
    createColumn("department", "string", "Department"),
  ];

  return (
    <div>
      <div className="ezgrid-dg-toolbar-section">
        <button
          onClick={() => {
            apiRef.current.api.setFilterValue("firstName", "Nick");
          }}
        >
          Set First Name Filter
        </button>
        <button
          onClick={() => {
            apiRef.current.api.clearFilterValue("firstName");
          }}
        >
          Clear First Name Filter
        </button>
        <button
          onClick={() => {
            apiRef.current.api.setFilterValue("annualSalary", {
              start: 60000,
              end: 75000,
            });
          }}
        >
          Set Salary Filter
        </button>
        <button
          onClick={() => {
            apiRef.current.api.clearFilterValue("annualSalary");
          }}
        >
          Clear Salary Filter
        </button>

        <button
          onClick={() => {
            apiRef.current.api.clearAllFilterValues();
          }}
        >
          Clear All Filters
        </button>
      </div>

      <ReactDataGrid
        style={{ height: "400px", width: "100%" }}
        gridOptions={{
          behaviors: [createFilterBehavior({})],
          dataProvider: Employee.getAllEmployees(),
          uniqueIdentifierOptions: {
            useField: "employeeId",
          },
          columns,
          eventBus: {
            onApiContextReady: (ctx) => {
              apiRef.current = ctx;
            },
          },
        }}
      />
    </div>
  );
}

Result

Loading...

See it in action

You can copy the code above and run it here

tip

All the built in filters use the api methods to set and clear the filter values. You can look at what the built in filters are doing here. Note how little code there is! This enables you to create your own custom filters with very little code. Examples here: Filter Options and in the tutorial's Filter section.

Column Menu Api Operations

All the operations in the column menu and the context menu are available as API methods. For example, here is the code from the Column Menu that uses the API methods to perform the operations in the column menu.

const menuItems = [
        opts.horizontalScroll !== HorizontalScrollMode.Off ? [
            lockMode !== LockMode.Left ? { label: LABELS.LOCK_LEFT, className: "lock-left-icon", onClick: () => setLockMode(LockMode.Left) } : undefined,
            lockMode !== LockMode.Right ? { label: LABELS.LOCK_RIGHT, className: "lock-right-icon", onClick: () => setLockMode(LockMode.Right) } : undefined,
            lockMode !== LockMode.None && lockMode ? { label: LABELS.REMOVE_LOCK, className: "unlock-icon", onClick: () => setLockMode(LockMode.None) } : undefined,
            { label: LABELS.UNLOCK_ALL, className: "unlock-icon", onClick: api.unlockAllColumns },
            { label: LABELS.HIDE_COL, className: "hide-col-icon", onClick: () => api.showHideColumn(getColId(), false) }, null] : undefined,

        getCol()?.enableSort !== false ? [
            { label: LABELS.SORT_ASCENDING, className: "sort-ascending-icon", onClick: (e: MouseEvent<HTMLAnchorElement>) => sortColumn(e, true) },
            { label: LABELS.SORT_DESCENDING, className: "sort-descending-icon", onClick: (e: MouseEvent<HTMLAnchorElement>) => sortColumn(e, false) },
            getColId() && api.getSort(getColId()) ? { label: LABELS.REMOVE_SORT, className: "sort-none-icon", onClick: () => getColId() && api.clearSort(getColId()) } : undefined,
            { label: LABELS.REMOVE_ALL_SORTS, className: "sort-none-icon", onClick: api.clearAllSorts }
            , null] : undefined,
        opts.enableFilters !== false && api.hasBehavior(Behaviors.FilterBehavior) ? [
            { label: LABELS.RUN_FILTER, className: "run-filter-icon", onClick: api.rebuild },
            getColId() && api.getFilterValue(getColId()) !== undefined ? { label: LABELS.CLEAR_FILTER, className: "clear-filter-icon", onClick: () => getColId() && api.clearFilterValue(getColId()) } : undefined,
            { label: LABELS.CLEAR_ALL_FILTERS, className: "clear-filter-icon", onClick: api.clearAllFilterValues }
            , null] : undefined,

        { label: LABELS.FIT_TO_CONTENT, className: "fit-width-icon", onClick: () => (getCol()) && api.autoFitColumns([getCol()!]) },
        { label: LABELS.FIT_TO_CONTENT_INCLUDE_HEADER, className

The code above shows you how to lock columns, sort columns, clear sorts, clear filters, and more.

Context Menu Api Operations

Similar to the column menu, all the operations in the context menu are available as API methods. For example, here is the code from the Context Menu that uses the API methods to perform the operations in the context menu.

const contextMenuItems: (ContextMenuItem | null)[] = [
  {
    className: "copy-cell-icon",
    label: LABELS.COPY_CELL,
    onClick: api.copyCell,
  },
  { className: "copy-row-icon", label: LABELS.COPY_ROW, onClick: api.copyRow },
  null,
  {
    className: "copy-column-icon",
    label: LABELS.COPY_COLUMN,
    onClick: api.copyColumn,
  },
  {
    className: "copy-table-icon",
    label: LABELS.COPY_TABLE,
    onClick: api.copyAll,
  },
  null,
  {
    className: "copy-cell-icon",
    label: LABELS.COPY_SELECTED_CELLS,
    onClick: api.copySelectedCells,
  },
  {
    className: "copy-row-icon",
    label: LABELS.COPY_SELECTED_ROWS,
    onClick: api.copySelectedRows,
  },
];

The code above shows you how to copy cells, copy rows, copy columns, and more.

For a full list of the API methods, see the API Reference.

There are numerous examples of using the API methods in the React DataGrid Examples.

Here are a few examples of commonly used API methods:

• Expand All on Init
• Set Filter Value
• Repaint
• Grouping
• Sorting
• Rebuilding the Grid
• Accessing the grid context
• Managing edits