数据表格 - 列跨越

跨多列合并单元格。

默认情况下，每个单元格占据一列的宽度。您可以使用列跨越来修改此行为。它允许单元格跨越多列。这非常类似于 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