[Draft][Feature]: компоненты таблиц

[inomdzhon]

Задача

Создать 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

[scffs]

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

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

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

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

Состояния же можно будет убрать, если они не нужны?

Еще хотелось бы возможность нормального добавление иконок к заголовкам колонки (before/after) и может быть
дать возможность показывать их только при наведении на элемент

[inomdzhon]

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

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

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

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

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

• selected – при (см. Функционал сверху (пользовательский) -> п.4).

Состояния же можно будет убрать, если они не нужны?

Хороший комментарий, думаю по умолчанию состояния будут выключены, кому надо, тот включит.

Еще хотелось бы возможность нормального добавление иконок к заголовкам колонки (before/after) и может быть

дать возможность показывать их только при наведении на элемент

👍🙏

А под показывать при наведении ты что имеешь ввиду: показ самой иконки или содержимого, которое будет вызывать иконка?

[dsedinkin]

Рекомендую посмотреть уже уже реализованные таблички в VK Ads, может быть там что-то можно подчеркнуть.

[scffs]

А под показывать при наведении ты что имеешь ввиду: показ самой иконки или содержимого, которое будет вызывать иконка?

Показ самой иконки

[inomdzhon]

А под показывать при наведении ты что имеешь ввиду: показ самой иконки или содержимого, которое будет вызывать иконка?

Показ самой иконки

Такое поведение, думаю, можно будет накрутить сверху. Показ интерактивной кнопки только при наведении не совсем хорошая практика, если говорить про UX.

А у тебя какой кейс когда нужно так делать?

[scffs]

А у тебя какой кейс когда нужно так делать?

В MUI увидел, что есть таблицы, которые так работают, а ты их указал как реф, вот и вкинул

В целом не то чтобы киллер фича и можно не засорять код

[dsedinkin]

Еще референс: https://mui.com/material-ui/react-table/