Question

因此，我正在处理的React项目中有此物料表，默认过滤选项只是在数据上方放置一行，您可以在其中键入所需的任何内容。我需要做的是在表格上方单击一个按钮，然后单击复选框以选择要过滤的内容。我想知道是否有一种方法可以通过修改材料表来实现，还是应该将复选框选项链接到可以再次获取数据并使用.filter过滤掉的函数？不过，对于每个复选框都需要很长的路要走，但是我还没有真正找到解决问题的方法。我只看到人们使用react-table来做到这一点。如有任何建议，我将不胜感激。 Here's a poor gimp drawing on how i want my filter box to look like

Answer 1

在阅读您的书时，我了解到您想创建自定义过滤器。因此，您可以基于rowData定义按钮和过滤器。我找到了example。希望对您有所帮助：

<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
    }}
  />

使用该示例，您可以覆盖所有过滤器，我想这就是您想要做的。您可以在列def中定义过滤器。之后，您可以自定义过滤器组件并获取道具数据以获取所需的东西。

在同一篇文章中，您有关于如何管理过滤器更改的更详细的示例：

  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} />,
  }

如何在反应物料表中创建自定义过滤器框？

1 个答案: