Фильтрация таблицы по поисковому слову

У меня простая таблица:

<Table bordered striped>
  <thead>
    <tr>
      <th>Account</th>
      <th>Status</th>
      <th>Date</th>
      <th>Requested By</th>
      <th>Approved By</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    {accountList?.map((account, index) => (
      <tr>
        <td>{account.name}</td>
        <td>{account.status}</td>
        <td>
          {account.confirmDate == null
            ? ""
            : moment(account.confirmDate).format("DD-MM-YYYY")}
        </td>
        <td>{account.requestedBy}</td>
        <td>{account.approvedBy}</td>
        <td style={{ width: 90 }} className={"text-center"}>
          <FontAwesomeIcon
            icon={faList}
            onClick={() => showAccountModal(account)}
          />{" "}
          {/* <FontAwesomeIcon                
      icon={faCreditCard}
      onClick={()=>showBankModal(account)}
    /> */}
        </td>
      </tr>
    ))}
  </tbody>
</Table>

И тогда у меня есть поле для поиска по свободному тексту. Я хочу отфильтровать все аккаунты, в названии которых есть поисковое слово. Я мог бы довольно легко просто перехватить / переменные с полным результатом в одной переменной и отфильтрованным в другой, а затем переключаться между ними. Но есть ли в REACT что-то умнее? Какой-то фильтрующий патрубок типа Angular? Я хочу делать всю фильтрацию на стороне клиента.


reactjs
person Thomas Segato    schedule 07.09.2020    source источник
comment
Вы имеете в виду что-то вроде array :: filter < / а>? Отфильтровать источник данных затем сопоставить с JSX? Что ты пробовал? Что не работает? Есть ошибка?   -  person Drew Reese    schedule 07.09.2020
comment
Нет ошибки. Ищем правильный подход. Вам просто нужно было бы использовать переменные, одну со всеми данными, а другую с отфильтрованными данными, и набор тех, которые зависят от того, пусто ли поле поиска?   -  person Thomas Segato    schedule 07.09.2020
comment
Нет, вы можете фильтровать данные в режиме реального времени, сохраняя только состояние дополнительного значения фильтра.   -  person Drew Reese    schedule 07.09.2020

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете использовать array::filter и фильтровать свое состояние прямо в логике рендеринга.

({ name }) => !nameFilter || name.includes(nameFilter)

Возвращает истину, если nameFilter является ложным ('', null, undefined, 0) и сокращает логическое выражение, и поэтому вернет все элементы, иначе продолжит вычисление выражения и процесс name.includes(nameFilter).

Обновленный код

accountList?.filter(
  ({ name }) => !nameFilter || name.includes(nameFilter),
).map((account, index) => (...
person Drew Reese    schedule 07.09.2020

arrow_upward
0
arrow_downward

Если вы ищете готовое решение, используйте https://react-table.tanstack.com/docs/examples/filtering.

Но ваш подход довольно прост: хранить необработанные данные (массив) как источник истины, хранить отфильтрованные массивы в локальном состоянии. Добавьте обработчик onChange, чтобы ввести что-то вроде этого setFilteredData(raw.filter(el => el.name.includes(name)))

person Viktor Bogutskii    schedule 07.09.2020