Фильтрация на стороне сервера 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, нужно ли мне снова реализовывать фильтры на стороне клиента?
Конструктор запросов находится за пределами таблицы
С учетом приведенного выше макета приложения, как заставить фильтры работать, если они отделены от колонок?