Как реализовать фильтр в react-table?

Question

[sharkdest]

react-table

Здравствуйте, помогите, пожалуйста, реализовать фильтр такого типа:
Когда вписываешь букву - фильтр возвращает все результаты где присутствует эта буква.

Но мне нужно сделать так, что бы когда вписал букву и нажал Enter - метод фильтра поменялся и возвращал только те значения, которые содержат только эту букву.

Пример:
Значения(строки): test, rest, st
Когда я введу "st" - мне вернет все три строки, но когда нажму Enter - вернет только одну строку (st).

Сейчас у меня есть только первая стадия:

...
<ReactTable
  columns={columns}
  data={data}
  filterable
  defaultFilterMethod={(filter, row, column) => {
    const id = filter.pivotId || filter.id;
    return row[id] !== undefined
      ? String(row[id])
          .toLowerCase()
          .includes(filter.value.toLowerCase())
      : true;
  }}
/>
...

Надеюсь понятно обьяснил, спасибо.

Answer 1

[0xD34F]

Сделайте кастомный фильтр, с обработчиками onChange и onKeyPress, в которых и будет происходить переключение функции фильтрации. Например, так (поле lastName, посмотреть в деле можно вбивая короткие слова, которые являются частью более длинных - такие как war, son, comb, sign, child, work, can и т.п.).

UPD. Вынесено из комментариев:

у меня много столбцов, плюс к этому много таблиц, и логику фильтра нужно применить ко всему

Ну так сделайте компонент-обёртку для этой таблицы, который будет задавать дефолтный компонент фильтра и дефолтную же функцию фильтрации - их вы можете взять из моего примера.

UPD. https://codesandbox.io/s/nn1z53jn4l (только первые три поля, у последнего фильтр оставлен переопределённым).

Comments

[sharkdest]

Большое спасибо за ответ. Хорошая идея, только мне ее нужно реальзовать в другой способ, т к у меня много столбцов, плюс к этому много таблиц, и логику фильтра нужно применить ко всему. Как я понимаю, это нужно сделать в props, но как это сделать - я не понимаю :) Куда вставить onKeyPress - не могу понять. Не хватает мне знаний, подскажите, пожалуйста.

[0xD34F]

sharkdest, дополнил ответ.

[0xD34F]

sharkdest, дополнил ответ ещё раз.

[sharkdest]

Еще раз спасибо :)

[Viktor Bogutskii]

Поддерживаю, вариант с внешним компонентом с формой или другими контролами решает эту проблему так как встроенные фильтры решают не все задачи. Просто передавать в эту таблицу уже отфильтрованные данные.