Data Grid - API 对象

使用 Data Grid 的 API 进行交互。

API 对象是一个接口，其中包含状态以及所有可用于以编程方式与 Data Grid 交互的方法。

您可以在 GridApi 页面上找到所有 API 方法的列表。

如何使用 API 对象

API 对象可以通过 apiRef 变量访问。要访问此变量，请使用 useGridApiContext（在 Data Grid 内部）或 useGridApiRef（在 Data Grid 外部）。

在 Data Grid 内部

要在组件插槽或渲染内部（例如，renderCell 或 renderHeader）访问 API 对象，请使用 useGridApiContext Hook

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

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

在 Data Grid 外部

当在 Data Grid 组件外部使用 API 对象时，您需要使用 useGridApiRef Hook 初始化它。然后，您可以将其传递给 Data Grid 的 apiRef 属性

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

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

常见用例

访问禁用的列功能

您可以使用 initialState、受控模型或 API 对象以编程方式控制列的禁用功能（例如隐藏、排序、筛选、固定、分组等）。

在下面的示例中，API 对象用于为 firstName 列构建自定义排序，该列默认网格 UI 不可排序（即 colDef.sortable 属性设置为 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>
  );
}