Задача

Создать React-компоненты, реализующие таблицы.

Дизайн

@Zaycevq проработает дизайн.

Необходимо продумать у ячеек состояния:

• hovered – наведение на ячейку
• active – нажатие на ячейку

Отдельно про состояния:

• highlight – например, каждая нечетная строка красится в одинаковый цвет фона (см. Функционал из под коробки -> п.4);
• selected – при (см. Функционал сверху (пользовательский) -> п.4).

В дизайне возможно это будут одинаковые цвета, но тут пока выделю в два отдельных, т.к. нужны для двух отдельных задач.

Разработка

Требования

Функционал из под коробки

1. Возможность делать стики колонки и/или строки (#дизайн).
2. Свойство ellipsis – если текст в ячейке не умещается по ширине, то он обрезается, добавляется три точки и при наведении выводится весь текст (#дизайн – учесть кейс, что текст может уходить многоточие; кастомной всплывашки при наведении пока не надо, в разработке будет использовать браузерную всплывашку).
3. Возможность контролировать ширину ячеек.
4. Выделение строк, ячеек таблицы (#дизайн – цвет выделения, предлагаю параметр highlight).
5. ❓ Динамическая высота строк

Функционал сверху (пользовательский)

1. Возможность интегрировать библиотеку реализующая Virtual Scroll (например, Virtuoso).
2. Пагинация – настройка количества отображаемых строк на странице, переключение на конкретную страницу, назад/вперед (#дизайн – иметь ввиду, что пользователь может такую фичу запилить).
3. Возможность ограничения количества строк в ячейке. Добавляется строка с текстом, например, "Еще 3" - при нажатии раскрывается всё содержимое (#дизайн – иметь ввиду).
4. Возможность выбора строк с помощью колонки чекбоксов или радио кнопок (#дизайн – цвет выбора ячейки, предлагаю параметр selected)
5. Возможность отображения древовидной структуры. Скрытие/отображение вложенных строк (#дизайн – иметь ввиду).
6. ❓Возможность редактирования ячеек
7. ❓Возможность добавить resize-колонок
8. ❓Возможность реализовать Drag and Drop строк

Анатомия

• Table – тег <table>.
• TableHead – тег <thead>.
• TableBody – тег <tbody>.
• TableFooter – тег <tfoot>.
• TableRow – тег <tr>.
• TableCell – под теги <td> и <tr>.

Доступность

Т.к. будут использоваться нативные DOM-элементы, то проблем с доступностью быть недолжно.

Но есть вероятность, что пользователю понадобиться перебивать компоненты через параметр Component (ex, Component="div"). На этот случай нужно добавить console.warn с предупреждениями каких атрибутов не хватает (см. Документация от в W3C по таблицам).

Референсы

• TanStack
• MUI Table