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
• 反應圖標
• 尾風
• 打字稿