React.js
April 27, 2021

Выбор React таблицы для библиотеки компонентов

Мы делаем библиотеку общих react компонентов. Здесь кусочек исследования того, какие библиотеки для работы с таблицами есть и на что стоит опереться при создании компонента таблицы, которые затем предстоит кастомизировать под себя

Наши требования к таблицам

  • Возможность кастомизации [css]
  • Возможность расширения [JS]
  • Удобное API
  • Хорошее покрытие тестами
  • Документация
  • Минимум сторонних зависимостей
  • Возможность разделения кода

Требования к таблицам от наших пользователей

  • Перетягивание строк
  • Перетягивание столбцов
  • Изменение ширины (вручную, автоматически под контент, кодом, drag and drop)
  • Сортировка (опциональная, или внешняя)
  • Группировка и сворачивание групп (ака "вложенных строк")
  • Скрытие столбцов
  • Оптимизация перерисовок
  • Кастомные рендереры для ячеек и заголовков
  • Кастомные стили
  • Виртуализация
  • Пагинация
  • Фиксация шапки
  • Фиксация колонок
  • Фиксация строк
  • Объединение ячеек
  • Раскрываемые строки

Поиск

Reference

Список того, что нашли и рассматривали:


Сразу не подошли

  • griddle – давно не обновляется
  • react-final-table – хороший подход, но пока сыро
  • reactabular – фреймворк, чтобы свои Гугл Таблицы делать
  • react-data-grid – тяжеленный монолит
Расширофка пинтограм

Соответствие нашим требованиям

Соответствие базовым требования

Возможность реализовать то, что нужно пользователям


Итого

Исходя из того, что нам нужно не просто взять компонент, а взять библиотеку, которую сможем использовать под свои нужды, добавлять туда темизацию (токены) и вообще чтобы он органично смотрелся и функционировал внутри нашей библиотеки компонентов, то лучшее решение это react-table.

Это библиотека поставляет набор хуков, которые можно использовать в своем приложении.


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

По идеи делаем обертку, которые сможем принимать пропсы для react-table и так же наши параметры.
Будет базовая таблица, которая просто использует useTable для отрисовки.
И bundle таблица, которая умеет делать всё, что пожелают пользователи.