数据表格 - 行排序

拖放你的行来重新排序。

行重新排序允许用户通过拖动特殊的重新排序单元格来重新排列行。

默认情况下，行重新排序是禁用的。要启用它，你需要添加 rowReordering 属性。

<DataGridPro rowReordering />

要捕获拖动行的顺序变化，你可以将回调传递给 onRowOrderChange 属性。此回调将使用 GridRowOrderChangeParams 对象调用。

此外，你可以导入以下事件以自定义行重新排序体验

• rowDragStart：当行开始拖动时发出。
• rowDragOver：当拖动行到另一行上方时发出。
• rowDragEnd：当行拖动停止时发出。

自定义重新排序值

默认情况下，当你开始拖动行时，可拖动框中会显示 id。要更改此设置，你可以为每行指定 __reorder__ 字段的值。

const columns: GridColDef[] = [{ field: 'brand' }];

const rows: GridRowsProp = [
  { id: 0, brand: 'Nike', __reorder__: 'Nike' },
  { id: 1, brand: 'Adidas', __reorder__: 'Adidas' },
  { id: 2, brand: 'Puma', __reorder__: 'Puma' },
];

<DataGridPro rows={rows} columns={columns} rowReordering />;

自定义行重新排序图标

要更改用于行重新排序的图标，你可以为图标插槽提供不同的组件，如下所示

<DataGridPro
  slots={{
    rowReorderIcon: CustomMoveIcon,
  }}
/>

另一种自定义方法是添加一个 field: __reorder__ 的列到你的列集合中。这样，你可以覆盖 GRID_REORDER_COL_DEF 列中的任何属性。网格将检测到已经定义了重新排序列，并且不会在默认位置添加另一个。如果只设置了 field，那么你需要自己配置其余选项（例如禁用列菜单、筛选、排序）。要从我们建议的配置开始，在定义列时展开 GRID_REORDER_COL_DEF。

<DataGridPro
  columns={[
    {
      ...GRID_REORDER_COL_DEF, // Already contains the right field
      width: 40,
    },
  ]}
/>

这种方法也可以用于更改切换列的位置。

使用行分组重新排序行 🚧

使用树状数据重新排序行 🚧

API

• DataGrid
• DataGridPro
• DataGridPremium