資料格線 - 欄位跨越

跨越多個欄位延展儲存格。

預設情況下，每個儲存格佔據一個欄位的寬度。您可以使用欄位跨越來修改此行為。它允許儲存格跨越多個欄位。這非常接近 HTML <table> 中的「欄位跨越」。

若要變更儲存格應跨越的欄位數，請使用 GridColDef 中提供的 colSpan 屬性。

interface GridColDef {
  /**
   * Number of columns a cell should span.
   * @default 1
   */
  colSpan?: number | ((params: GridCellParams<R, V, F>) => number | undefined);
  …
}

數字簽名

數字簽名會將欄位中的所有儲存格設定為跨越給定的欄位數。

interface GridColDef {
  colSpan?: number;
}

<DataGrid
  columns={[
    { field: 'username', colSpan: 2, hideable: false },
    {
      field: 'organization',
      sortable: false,
      filterable: false,
      hideable: false,
    },
    { field: 'age', hideable: false },
  ]}
  rows={rows}
  {...other}
/>

<DataGrid
  columns={[
    { field: 'username', colSpan: 2, hideable: false },
    {
      field: 'organization',
      sortable: false,
      filterable: false,
      hideable: false,
    },
    { field: 'age', hideable: false },
  ]}
  rows={rows}
  {...other}
/>

按下 Enter 鍵開始編輯

函數簽名

函數簽名允許僅跨越欄位中的特定儲存格。該函數接收 GridCellParams 作為參數。

interface GridColDef {
  colSpan?: (params: GridCellParams<R, V, F>) => number | undefined;
}

函數簽名也可用於從列資料衍生 colSpan 值

資料格線 - 欄位跨越

數字簽名

函數簽名

API