Фильтрация на стороне сервера React Table с фильтрами, отделенными от столбцов

Я пытаюсь реализовать фильтрацию на стороне сервера для своей таблицы с помощью React Table. Однако большинство документаций и статей, которые я читал в Интернете, реализуют фильтры на заголовках столбцов.

Моя схема приложения, однако, требует, чтобы фильтры были отдельным компонентом FilterComponent, который находится вне таблицы:

return (
    <>
      <FilterComponent columns={columns} />
        <TableContainer className={classes.container}>
          ...
        </TableContainer>
    </>
  );

FilterComponent Компонент

It's basically a list of Autocomplete components that allow users to pick columns and filter criteria. And users can use Add and Remove buttons to get more or fewer filters.

 return (
    <div>
      {inputList.map((x, i) => {
        return (
          <div className="box" key={i}>
            <Autocomplete ... />    // pick a column
            <Autocomplete ... />    // pick an operator ("=", ">", "<". etc.)
            <Autocomplete ... />    // pick a filter criteria
              
            <div className="btn-box">
              {inputList.length !== 1 && (
                <button className="mr10" onClick={() => handleRemoveClick(i)}>
                  Remove
                </button>
              )}
              {inputList.length - 1 === i && (
                <button onClick={handleAddClick}>Add</button>
              )}
            </div>
          </div>
        );
      })}
    </div>

Два вопроса

Я использую Django для бэкенда и настроил фильтры должным образом, так что вы можете просто передать некоторые параметры запроса в вызов AJAX, чтобы получить желаемый результат.

Настройки фильтров

В примере react-table, похоже, нам нужно определить "Filter" и "filter" для каждого столбца:

columns {
          {
            Header: 'Status',
            accessor: 'status',
            Filter: SelectColumnFilter,
            filter: 'includes',
          },
}

However, I cannot find the basis for string "includes". I guess it's something that react-table's built-in filter use to find exact match. But on Django, the language is more like "iexact", or "icontains", etc. Can I just pass in those Django words?

То же самое касается опции "Фильтр". Если я уже определил фильтры на Django, нужно ли мне снова реализовывать фильтры на стороне клиента?

Конструктор запросов находится за пределами таблицы

С учетом приведенного выше макета приложения, как заставить фильтры работать, если они отделены от колонок?

Вернуться на верх