Ленивая загрузка (виртуализация) списка фильтрации 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}
            />
        </>
    );

Заранее благодарю всех за помощь.


Ответы (0 шт):