JavaScript таблицы летают и не летают, а хочется чтобы летали!

Статья — приглашение для Front и Back разработчиков.

Всем чистого разума и процветания!

Часто для многих разработчиков, задача быстрой визуализации и обработки таблиц с большим количеством данных на Front становилась мучительным поиском достойных библиотек, а если находили, то со временем разочаровывались.

К вашей оценке — PHP + JavaScript фреймворк решающий такие задачи как : кэширование таблиц в IndexedDB (избавляет от повторных загрузок с сервера MYSQL), моментальная сортировка и поиск данных, моментальное нахождение требуемого row скролом, абсолютное отсутствие тормоза скрола, возврат на прежнюю позицию в таблице при выходе или перезагрузке навигатора (при этом с сервера данные уже запрашиваться не будут)

P.s. Если вы находите все это — достойным, то пожалуйста обращайтесь к автору статьи.

И так что имеем:

1) Front обращается к серверу только в случаях передачи измененных или новых данных а также получения новых данных от сервера.

2) Быстрая отработка сложных многострочных таблиц учетных данных без нагрузки на процессы рендеринга таблицы (без flow rendering, не ругается о превышении времени на процесс)

3) Lighthouse Performance = 100%, кабинет запускается не более 250 ms.

4) Независимо от количества строк в таблицах среднее время визуализации блока из 10 колонок x 18 строк (180 DOM элементов) =~ 3.1ms или =~300 FPS (показатели на устройстве CPU 2core 3.6 GHz, GPU 2048MB DDR3 700MHz при том что данные в каждый блок подтягиваются на лету), нет ни какой предсобранной таблицы, блоки таблицы собираются на лету, так что это экономит память браузера и дает шанс GС (garbage collection) хорошо справляться со своим задачами. Время визуализации (180 DOM элементов) при прокрутке колесом или в режиме animate scroll ~3.7ms. Разные режимы прокрутки начиная с 1 строки.

5) Custom scroll (тесть встроенный scroll не используется), абсолютно без притормаживания при объеме данных таблицы в 500 000 строк.

6) Custom listbox — не имеет ограничений полей для select.

7) Постраничный клик UP или Down

8) и мн. другого полезного.

Пример работы можно посмотреть здесь: https://youtu.be/7Yci-GaphYE

И вот все это — управляется конфигурационным кодом на PHP (с учетом что архитектура MYSQL уже создана)

Далее если нет нюансов для сохранения новой строки или загрузки CSV... писать более ничего не нужно, JavaScript знает что делать с данными и как рисовать таблицы, а PHP знает что, как и куда сохранять.