Ленивая загрузка (виртуализация) списка фильтрации React JS Ant Design
Ребят, всех приветствую.
Сейчас работаю с таблицами с огромным кол-вом данных. Разрабатявая фильтрацию, возникла проблема, что сама таблица грузится быстро, а при раскрытии списка фильтрации (Ant Design) всё повисает намертво. Частично проблему решил тем, что сами списки фильтрации формируются по каждой колонке, при раскрытии у неё списка фильтров.
Списки теперь формируются по каждой колонке, но проблема по прежнему актуальна, так как даже в одной колонке много элементов. Как я понял (могу ошибаться), при раскрытии списков фильтрации, DOM пытается отрисовать все элементы списка. Как можно сделать ленивую подгрузку или виртуальный список в коде? Читал много статей по подобным библиотекам (virtuoso, rc-virtual-list, react-window, даже Lasy() ), но реализовать не получается. Кто ранее сталкивался с подобным и кто знает самые производительные пути решения данной проблемы подскажите, пожалуйста, как быть?
В Ant Design список фильтрации (filters) собирается функцией и возвращается объект с двумя значениями:
const [columnsNew, setColumnsNew] = useState(columns);
const [filteredDataSource, setFilteredDataSource] = useState(dataSource);
const setFilterForKey1 = (data: DataType[], key: string) => {
return [
...new Set(data.map((record) => record[key])),
].map((value) => ({
text: value,
value,
}));
};
const handleFilter = (columnKey: any) => {
const newColumns = columnsNew.map((column) => {
if (column.key === columnKey) {
return {
...column,
filters: setFilterForKey1(dataSource, columnKey),
onFilter: (value: any, record: any) => {
return record[columnKey] === value;
},
};
}
return column;
});
setColumnsNew(newColumns);
};
return (
<>
<Table
columns={columnsNew.map((column, index) => ({
...column,
onFilterDropdownOpenChange: (a) => {
a && handleFilter(column.key);
},
}))}
dataSource={data}
/>
</>
);
Заранее благодарю всех за помощь.