跳到內容
+

Data Grid - 排序

輕鬆根據一個或多個條件排序您的列。

排序預設為 Data Grid 使用者啟用，並且無需任何明確的配置即可運作。使用者只需點擊欄標題即可設定排序規則。後續點擊會變更欄的排序方向。您可以在標題的箭頭指示器上看到已套用的方向。

單一和多重排序

多重排序

以下示範讓您可以同時根據多個條件排序列。

按住 Ctrl 或 Shift 鍵（macOS 上使用 ⌘ Command 鍵）同時點擊欄標題。

將排序規則傳遞到 Data Grid

模型的結構

排序模型是排序項目的清單。每個項目代表一個排序規則，並由幾個元素組成

  • sortingItem.field：規則套用的欄位。
  • sortingItem.sort：排序方向（'asc'、'desc'、null 或 undefined）。如果為 null 或 undefined，則規則不適用。

初始化排序模型

排序預設為使用者啟用。但是，如果您想要設定初始排序順序，只需將模型提供給 initialState 屬性即可。

<DataGrid
  initialState={{
    sorting: {
      sortModel: [{ field: 'rating', sort: 'desc' }],
    },
  }}
/>

受控排序模型

使用 sortModel 屬性來控制排序規則的狀態。

您可以使用 onSortModelChange 屬性來監聽排序規則的變更，並據此更新屬性。

停用排序

適用於所有欄

排序預設為啟用，但您可以透過設定 disableColumnSorting 屬性輕鬆停用此功能。

<DataGrid disableColumnSorting />

適用於某些欄

預設情況下，所有欄都可排序。若要在欄上停用排序，請將 GridColDef 的 sortable 屬性設定為 false。在以下示範中，使用者無法從 UI 排序評分欄。

<DataGrid columns={[...columns, { field: 'rating', sortable: false }]} />

以程式方式排序不可排序的欄

colDef.sortable 設定為 false 的欄無法從網格 UI 排序，但仍然可以透過程式方式排序。若要將排序規則新增至此類欄，您可以初始化 sortModel、使用 sortModel 屬性，或使用 API 方法 sortColumn 或 setSortModel。

在以下示範中，firstName 欄預設情況下無法透過網格 UI 排序，但它會透過自訂建置的 UI 以程式方式排序。

排序時重設頁面

預設情況下，排序不會變更目前頁面。若要在套用新排序時將使用者送回第一頁，請使用 resetPageOnSortFilter 屬性。

自訂比較器

比較器決定應如何排序兩個儲存格值。

每個欄類型都帶有預設的比較器方法。您可以透過匯入以下函式來重複使用它們

  • gridStringOrNumberComparator（由 string 和 singleSelect 欄使用）
  • gridNumberComparator（由 number 和 boolean 欄使用）
  • gridDateComparator（由 date 和 date-time 欄使用）

若要在特定欄中擴充或修改此行為，您可以傳入自訂比較器，並覆寫 GridColDef 介面的 sortComparator 屬性。

從頭開始建立比較器

在以下示範中，「建立於」欄的排序是基於 createdOn 欄位的月份日期。這是一個完全自訂的排序比較器。

組合內建比較器

在以下示範中，「名稱」欄組合了 name 和 isAdmin 欄位。排序基於 isAdmin，然後在必要時基於 name。它重複使用了內建的排序比較器。

非對稱比較器

Data Grid 認為 sortComparator 函式是對稱的，透過將其乘以 -1 自動反轉降序排序的傳回值。

雖然這對於大多數用例來說已經足夠，但可以使用 getSortComparator 函式定義非對稱比較器 – 它接收排序方向作為參數並傳回比較器函式。

在以下示範中，getSortComparator 函式用於「數量」欄中，以在套用排序時將 null 值保持在底部（無論排序方向如何）

自訂排序順序

預設情況下，排序順序會在以下三種不同模式之間循環

const sortingOrder = ['asc', 'desc', null];

實際上，當您點擊未排序的欄時，它將以升序 (asc) 排序。下一次點擊將使其以降序 (desc) 排序。再點擊一次將移除排序 (null)，還原為資料提供的順序。

適用於所有欄

可以使用 sortingOrder 屬性覆寫所有欄的預設排序順序。在以下示範中，欄僅可以降序或升序排序。

每欄

可以透過設定 GridColDef 介面的 sortingOrder 屬性，在每欄的基礎上配置（和覆寫）排序順序

const columns: GridColDef = [
  { field: 'rating', sortingOrder: ['desc', 'asc', null] },
];

伺服器端排序

可以透過將 sortingMode 屬性設定為 server，並實作 onSortModelChange 處理常式，在伺服器端執行排序。

按下 Enter 開始編輯

apiRef

簽名
applySorting: () => void
簽名
getRowIdFromRowIndex: (index: number) => GridRowId
簽名
getSortedRowIds: () => GridRowId[]
簽名
getSortedRows: () => GridRowModel[]
簽名
getSortModel: () => GridSortModel
簽名
setSortModel: (model: GridSortModel) => void
簽名
sortColumn: (field: GridColDef['field'], direction?: GridSortDirection, allowMultipleSorting?: boolean) => void

選擇器

簽名
gridSortModelSelector: (apiRef: GridApiRef) => GridSortModel
// or
gridSortModelSelector: (state: GridState, instanceId?: number) => GridSortModel
範例
gridSortModelSelector(apiRef)
// or
gridSortModelSelector(state, apiRef.current.instanceId)
簽名
gridSortedRowEntriesSelector: (apiRef: GridApiRef) => GridRowEntry<GridValidRowModel>[]
// or
gridSortedRowEntriesSelector: (state: GridState, instanceId?: number) => GridRowEntry<GridValidRowModel>[]
範例
gridSortedRowEntriesSelector(apiRef)
// or
gridSortedRowEntriesSelector(state, apiRef.current.instanceId)
簽名
gridSortedRowIdsSelector: (apiRef: GridApiRef) => GridRowId[]
// or
gridSortedRowIdsSelector: (state: GridState, instanceId?: number) => GridRowId[]
範例
gridSortedRowIdsSelector(apiRef)
// or
gridSortedRowIdsSelector(state, apiRef.current.instanceId)

有關選擇器以及如何在 專用頁面 上使用它們的更多資訊

API