跳到主要內容
+

資料格 - 快速篩選

單一篩選欄位即可快速篩選格線。

快速篩選允許使用單一文字輸入框，依多個欄位篩選列。若要啟用此功能，您可以將 <GridToolbarQuickFilter /> 元件新增至自訂工具列，或將 showQuickFilter 傳遞至預設的 <GridToolbar />。

預設情況下，快速篩選會將輸入視為以空格分隔的值列表，並且僅保留包含所有值的列。

初始化快速篩選值

快速篩選值可以透過設定 initialState prop 的 filter.filterModel.quickFilterValues 屬性來初始化。

<DataGrid
  initialState={{
    filter: {
      filterModel: {
        items: [],
        quickFilterValues: ['Disney', 'Star'],
      },
    },
  }}
/>

包含隱藏欄位

預設情況下，快速篩選會排除隱藏欄位。

若要在快速篩選中包含隱藏欄位，請將 filterModel.quickFilterExcludeHiddenColumns 設定為 false

<DataGrid
  initialState={{
    filter: {
      filterModel: {
        items: [],
        quickFilterExcludeHiddenColumns: false,
      },
    },
  }}
/>

在以下示範中，company 欄位已隱藏。您只會看到 5 個結果，因為 company 值為 'Warner Bros.' 的列已被排除。但是，當您停用「排除隱藏欄位」開關時，即使欄位仍然隱藏，包含 company 欄位中 'Warner' 的列將會再次顯示。

自訂篩選邏輯

用於快速篩選的邏輯可以切換為篩選包含*至少*一個指定值的列，而不是測試是否包含所有值。若要執行此操作，請將 quickFilterLogicOperator 設定為 GridLogicOperator.Or，如下所示

initialState={{
  filter: {
    filterModel: {
      items: [],
      quickFilterLogicOperator: GridLogicOperator.Or,
    },
  },
}}

使用預設設定時，快速篩選僅會考慮類型為 'string'、'number' 和 'singleSelect' 的欄位。

  • 對於 'string' 和 'singleSelect' 欄位，儲存格的格式化值必須包含該值
  • 對於 'number' 欄位，儲存格的格式化值必須等於該值

若要修改或新增快速篩選運算子，請將屬性 getApplyQuickFilterFn 新增至欄位定義。此函式與 getApplyFilterFn 非常相似。此函式接收快速篩選的值作為輸入，並傳回另一個函式，該函式接收儲存格值作為輸入，如果滿足運算子條件，則傳回 true。

在以下範例中，為 date 欄位建立自訂篩選器，以檢查其是否包含正確的年份。

const getApplyQuickFilterFn: GetApplyQuickFilterFn<any, unknown> = (value) => {
  if (!value || value.length !== 4 || !/\d{4}/.test(value)) {
    // If the value is not a 4 digit string, it cannot be a year so applying this filter is useless
    return null;
  }
  return (cellValue) => {
    if (cellValue instanceof Date) {
      return cellValue.getFullYear() === Number(value);
    }
    return false;
  };
};

若要移除特定欄位的快速篩選，請設定 getApplyQuickFilterFn: undefined。

在以下示範中，「Name」欄位無法使用快速篩選搜尋，且 4 位數字將與「Created on」欄位的年份進行比較。

解析值

快速篩選使用的值是透過空格分割取得的。如果您想要實作更進階的邏輯，<GridToolbarQuickFilter/> 元件接受 quickFilterParser prop。此函式會接收來自搜尋文字欄位的字串，並傳回值陣列。

如果您透過控制 filterModel 或使用初始狀態來控制 quickFilterValues，則必須更新輸入的內容以反映新值。預設情況下，值會以空格連接。您可以透過提供 quickFilterFormatter 來自訂此行為。此格式化程式可以視為 quickFilterParser 的反向。

例如，以下解析器允許透過使用 ',' 分割值來搜尋包含空格的單字。

<GridToolbarQuickFilter
  quickFilterParser={(searchInput) =>
    searchInput.split(',').map((value) => value.trim())
  }
  quickFilterFormatter={(quickFilterValues) => quickFilterValues.join(', ')}
  debounceMs={200} // time before applying the new quick filter value
/>

在以下示範中，快速篩選值 "Saint Martin, Saint Lucia" 將傳回國家/地區為 Saint Martin 或 Saint Lucia 的列。

忽略變音符號 (重音符號)

在某些語言中，字母可能帶有變音符號 (重音符號) - 例如，法語中的字母 é。預設情況下，在篩選時，這些字母會被視為與其不帶重音符號的版本不同。

若要忽略變音符號，請將 ignoreDiacritics prop 設定為 true

<DataGrid ignoreDiacritics />

API