資料格 - 列排序

拖放您的列以重新排序。

列重新排序功能讓使用者可以拖曳特殊的重新排序儲存格來重新排列列。

預設情況下，列重新排序功能是停用的。若要啟用它，您需要新增 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