React-таблица: пользовательская фильтрация с response-select для множественного выбора - PullRequest
0 голосов
/ 27 сентября 2019

Я пытаюсь реализовать пользовательскую фильтрацию для моей таблицы реакции.Я сделал пользовательскую фильтрацию с <select>, но она работает только как одиночный выбор, и мне нужно иметь возможность выбора нескольких элементов (как в Excel).Для этого я использовал response-select, но я не уверен, как реализовать этот правильный путь.

Что мне нужно сделать:

  1. Создать доступные параметры для определенного столбца
  2. Стиль ввода
  3. Применение фильтров к таблице

Что я сделал?Я только жестко запрограммировал пример списка параметров, чтобы посмотреть, как он выглядит в таблице, и попытался применить любой фильтр.Не знаю, как это сделать прямо сейчас.

Вот как выглядит таблица - там странный ввод, и изменение ширины не приводит к тому, что выбранный элемент показывает там:

enter image description here

Хорошо, вот как я создаю столбцы:

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 жестко запрограммированы и ошибочны, но «Выбрать все» должно работать и показывать все, но когда я нажимаю на него, все исчезает.И что может быть не так, что этот вход выглядит так, и элементы не добавляются в него, как в этом примере:

enter image description here

Спасибо за ваше внимание!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...