CODEWITHSUNDEEP
javascriptreactjsmaterial-table
Astri
Astri

Reputation: 33

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

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

Upvotes: 2

Views: 11793

Answers (1)

Adrián Rodriguez
Adrián Rodriguez

Reputation: 440

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

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

Upvotes: 4

Related Questions