Я пытаюсь реализовать пользовательскую фильтрацию для моей таблицы реакции.Я сделал пользовательскую фильтрацию с <select>
, но она работает только как одиночный выбор, и мне нужно иметь возможность выбора нескольких элементов (как в Excel).Для этого я использовал response-select, но я не уверен, как реализовать этот правильный путь.
Что мне нужно сделать:
- Создать доступные параметры для определенного столбца
- Стиль ввода
- Применение фильтров к таблице
Что я сделал?Я только жестко запрограммировал пример списка параметров, чтобы посмотреть, как он выглядит в таблице, и попытался применить любой фильтр.Не знаю, как это сделать прямо сейчас.
Вот как выглядит таблица - там странный ввод, и изменение ширины не приводит к тому, что выбранный элемент показывает там:
Хорошо, вот как я создаю столбцы:
const gridColumn: ReactTableColumn = {
accessor: column.key,
Header: Transl.get(column.name),
Filter: ({ filter, onChange }) =>
this.customFilter({ fieldName: column.key, filter, onChange })
};
filteredColumns.push(gridColumn);
И метод customFilter, который еще не сделан (я не уверен, как это сделать):
customFilter = ({ fieldName, filter, onChange }) => {
const options = [
{value: '', label: 'Show All'},
{value: 'rock', label: 'Rock'},
{value: 'jazz', label: 'Jazz'},
{value: 'orchestra', label: 'Orchestra'}
];
return (
<Select options={options}
isMulti={true}
onChange={onChange}
></Select>
);
}
Может быть, некоторые знают, как применять фильтры в таблице?Я знаю, что опции из select жестко запрограммированы и ошибочны, но «Выбрать все» должно работать и показывать все, но когда я нажимаю на него, все исчезает.И что может быть не так, что этот вход выглядит так, и элементы не добавляются в него, как в этом примере:
Спасибо за ваше внимание!