資料格 - API 物件

使用其 API 與資料格互動。

API 物件是一個介面，包含狀態和所有可透過程式碼與資料格互動的方法。

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

如何使用 API 物件

API 物件可透過 apiRef 變數存取。若要存取此變數，請使用 useGridApiContext (在資料格內) 或 useGridApiRef (在資料格外)。

在資料格內

若要在元件插槽或渲染函式 (例如 renderCell 或 renderHeader) 內存取 API 物件，請使用 useGridApiContext Hook。

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

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

在資料格外

當在資料格元件外使用 API 物件時，您需要使用 `useGridApiRef` Hook 初始化它。然後您可以將其傳遞給資料格的 `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>
  );
}