Как создать сложную таблицу, которая содержит много данных и поддерживает расширение строк и фиксированных столбцов с использованием реагировать виртуализации?

Question

Я создаю таблицу, похожую на excel, используя реакцию. И есть некоторые важные функции.

1. Поддержка функции обновления для ячеек, включая ячейки дочерней строки.
2. Если данные заголовка строки могут представлять все данные своих детей и себя, эта ячейка будет быть объединенным в одну ячейку и отображаться в одной ячейке.
3. Поддержка функции расширения строки :: Когда пользователь щелкает строку, он разворачивается и показывает данные своих детей, которые имеют те же столбцы с родителем. (Как и каждая строка представляет некоторую агрегацию данных, и при щелчке по строке пользователь может видеть субданные.
4. Должен гарантировать надлежащую производительность для более чем 30000 строк с 100 столбцами, включая изображения.
5. Следует поддержка фильтра, сортировка, поиск и скрытие столбцов.
6. Должны предоставлять данные на одной странице (это означает, что необходимо использовать бесконечный скроллинг, а не разбиение на страницы)
7. Должен иметь липкий заголовок таблицы
8. Если пользователь может зафиксировать некоторые столбцы слева, чтобы обеспечить более простой способ просмотра данных с горизонтальной прокруткой.

У меня получилось 1,2,3,4,5,6 , 7 (большинство из них) с помощью реакции-виртуализации. Но это становится проблемой, когда речь идет о столбце «8-Fixing». Я проверил inte rnet и обнаружил, что реакция-виртуализация является единственным способом его архивирования.

Basi c Идея этого довольно проста. Я использую List для рендеринга каждой строки с помощью пользовательской прокрутки (Виртуализация), AutoSizer и CellMeasurer(Cache) для реализации динамических c строк высоты (Расширяющиеся строки). И минимум кодов для реализация TableHeader и обновление ячеек, сортировка, фильтрация функций.

Но это стало проблемой, когда мне нужно реализовать column fix. react-virtualized кажется, что он не позволяет настраивать его функции (кажется, действительно c для их функций.)

Сначала я подумал создать две таблицы и расположить их горизонтально, чтобы левая таблица действовала как фиксированный столбец. Правую таблицу можно прокручивать по горизонтали, разделяя CellMeasurerCache для строки с динамической высотой c. Но я нашел эту статью https://stackoverflow.com/questions/45682063/react-virtualized-share-cellmeasurercache-for-multiple-grids, в которой говорится, что CellMeasurerCache недоступен для совместного использования более чем одним списком.

Также я посчитал, что с использованием других компонентов react-virtualized поддерживается. Но есть плюсы и минусы для каждого компонента, и мне нужно отказаться от одного из вышеуказанных требований.

Можете ли вы дать мне идею для реализации всех вышеуказанных требований?

Я хочу поделиться своим кодом но он довольно большой (около 1000 строк для одной таблицы - абстрактная таблица, которая не жестко запрограммирована для одной цели). Если вы хотите увидеть, я все равно отправлю вас.

Но я могу предоставить разметка basi c HTML - то есть 8 не реализована. и доказал свою пригодность для использования, несмотря на некоторые ошибки и ошибки.

Это не реально HTML, некоторые из разметок я опускаю. (Все данные не рассчитываются в таблице, все они выбираются с других серверов.)

<div class="table">
    <!--Head part-->
    <div class="headers">
        <div class="header" style="display: sticky; top: 0">
            <div class="upper">Name</div>
            <div class="bottom">
                <button class="sort" style="background-image: url(sort_asc.png)"></button>
                <button class="filter" style="background-image: url(btn_filter.png)"></button>
            </div>
        </div>
        <div class="header" style="display: sticky; top: 0">
            <div class="upper">Price</div>
            <div class="bottom">
                <button class="sort" style="background-image: url(sort_asc.png)"></button>
                <button class="filter" style="background-image: url(btn_filter.png)"></button>
            </div>
        </div>
        <div class="header" style="display: sticky; top: 0">
            <div class="upper">Gross</div>
            <div class="bottom">
                <button class="sort" style="background-image: url(sort_asc.png)"></button>
                <button class="filter" style="background-image: url(btn_filter.png)"></button>
            </div>
        </div>
    </div>
    <!--Content part-->
    <div class="row"/>  <!-- This is expanded row -->
        <div class="column" style="display:flex;flex-direction:column; height:120px;"/>
            <div class="headCell" style="height:120px">ChicagoCompany</div> <!-- This is merged cell -->
        <div>
        <div class="column" style="display:flex;flex-direction:column; height:120px;"/> 
            <div class="headCell" style="height:40px">215</div> <!-- Display average value of child -->
            <div class="cell" style="height:40px">230</div>
            <div class="cell" style="height:40px">200</div>
        <div>
        <div class="column" style="display:flex;flex-direction:column; height:120px;"/> 
            <div class="headCell"style="height:120px">440</div> <!-- This is merged cell -->
        <div>
    </div>
    <div class="row"/>  <!-- This is not expanded row -->
        <div class="column" style="display:flex;flex-direction:columnheight:40px"/>
            <div class="headCell"style="height:40px">Seattle Corp</div> <!-- This is merged cell -->
        <div>
        <div class="column" style="display:flex;flex-direction:columnheight:40px"/> 
            <div class="headCell"style="height:40px">130</div> <!-- Display average value of child -->
        <div>
        <div class="column" style="display:flex;flex-direction:columnheight:40px"/> 
            <div class="headCell"style="height:40px">440</div> <!-- This is merged cell -->
        <div>
    </div>
</div>

То, что я рассмотрел выше при добавлении двух таблиц по горизонтали, похоже на приведенное выше <div class="tableSet"><div class="fixedTable">...</div><div class="flexibleTable">...</div></div> (Соедините две "таблицы" вместе по горизонтали)

Я пытался установить липкость для всех классов <<code>column>, но это не сработало, как я ожидал. (Это не свойства того же уровня, как вы знаете.)

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

Есть ли способ обойти ограничение и выполнить все требования? Или есть какая-нибудь библиотека или компонент или way для достижения своей цели, даже если ее нужно пересобрать с нуля?

Да. Похоже, что я хочу в Excel на веб-странице.