search

VKCOM / VKUI

VKUI – это набор React-компонентов, с помощью которых можно создавать интерфейсы, внешне неотличимые от наших iOS и Android приложений.
https://vkcom.github.io/VKUI/
MIT License
1.03k stars 186 forks source link

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

Open inomdzhon opened 8 months ago

inomdzhon commented 8 months ago

Задача

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

Дизайн

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

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

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

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

Разработка

Требования

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

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

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

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

Анатомия

Доступность

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

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

Референсы

scffs commented 8 months ago

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

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

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

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

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

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

image

inomdzhon commented 8 months ago

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

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

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

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

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

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

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

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

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

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

image

👍🙏

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

dsedinkin commented 8 months ago

Рекомендую посмотреть уже уже реализованные таблички в VK Ads, может быть там что-то можно подчеркнуть. photo_2024-02-19_18-23-26 photo_2024-02-19_18-23-30 photo_2024-02-19_18-23-33 photo_2024-02-19_18-23-36 photo_2024-02-19_18-23-39

scffs commented 8 months ago

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

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

inomdzhon commented 8 months ago

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

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

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

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

scffs commented 8 months ago

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

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

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

dsedinkin commented 7 months ago

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