資料格 - 篩選功能

輕鬆依據一個或多個條件篩選您的列。

篩選器可以透過資料格介面以多種方式修改

透過開啟欄位選單並點擊篩選選單項目。
透過點擊資料格工具列中的篩選器按鈕（如果已啟用）。

每個欄位類型都有其自己的篩選運算子。下方的示範讓您可以探索每個內建欄位類型的所有運算子。

請參閱專門章節，以了解如何建立您自己的自訂篩選運算子。

單一和多重篩選器

將篩選器傳遞至資料格

模型的結構

完整的類型詳細資訊可以在GridFilterModel API 頁面上找到。

篩選模型由 items 列表和一個 logicOperator 組成

`items`

篩選項目代表一個篩選規則，並由多個元素組成

filterItem.field：規則套用的欄位。
filterItem.value：要尋找的值。
filterItem.operator：要使用的運算子方法名稱（例如包含），符合運算子物件的 value 鍵。
filterItem.id ()：使用多個篩選項目時為必要項目。

`logicOperator`

logicOperator 告知資料格，一列是否應滿足所有 (AND) 篩選項目或至少一個 (OR) 篩選項目，才能被視為有效。

// Example 1: get rows with rating > 4 OR isAdmin = true
const filterModel: GridFilterModel = {
  items: [
    { id: 1, field: 'rating', operator: '>', value: '4' },
    { id: 2, field: 'isAdmin', operator: 'is', value: 'true' },
  ],
  logicOperator: GridLogicOperator.Or,
};

// Example 2: get rows with rating > 4 AND isAdmin = true
const filterModel: GridFilterModel = {
  items: [
    { id: 1, field: 'rating', operator: '>', value: '4' },
    { id: 2, field: 'isAdmin', operator: 'is', value: 'true' },
  ],
  logicOperator: GridLogicOperator.And,
};

如果未提供 logicOperator，資料格將預設使用 GridLogicOperator.Or。

初始化篩選器

若要在不控制篩選器的情況下初始化篩選器，請將模型提供給 initialState 屬性。

<DataGrid
  initialState={{
    filter: {
      filterModel: {
        items: [{ field: 'rating', operator: '>', value: '2.5' }],
      },
    },
  }}
/>

受控篩選器

使用 filterModel 屬性來控制套用在列上的篩選器。

您可以使用 onFilterModelChange 屬性來監聽篩選器的變更，並相應地更新屬性。

<DataGrid
  filterModel={{
    items: [{ field: 'rating', operator: '>', value: '2.5' }],
  }}
/>

停用篩選器

針對所有欄位

篩選器預設為啟用，但您可以透過設定 disableColumnFilter 屬性輕鬆停用此功能。

<DataGrid disableColumnFilter />

針對某些欄位

若要停用單一欄位的篩選器，請在 GridColDef 中將 filterable 屬性設定為 false。

在以下範例中，評分欄位無法篩選。

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

以程式方式篩選不可篩選的欄位

您可以初始化 filterModel、設定 filterModel 屬性，或使用 API 方法 apiRef.current.setFilterModel 來為不可篩選的欄位設定篩選器。這些篩選器將會套用，但在 UI 上將會是唯讀的，且使用者將無法變更它們。

const columns = [
  { field: 'name', filterable: false },
  ...otherColumns,
]

<DataGrid
  filterModel={{
    items: [{ field: 'name', operator: 'contains', value: 'a' }],
  }}
  columns={columns}
/>

篩選時重設頁面

預設情況下，使用者在套用篩選器後會停留在同一頁面，除非新的列計數表明該頁面不再存在。在這種情況下，使用者會被傳送到由新列計數定義的最後一頁。若要在套用新篩選器時將使用者送回第一頁，請使用 resetPageOnSortFilter 屬性。

忽略變音符號（重音符號）

您可以在篩選列時忽略變音符號（重音符號）。請參閱快速篩選 - 忽略變音符號（重音符號）。

apiRef

網格公開了一組方法，可透過命令式 apiRef 啟用所有這些功能。若要了解更多關於如何使用它的資訊，請查看API 物件章節。

deleteFilterItem()

刪除 GridFilterItem。

簽名

deleteFilterItem: (item: GridFilterItem) => void

getFilterState()

傳回給定篩選模型的篩選狀態，而不將其套用至資料格。

簽名

getFilterState: (filterModel: GridFilterModel) => GridStateCommunity['filter']

hideFilterPanel()

隱藏篩選面板。

簽名

hideFilterPanel: () => void

ignoreDiacritics()

傳回 ignoreDiacritics 屬性的值。

簽名

ignoreDiacritics: DataGridProcessedProps['ignoreDiacritics']

setFilterLogicOperator()

變更用於連接篩選器的 GridLogicOperator。

簽名

setFilterLogicOperator: (operator: GridLogicOperator) => void

setFilterModel()

將篩選模型設定為由 model 給定的模型。

簽名

setFilterModel: (model: GridFilterModel, reason?: GridControlledStateReasonLookup['filter']) => void

setQuickFilterValues()

將快速篩選值設定為由 values 給定的值

簽名

setQuickFilterValues: (values: any[]) => void

showFilterPanel()

顯示篩選面板。如果給定了 targetColumnField，也會新增此欄位的篩選器。

簽名

showFilterPanel: (targetColumnField?: string, panelId?: string, labelId?: string) => void

upsertFilterItem()

更新或插入 GridFilterItem。

簽名

upsertFilterItem: (item: GridFilterItem) => void

