Реагировать на фильтрацию по таблице материалов

Question

Я пытаюсь реализовать собственный фильтр для таблицы материалов.

Данные таблицы:

[
  {
    name: "Tomato",
    color: "red",
    quantity: 12,
    id: "01"
  },
  {
    name: "Banana",
    color: "yellow",
    quantity: 5,
    id: "02"
  },
  {
    name: "Lemon",
    color: "yellow",
    quantity: 20,
    id: ""
  },
  {
    name: "Blueberry",
    color: "blue",
    quantity: 50,
    id: ""
  }
]

Столбцы:

[
  {
    title: "Name",
    field: "name",
    filterComponent: props => {
      return (
        <FormControlLabel
          control={<Checkbox color="primary" />}
          label="Custom filter"
          labelPlacement="end"
        />
      );
    }
  },
  { title: "Color", field: "color", filtering: false },
  { title: "Quantity", field: "quantity", filtering: false },
  { title: "Code", field: "code", filtering: false, hidden: true }
]

Ссылка на код песочница здесь

Фильтр флажков, который я пытаюсь реализовать, должен скрывать / отображать все строки, которые имеют свойство «id» пустой строки.

Answer 1

Чтобы реализовать настраиваемую фильтрацию, нам нужно изменить данные на нашей стороне. Для этого я внес следующие изменения:

Определить обработчик состояния для данных и состояния флажка

const [data, setData] = useState([...testData]);
const [checked, setChecked] = useState(false);

В control Я вызвал filterValue с текущее состояние действия (true or false) флажка.

<FormControlLabel
            control={<Checkbox checked={checked} color="primary" onChange={(e) => filterValue(e.target.checked) }/>}
            label="Custom filter"
            labelPlacement="end"
          />

Я фильтрую данные на основе указанного вами условия (id не должно быть пустым).

 const filterValue = (value) => {
    if(value) {
      const filtered = data.filter(d => d.id.trim().length > 0);
      setData(filtered) // set filter data if checkbox is checked
    } else {
      setData([...testData]) // else set original data i.e testData
    }
    setChecked(value)
 }

In MaterialTable Я заменил testData на data здесь.

 <MaterialTable
     columns={columns}
     data={data}
     options={{
       filtering: true
     }}
 />

рабочий пример https://codesandbox.io/s/unruffled-antonelli-gfqcg