Выбор React таблицы для библиотеки компонентов
Мы делаем библиотеку общих react компонентов. Здесь кусочек исследования того, какие библиотеки для работы с таблицами есть и на что стоит опереться при создании компонента таблицы, которые затем предстоит кастомизировать под себя
Наши требования к таблицам
- Возможность кастомизации [css]
- Возможность расширения [JS]
- Удобное API
- Хорошее покрытие тестами
- Документация
- Минимум сторонних зависимостей
- Возможность разделения кода
Требования к таблицам от наших пользователей
- Перетягивание строк
- Перетягивание столбцов
- Изменение ширины (вручную, автоматически под контент, кодом, drag and drop)
- Сортировка (опциональная, или внешняя)
- Группировка и сворачивание групп (ака "вложенных строк")
- Скрытие столбцов
- Оптимизация перерисовок
- Кастомные рендереры для ячеек и заголовков
- Кастомные стили
- Виртуализация
- Пагинация
- Фиксация шапки
- Фиксация колонок
- Фиксация строк
- Объединение ячеек
- Раскрываемые строки
Поиск
Reference
- поиск по npm
- поиск по github
- google поиск
- https://blog.logrocket.com/complete-guide-building-smart-data-table-react/
Список того, что нашли и рассматривали:
- https://github.com/adazzle/react-data-grid
- https://reactabular.js.org
- https://github.com/Buuntu/react-final-table
- https://github.com/GriddleGriddle/Griddle
- http://schrodinger.github.io/fixed-data-table-2/
- https://www.material-ui-datatables.com/
- https://material-table.com/
- https://table-react-component.vercel.app/
- https://react-table.tanstack.com/
Сразу не подошли
- griddle – давно не обновляется
- react-final-table – хороший подход, но пока сыро
- reactabular – фреймворк, чтобы свои Гугл Таблицы делать
- react-data-grid – тяжеленный монолит
Соответствие нашим требованиям
Возможность реализовать то, что нужно пользователям
Итого
Исходя из того, что нам нужно не просто взять компонент, а взять библиотеку, которую сможем использовать под свои нужды, добавлять туда темизацию (токены) и вообще чтобы он органично смотрелся и функционировал внутри нашей библиотеки компонентов, то лучшее решение это react-table.
Это библиотека поставляет набор хуков, которые можно использовать в своем приложении.
Touch-устройства: react-table не имеет ui, там поддержаны тачевые события и мы сможем добавить то, что посчитаем нужным.
Есть много примеров документация и легкая возможность добавить свой хук.
По идеи делаем обертку, которые сможем принимать пропсы для react-table и так же наши параметры.
Будет базовая таблица, которая просто использует useTable для отрисовки.
И bundle таблица, которая умеет делать всё, что пожелают пользователи.