upsertFilterItems()

更新或插入多個 GridFilterItem。

簽名

upsertFilterItems: (items: GridFilterItem[]) => void

選擇器

gridExpandedRowCountSelector

取得篩選過程後可存取的列數。

簽名

gridExpandedRowCountSelector: (apiRef: GridApiRef) => number
// or
gridExpandedRowCountSelector: (state: GridState, instanceId?: number) => number

範例

gridExpandedRowCountSelector(apiRef)
// or
gridExpandedRowCountSelector(state, apiRef.current.instanceId)

gridExpandedSortedRowEntriesSelector

取得篩選過程後可存取的列的 id 和模型。不包含摺疊的子項。

簽名

gridExpandedSortedRowEntriesSelector: (apiRef: GridApiRef) => GridRowEntry<GridValidRowModel>[]
// or
gridExpandedSortedRowEntriesSelector: (state: GridState, instanceId?: number) => GridRowEntry<GridValidRowModel>[]

範例

gridExpandedSortedRowEntriesSelector(apiRef)
// or
gridExpandedSortedRowEntriesSelector(state, apiRef.current.instanceId)

gridExpandedSortedRowIdsSelector

取得篩選過程後可存取的列的 id。不包含摺疊的子項。

簽名

gridExpandedSortedRowIdsSelector: (apiRef: GridApiRef) => GridRowId[]
// or
gridExpandedSortedRowIdsSelector: (state: GridState, instanceId?: number) => GridRowId[]

範例

gridExpandedSortedRowIdsSelector(apiRef)
// or
gridExpandedSortedRowIdsSelector(state, apiRef.current.instanceId)

gridFilterModelSelector

取得目前的篩選模型。

簽名

gridFilterModelSelector: (apiRef: GridApiRef) => GridFilterModel
// or
gridFilterModelSelector: (state: GridState, instanceId?: number) => GridFilterModel

範例

gridFilterModelSelector(apiRef)
// or
gridFilterModelSelector(state, apiRef.current.instanceId)

gridFilteredDescendantRowCountSelector

取得篩選過程後可存取的後代列數。

簽名

gridFilteredDescendantRowCountSelector: (apiRef: GridApiRef) => number
// or
gridFilteredDescendantRowCountSelector: (state: GridState, instanceId?: number) => number

範例

gridFilteredDescendantRowCountSelector(apiRef)
// or
gridFilteredDescendantRowCountSelector(state, apiRef.current.instanceId)

gridFilteredRowCountSelector

取得篩選過程後可存取的列數。包含頂層和後代列。

簽名

gridFilteredRowCountSelector: (apiRef: GridApiRef) => number
// or
gridFilteredRowCountSelector: (state: GridState, instanceId?: number) => number

範例

gridFilteredRowCountSelector(apiRef)
// or
gridFilteredRowCountSelector(state, apiRef.current.instanceId)

gridFilteredSortedRowEntriesSelector

取得篩選過程後可存取的列的 id 和模型。包含摺疊的子項。

簽名

gridFilteredSortedRowEntriesSelector: (apiRef: GridApiRef) => GridRowEntry<GridValidRowModel>[]
// or
gridFilteredSortedRowEntriesSelector: (state: GridState, instanceId?: number) => GridRowEntry<GridValidRowModel>[]

範例

gridFilteredSortedRowEntriesSelector(apiRef)
// or
gridFilteredSortedRowEntriesSelector(state, apiRef.current.instanceId)

gridFilteredSortedRowIdsSelector

取得篩選過程後可存取的列的 id。包含摺疊的子項。

簽名

gridFilteredSortedRowIdsSelector: (apiRef: GridApiRef) => GridRowId[]
// or
gridFilteredSortedRowIdsSelector: (state: GridState, instanceId?: number) => GridRowId[]

範例

gridFilteredSortedRowIdsSelector(apiRef)
// or
gridFilteredSortedRowIdsSelector(state, apiRef.current.instanceId)

gridFilteredSortedTopLevelRowEntriesSelector

取得篩選過程後可存取的頂層列的 id 和模型。

簽名

gridFilteredSortedTopLevelRowEntriesSelector: (apiRef: GridApiRef) => GridRowEntry<GridValidRowModel>[]
// or
gridFilteredSortedTopLevelRowEntriesSelector: (state: GridState, instanceId?: number) => GridRowEntry<GridValidRowModel>[]

範例

gridFilteredSortedTopLevelRowEntriesSelector(apiRef)
// or
gridFilteredSortedTopLevelRowEntriesSelector(state, apiRef.current.instanceId)

gridFilteredTopLevelRowCountSelector

取得篩選過程後可存取的頂層列數。

簽名

gridFilteredTopLevelRowCountSelector: (apiRef: GridApiRef) => number
// or
gridFilteredTopLevelRowCountSelector: (state: GridState, instanceId?: number) => number

範例

gridFilteredTopLevelRowCountSelector(apiRef)
// or
gridFilteredTopLevelRowCountSelector(state, apiRef.current.instanceId)

gridQuickFilterValuesSelector

取得目前的快速篩選值。

簽名

gridQuickFilterValuesSelector: (apiRef: GridApiRef) => any[] | undefined
// or
gridQuickFilterValuesSelector: (state: GridState, instanceId?: number) => any[] | undefined

範例

gridQuickFilterValuesSelector(apiRef)
// or
gridQuickFilterValuesSelector(state, apiRef.current.instanceId)

關於選擇器以及如何使用它們的更多資訊，請參閱專門頁面