javascript - How to create a custom filter box in a react material-table? - Stack Overflow

admin管理员组

文章数量:1401509

So I have this material-table in a react project I'm working on, the default filtering option just puts a row above your data where you can type whatever you want. What I need is to make a button above the table that I could click on, then click on the checkbox to choose what I want to filter out. I was wondering if there is a way you could do that by modifying what material-table gives you or should I just link the checkbox options to a function that would get the data again and filter them out with a .filter? it just seems like a long way around though, doing that for every checkbox, but I haven't really found the solution to my problem anywhere. I've only seen people doing that with react-table. I would be thankful for any suggestions. Here's a poor gimp drawing on how i want my filter box to look like

So I have this material-table in a react project I'm working on, the default filtering option just puts a row above your data where you can type whatever you want. What I need is to make a button above the table that I could click on, then click on the checkbox to choose what I want to filter out. I was wondering if there is a way you could do that by modifying what material-table gives you or should I just link the checkbox options to a function that would get the data again and filter them out with a .filter? it just seems like a long way around though, doing that for every checkbox, but I haven't really found the solution to my problem anywhere. I've only seen people doing that with react-table. I would be thankful for any suggestions. Here's a poor gimp drawing on how i want my filter box to look like

• javascript
• reactjs
• material-table

Share Improve this question Follow asked Jun 6, 2020 at 17:59 AstriAstri 3311 gold badge11 silver badge44 bronze badges 1

• I think You have to create your own UI and handle it yourself, instead of depending on default filtering, In your custom handlers, you have to update the data props. I am also doing the same stuff in one of my projects but in my case, I am using Material-Ui table, which is the underlying ponent used by material-table – Harsh kurra Commented Jun 8, 2020 at 12:36

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Reading you I understand that you want to crete custom filter. So you could define your button and filter based on rowData. I've found an example. I hope it helps:

<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}
    ponents={{
      FilterRow: props => <FilterRow {...props} /> <---- your modified filter row ponent
    }}
  />

Using the example you can override all the filters and I think that is what you want to do. You can define your filters in column def. After that make you custom filter ponent and get props data to get what you want.

Inside the same post you have more detailed examples about how to manage changes on filters:

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

And if you want to override only in one column:

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

本文标签： javascriptHow to create a custom filter box in a react materialtableStack Overflow