Data table

数据表

这是一个使用ShadCN UI组件和Tanstack表构建的数据表。

• Tanstack-table
• shadcn-ui

该表是根据在ShadCN文档上找到的出色教程和示例构建的，并扩展了。

配置

该项目建立在React-Vite上，并使用打字稿。

• 安装React Vite并按照说明创建项目：

 $ npm create vite@latest

• 安装shadcn和tailwind：按照链接进行说明

• 然后单独安装每个ShadCN组件：

 $ npx shadcn-ui@latest add dropdown-menu
$ npx shadcn-ui@latest add button

数据

该表显示了虚构的员工名单。

数据只是项目本身数组中的假数据，而不是从真实数据库中获取的数据。

特征

这些是表的特征：

工具栏：

• 搜索字段：按名称动态搜索。
• 刻面过滤器：按列值过滤（位置，状态）；基于列值动态列出值。
  • 过滤标签以显示活动过滤器和清除过滤器- 按钮。
• 列可见性：选择可见哪些列的按钮。
• 重置：清除所有过滤器和选择。

桌子：

• 排序：选定的列可以排序升或下降。
• 行选择：第一列的复选框选择该行。
• 额外的操作下拉列表：每行都在行末尾显示额外的操作。只有第一个是功能性的，它将员工ID复制到剪贴板并显示吐司消息。
• 列重新排序：最后一行具有箭头向右或向左移动列的箭头。

页脚：

• 有关行的信息：显示选择了多少行。
• 每个页面按钮的动态行：使用可以增加或减少每页5的行。
• 分页按钮：向前，向后，最后一页或第一页。

列可见性：

---

刻度过滤器下拉列表：

---

过滤标签和清除按钮：

---

更多动作：

---

页脚：

结构 ？

该桌子由3个主要部分组成：

1. 获取数据并渲染表组件的页面组件。
2. 表组件。
3. 列变量包含单个列内容的结构和样式。

可重复使用的组件：

1. 分页是它的组件，可以重复使用其他表。
2. 刻面过滤器需要冗长的代码，并将其分为自己的组件。它可以用于其他表。
3. 很少的弹出吐司是其自己可重复使用的组件。

下一步？

➡️将表组件分为可重复使用的组件，然后将其分成较小的组件。

➡️引入上下文，以避免将表数据作为prop->易于处理数据操纵方法，因为它们可能在不同的组件中发生。

技术

• 反应量
• Shadcn UI
• Tanstack-table
• 反应图标
• 尾风
• 打字稿