Блог

В настоящее время я пытаюсь создать компонент фильтра в стиле Airtable. Мне интересно, можно ли использовать useGlobalFilter хук, чтобы выбрать, по каким столбцам программно фильтровать таблицу. Например, Airtable реализует фильтрацию таблиц с использованием компонента, который находится за пределами границ данной таблицы. Внутри этого компонента есть выпадающее меню, чтобы выбрать, к какому столбцу применить filterValue , и выпадающее меню, чтобы выбрать filterType для данного столбца. Судя по документации react-table, это useGlobalFilter используется для создания компонентов фильтрации, которые существуют вне таблицы. Однако, основываясь на примере code sandbox документации, для фильтрации также представляется, что useGlobalFilter значение фильтра применяется ко всем столбцам, а не к конкретным столбцам.

Мой вопрос заключается в том, можно ли использовать useGlobalFilter возможность создания пользовательского интерфейса фильтрации вне таблицы и иметь возможность выбирать, к каким столбцам применять filterValue amp; filterType , все из глобального фильтра?

Если это возможно, кто-нибудь захочет предоставить советы по реализации? Пожалуйста, дайте мне знать, подходит ли эта задача для useFilter или другой части API react-table.

Я предоставил скриншот компонента фильтра Airtable в качестве примера того, что я хотел бы создать. Любые отзывы или советы будут высоко оценены!

 `const columns = React.useMemo(
    () => [

        {
            Header: 'Group Name',
            accessor: 'name',
            // disableGlobalFilter: true
        },

        {
            Header: 'Created',
            accessor: 'sector',
            disableGlobalFilter: true,
        },
        
    ],
    []
)`
  

Добавьте это в массив столбцов внутри столбца, в котором вы хотите отключить глобальный фильтр