Таблица данных
Это таблица данных, созданная с помощью компонентов пользовательского интерфейса Shadcn и таблицы Tanstack .
Таблица была построена после отличного учебника и примеров, найденных в документации Shadcn, и расширена.
Конфигурация
Проект построен на React-Vite и использует TypeScript .
- Установить React Vite и следуйте инструкциям Создайте проект:
$ npx shadcn-ui@latest add dropdown-menu
$ npx shadcn-ui@latest add button
Данные
В таблице показан вымышленный список сотрудников.
Данные - это просто фальшивые данные в массиве самого проекта, а не извлекаются из реальной базы данных.
Функции
Это особенности таблицы:
Панель инструментов:
- Поле поиска: динамический поиск по имени.
- Фасетированные фильтры: фильтрация по значениям столбца ( местоположение , статус ); Значения динамически перечислены на основе значений столбцов.
- Фильтруя теги , чтобы показать активные фильтры и очистить фильтры - кнопка.
- Видимость столбца: кнопка, чтобы выбрать, какие столбцы видны.
- Сброс: очищает все фильтры и выбор.
СТОЛ:
- Сортировка: Выбранные столбцы могут быть отсортированы по восходящим или нисходящим.
- Выбор строки: флажок первого столбца выбирает строку.
- Дополнительные действия выпадают: каждая строка отображает дополнительные действия в конце строки. Только первый в настоящее время функционален, и он копирует идентификатор сотрудника в буфер обмена и отображает тост-Message.
- Перезарядование столбца: последняя строка соруется стрелки, которые перемещают столбцы вправо или влево.
Нижний колонтитул:
- Информация о выбранных рядах : показывает, сколько строк было выбрано.
- Динамические строки на кнопку на странице : использование может увеличивать или уменьшать строки на страницу на шаги 5.
- Кнопки страниц : идти вперед, назад, на последнюю или первую страницу.
Видимость столбца: 
Выпадающий в грань-фильтр:
Фильтруя теги и кнопку прозрачной:
Больше действий:
Нижний колонтитул:
Структура?
Таблица состоит из 3 основных частей:
- Компонент страницы, который получает данные и отображает компонент таблицы.
- Табличный компонент.
- Колонны переменная, которая содержит структуру и стиль индивидуального содержания столбцов.
Многоразовые компоненты:
- Парень на компоненте находится на компоненте и может быть использована для других таблиц.
- Факетские фильтры требуют длительного кода, и он разделен на свой собственный компонент. Это может быть использовано повторно для других таблиц.
- Маленький всплывающий тост-это его собственный многоразовый компонент.
Следующие шаги?
➡ Аннотация компонент таблицы в многоразовый и разделите его на более мелкие компоненты.
➡ Введите контекст, чтобы избежать передачи данных таблицы как PROP -> Проще в обработке методов манипулирования данными, как они могут происходить в разных компонентах.
Технический
- Реагировать
- Shadcn UI
- Загарный стол
- Реагировать иконки
- Попутный ветер
- Машинопись
