如何在反應材料表中創建自定義過濾器框？

Question

所以我在我正在處理的一個反應項目中有這個材料表，默認過濾選項只是在你的數據上方放置一行，你可以在其中輸入任何你想要的東西。 我需要的是在表格上方制作一個可以單擊的按鈕，然后單擊復選框以選擇要過濾掉的內容。 我想知道是否有一種方法可以通過修改材料表給您的內容來做到這一點，或者我應該將復選框選項鏈接到 function 以再次獲取數據並使用 a.filter 過濾掉它們？ 不過，這似乎還有很長的路要走，對每個復選框都這樣做，但我還沒有真正找到解決我問題的任何地方。 我只見過有人用 react-table 來做這件事。 如果有任何建議，我將不勝感激。 這是一個關於我希望我的過濾器框看起來如何的可憐的 gimp 繪圖

Answer 1

閱讀您我了解您想要創建自定義過濾器。 因此，您可以根據 rowData 定義按鈕和過濾器。 我找到了一個例子。 我希望它有幫助：

<MaterialTable
    columns={[
      {
        title: "Adı",
        field: "name"
      },
      { title: "Soyadı", field: "surname" },
      { title: "Doğum Yılı", field: "birthYear", type: "numeric" },
      {
        title: "Doğum Yeri",
        field: "birthCity",
        lookup: { 34: "İstanbul", 63: "Şanlıurfa" }
      }
    ]}
    data={[
      { name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 }
    ]}
    options={{
      filtering: true
    }}
    title="Demo Title"
    icons={tableIcons}
    components={{
      FilterRow: props => <FilterRow {...props} /> <---- your modified filter row component
    }}
  />

使用該示例，您可以覆蓋所有過濾器，我認為這就是您想要做的。 您可以在列定義中定義您的過濾器。 之后讓您自定義過濾器組件並獲取道具數據以獲得您想要的。

在同一篇文章中，您有更多關於如何管理過濾器更改的詳細示例：

  const CustomDatePicker = (props) => {
  const [date, setDate] = useState(null);

  return (
    <DatePicker
      label="Select Date"
      inputVariant="outlined"
      variant="inline"
      format="dd/MM/yyyy"
      value={date}
      ampm
      autoOk
      allowKeyboardControl
      style={{ minWidth: 175 }}
      onChange={(event) => {
        setDate(event);
        props.onFilterChanged(props.columnDef.tableData.id, event);
      }}
      InputProps={{
        endAdornment: (
          <InputAdornment position="end">
            <IconButton>
              <EventIcon />
            </IconButton>
          </InputAdornment>
        ),
      }}
    />
  );
};

如果您只想在一列中覆蓋：

{
    title: "Created Date",
    field: "order_created_date",
    searchable: false,
    grouping: false,
    sorting: true,
    type: "datetime",
    filterComponent: (props) => <CustomDatePicker {...props} />,
  }