From 57f98e7bb18ee5a102d32353659cd6e089cd197f Mon Sep 17 00:00:00 2001
From: Hooray <304327508@qq.com>
Date: Mon, 8 Jun 2026 15:00:38 +0800
Subject: [PATCH] =?UTF-8?q?feat(table):=20=E6=96=B0=E5=A2=9E=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E7=BB=84=E4=BB=B6=E5=8F=8A=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/types/components.d.ts                 |    6 +
 .../core-antdv-next/src/types/components.d.ts |    6 +
 .../src/types/components.d.ts                 |    6 +
 apps/core-naive-ui/src/types/components.d.ts  |    6 +
 apps/core-tdesign/src/types/components.d.ts   |    6 +
 apps/core-vexip-ui/src/types/components.d.ts  |    6 +
 apps/core/src/types/components.d.ts           |    6 +
 .../src/router/modules/component.example.ts   |    8 +
 apps/example/src/types/components.d.ts        |    6 +
 .../src/views/component_example/table.vue     |   17 +
 packages/components/package.json              |    1 +
 packages/components/resolver.ts               |    3 +
 .../src/basic/checkbox-group/index.vue        |   10 +-
 .../components/src/basic/dropdown/index.vue   |   21 +-
 .../src/basic/radio-group/index.vue           |   12 +-
 packages/components/src/basic/table/README.md |  106 ++
 .../src/basic/table/_examples/_basic.vue      |   41 +
 .../src/basic/table/_examples/_border.vue     |   46 +
 .../table/_examples/_column-visibility.vue    |   47 +
 .../basic/table/_examples/_custom-column.vue  |   54 +
 .../basic/table/_examples/_fixed-column.vue   |  109 ++
 .../basic/table/_examples/_fixed-height.vue   |   58 +
 .../table/_examples/_multiple-selection.vue   |   72 ++
 .../table/_examples/_single-selection.vue     |   71 ++
 .../src/basic/table/_examples/_slot.vue       |  105 ++
 .../src/basic/table/_examples/_sorting.vue    |  116 ++
 .../src/basic/table/_examples/_stripe.vue     |   53 +
 .../src/basic/table/_examples/_toolbar.vue    |   57 +
 .../src/basic/table/_examples/_tree.vue       |   72 ++
 .../src/basic/table/_examples/index.ts        |   94 ++
 packages/components/src/basic/table/index.vue | 1135 +++++++++++++++++
 .../src/basic/table/table/Table.vue           |   16 +
 .../src/basic/table/table/TableBody.vue       |   17 +
 .../src/basic/table/table/TableCaption.vue    |   17 +
 .../src/basic/table/table/TableCell.vue       |   22 +
 .../src/basic/table/table/TableEmpty.vue      |   34 +
 .../src/basic/table/table/TableFooter.vue     |   17 +
 .../src/basic/table/table/TableHead.vue       |   17 +
 .../src/basic/table/table/TableHeader.vue     |   17 +
 .../src/basic/table/table/TableRow.vue        |   17 +
 .../components/src/basic/table/table/index.ts |    9 +
 .../components/src/basic/table/table/utils.ts |    9 +
 packages/components/src/examples.ts           |    1 +
 packages/components/src/index.ts              |    2 +
 pnpm-lock.yaml                                |   26 +
 pnpm-workspace.yaml                           |    1 +
 46 files changed, 2570 insertions(+), 8 deletions(-)
 create mode 100644 apps/example/src/views/component_example/table.vue
 create mode 100644 packages/components/src/basic/table/README.md
 create mode 100644 packages/components/src/basic/table/_examples/_basic.vue
 create mode 100644 packages/components/src/basic/table/_examples/_border.vue
 create mode 100644 packages/components/src/basic/table/_examples/_column-visibility.vue
 create mode 100644 packages/components/src/basic/table/_examples/_custom-column.vue
 create mode 100644 packages/components/src/basic/table/_examples/_fixed-column.vue
 create mode 100644 packages/components/src/basic/table/_examples/_fixed-height.vue
 create mode 100644 packages/components/src/basic/table/_examples/_multiple-selection.vue
 create mode 100644 packages/components/src/basic/table/_examples/_single-selection.vue
 create mode 100644 packages/components/src/basic/table/_examples/_slot.vue
 create mode 100644 packages/components/src/basic/table/_examples/_sorting.vue
 create mode 100644 packages/components/src/basic/table/_examples/_stripe.vue
 create mode 100644 packages/components/src/basic/table/_examples/_toolbar.vue
 create mode 100644 packages/components/src/basic/table/_examples/_tree.vue
 create mode 100644 packages/components/src/basic/table/_examples/index.ts
 create mode 100644 packages/components/src/basic/table/index.vue
 create mode 100644 packages/components/src/basic/table/table/Table.vue
 create mode 100644 packages/components/src/basic/table/table/TableBody.vue
 create mode 100644 packages/components/src/basic/table/table/TableCaption.vue
 create mode 100644 packages/components/src/basic/table/table/TableCell.vue
 create mode 100644 packages/components/src/basic/table/table/TableEmpty.vue
 create mode 100644 packages/components/src/basic/table/table/TableFooter.vue
 create mode 100644 packages/components/src/basic/table/table/TableHead.vue
 create mode 100644 packages/components/src/basic/table/table/TableHeader.vue
 create mode 100644 packages/components/src/basic/table/table/TableRow.vue
 create mode 100644 packages/components/src/basic/table/table/index.ts
 create mode 100644 packages/components/src/basic/table/table/utils.ts

diff --git a/apps/core-ant-design-vue/src/types/components.d.ts b/apps/core-ant-design-vue/src/types/components.d.ts
index 35aa0d3e..aed426a3 100755
--- a/apps/core-ant-design-vue/src/types/components.d.ts
+++ b/apps/core-ant-design-vue/src/types/components.d.ts
@@ -21,6 +21,7 @@ declare module 'vue' {
     AppSystemInfo: typeof import('./../components/AppSystemInfo/index.vue')['default']
     FaAlert: typeof import('@fantastic-admin/components')['FaAlert']
     FaAvatar: typeof import('@fantastic-admin/components')['FaAvatar']
+    FaBadge: typeof import('@fantastic-admin/components')['FaBadge']
     FaButton: typeof import('@fantastic-admin/components')['FaButton']
     FaButtonGroup: typeof import('@fantastic-admin/components')['FaButtonGroup']
     FaCard: typeof import('@fantastic-admin/components')['FaCard']
@@ -56,7 +57,9 @@ declare module 'vue' {
     FaSelect: typeof import('@fantastic-admin/components')['FaSelect']
     FaSlider: typeof import('@fantastic-admin/components')['FaSlider']
     FaSwitch: typeof import('@fantastic-admin/components')['FaSwitch']
+    FaTable: typeof import('@fantastic-admin/components')['FaTable']
     FaTabs: typeof import('@fantastic-admin/components')['FaTabs']
+    FaTag: typeof import('@fantastic-admin/components')['FaTag']
     FaTextarea: typeof import('@fantastic-admin/components')['FaTextarea']
     FaToast: typeof import('@fantastic-admin/components')['FaToast']
     FaTooltip: typeof import('@fantastic-admin/components')['FaTooltip']
@@ -75,6 +78,7 @@ declare global {
   const AppSystemInfo: typeof import('./../components/AppSystemInfo/index.vue')['default']
   const FaAlert: typeof import('@fantastic-admin/components')['FaAlert']
   const FaAvatar: typeof import('@fantastic-admin/components')['FaAvatar']
+  const FaBadge: typeof import('@fantastic-admin/components')['FaBadge']
   const FaButton: typeof import('@fantastic-admin/components')['FaButton']
   const FaButtonGroup: typeof import('@fantastic-admin/components')['FaButtonGroup']
   const FaCard: typeof import('@fantastic-admin/components')['FaCard']
@@ -110,7 +114,9 @@ declare global {
   const FaSelect: typeof import('@fantastic-admin/components')['FaSelect']
   const FaSlider: typeof import('@fantastic-admin/components')['FaSlider']
   const FaSwitch: typeof import('@fantastic-admin/components')['FaSwitch']
+  const FaTable: typeof import('@fantastic-admin/components')['FaTable']
   const FaTabs: typeof import('@fantastic-admin/components')['FaTabs']
+  const FaTag: typeof import('@fantastic-admin/components')['FaTag']
   const FaTextarea: typeof import('@fantastic-admin/components')['FaTextarea']
   const FaToast: typeof import('@fantastic-admin/components')['FaToast']
   const FaTooltip: typeof import('@fantastic-admin/components')['FaTooltip']
diff --git a/apps/core-antdv-next/src/types/components.d.ts b/apps/core-antdv-next/src/types/components.d.ts
index 35aa0d3e..aed426a3 100755
--- a/apps/core-antdv-next/src/types/components.d.ts
+++ b/apps/core-antdv-next/src/types/components.d.ts
@@ -21,6 +21,7 @@ declare module 'vue' {
     AppSystemInfo: typeof import('./../components/AppSystemInfo/index.vue')['default']
     FaAlert: typeof import('@fantastic-admin/components')['FaAlert']
     FaAvatar: typeof import('@fantastic-admin/components')['FaAvatar']
+    FaBadge: typeof import('@fantastic-admin/components')['FaBadge']
     FaButton: typeof import('@fantastic-admin/components')['FaButton']
     FaButtonGroup: typeof import('@fantastic-admin/components')['FaButtonGroup']
     FaCard: typeof import('@fantastic-admin/components')['FaCard']
@@ -56,7 +57,9 @@ declare module 'vue' {
     FaSelect: typeof import('@fantastic-admin/components')['FaSelect']
     FaSlider: typeof import('@fantastic-admin/components')['FaSlider']
     FaSwitch: typeof import('@fantastic-admin/components')['FaSwitch']
+    FaTable: typeof import('@fantastic-admin/components')['FaTable']
     FaTabs: typeof import('@fantastic-admin/components')['FaTabs']
+    FaTag: typeof import('@fantastic-admin/components')['FaTag']
     FaTextarea: typeof import('@fantastic-admin/components')['FaTextarea']
     FaToast: typeof import('@fantastic-admin/components')['FaToast']
     FaTooltip: typeof import('@fantastic-admin/components')['FaTooltip']
@@ -75,6 +78,7 @@ declare global {
   const AppSystemInfo: typeof import('./../components/AppSystemInfo/index.vue')['default']
   const FaAlert: typeof import('@fantastic-admin/components')['FaAlert']
   const FaAvatar: typeof import('@fantastic-admin/components')['FaAvatar']
+  const FaBadge: typeof import('@fantastic-admin/components')['FaBadge']
   const FaButton: typeof import('@fantastic-admin/components')['FaButton']
   const FaButtonGroup: typeof import('@fantastic-admin/components')['FaButtonGroup']
   const FaCard: typeof import('@fantastic-admin/components')['FaCard']
@@ -110,7 +114,9 @@ declare global {
   const FaSelect: typeof import('@fantastic-admin/components')['FaSelect']
   const FaSlider: typeof import('@fantastic-admin/components')['FaSlider']
   const FaSwitch: typeof import('@fantastic-admin/components')['FaSwitch']
+  const FaTable: typeof import('@fantastic-admin/components')['FaTable']
   const FaTabs: typeof import('@fantastic-admin/components')['FaTabs']
+  const FaTag: typeof import('@fantastic-admin/components')['FaTag']
   const FaTextarea: typeof import('@fantastic-admin/components')['FaTextarea']
   const FaToast: typeof import('@fantastic-admin/components')['FaToast']
   const FaTooltip: typeof import('@fantastic-admin/components')['FaTooltip']
diff --git a/apps/core-arco-design-vue/src/types/components.d.ts b/apps/core-arco-design-vue/src/types/components.d.ts
index 35aa0d3e..aed426a3 100755
--- a/apps/core-arco-design-vue/src/types/components.d.ts
+++ b/apps/core-arco-design-vue/src/types/components.d.ts
@@ -21,6 +21,7 @@ declare module 'vue' {
     AppSystemInfo: typeof import('./../components/AppSystemInfo/index.vue')['default']
     FaAlert: typeof import('@fantastic-admin/components')['FaAlert']
     FaAvatar: typeof import('@fantastic-admin/components')['FaAvatar']
+    FaBadge: typeof import('@fantastic-admin/components')['FaBadge']
     FaButton: typeof import('@fantastic-admin/components')['FaButton']
     FaButtonGroup: typeof import('@fantastic-admin/components')['FaButtonGroup']
     FaCard: typeof import('@fantastic-admin/components')['FaCard']
@@ -56,7 +57,9 @@ declare module 'vue' {
     FaSelect: typeof import('@fantastic-admin/components')['FaSelect']
     FaSlider: typeof import('@fantastic-admin/components')['FaSlider']
     FaSwitch: typeof import('@fantastic-admin/components')['FaSwitch']
+    FaTable: typeof import('@fantastic-admin/components')['FaTable']
     FaTabs: typeof import('@fantastic-admin/components')['FaTabs']
+    FaTag: typeof import('@fantastic-admin/components')['FaTag']
     FaTextarea: typeof import('@fantastic-admin/components')['FaTextarea']
     FaToast: typeof import('@fantastic-admin/components')['FaToast']
     FaTooltip: typeof import('@fantastic-admin/components')['FaTooltip']
@@ -75,6 +78,7 @@ declare global {
   const AppSystemInfo: typeof import('./../components/AppSystemInfo/index.vue')['default']
   const FaAlert: typeof import('@fantastic-admin/components')['FaAlert']
   const FaAvatar: typeof import('@fantastic-admin/components')['FaAvatar']
+  const FaBadge: typeof import('@fantastic-admin/components')['FaBadge']
   const FaButton: typeof import('@fantastic-admin/components')['FaButton']
   const FaButtonGroup: typeof import('@fantastic-admin/components')['FaButtonGroup']
   const FaCard: typeof import('@fantastic-admin/components')['FaCard']
@@ -110,7 +114,9 @@ declare global {
   const FaSelect: typeof import('@fantastic-admin/components')['FaSelect']
   const FaSlider: typeof import('@fantastic-admin/components')['FaSlider']
   const FaSwitch: typeof import('@fantastic-admin/components')['FaSwitch']
+  const FaTable: typeof import('@fantastic-admin/components')['FaTable']
   const FaTabs: typeof import('@fantastic-admin/components')['FaTabs']
+  const FaTag: typeof import('@fantastic-admin/components')['FaTag']
   const FaTextarea: typeof import('@fantastic-admin/components')['FaTextarea']
   const FaToast: typeof import('@fantastic-admin/components')['FaToast']
   const FaTooltip: typeof import('@fantastic-admin/components')['FaTooltip']
diff --git a/apps/core-naive-ui/src/types/components.d.ts b/apps/core-naive-ui/src/types/components.d.ts
index 35aa0d3e..aed426a3 100755
--- a/apps/core-naive-ui/src/types/components.d.ts
+++ b/apps/core-naive-ui/src/types/components.d.ts
@@ -21,6 +21,7 @@ declare module 'vue' {
     AppSystemInfo: typeof import('./../components/AppSystemInfo/index.vue')['default']
     FaAlert: typeof import('@fantastic-admin/components')['FaAlert']
     FaAvatar: typeof import('@fantastic-admin/components')['FaAvatar']
+    FaBadge: typeof import('@fantastic-admin/components')['FaBadge']
     FaButton: typeof import('@fantastic-admin/components')['FaButton']
     FaButtonGroup: typeof import('@fantastic-admin/components')['FaButtonGroup']
     FaCard: typeof import('@fantastic-admin/components')['FaCard']
@@ -56,7 +57,9 @@ declare module 'vue' {
     FaSelect: typeof import('@fantastic-admin/components')['FaSelect']
     FaSlider: typeof import('@fantastic-admin/components')['FaSlider']
     FaSwitch: typeof import('@fantastic-admin/components')['FaSwitch']
+    FaTable: typeof import('@fantastic-admin/components')['FaTable']
     FaTabs: typeof import('@fantastic-admin/components')['FaTabs']
+    FaTag: typeof import('@fantastic-admin/components')['FaTag']
     FaTextarea: typeof import('@fantastic-admin/components')['FaTextarea']
     FaToast: typeof import('@fantastic-admin/components')['FaToast']
     FaTooltip: typeof import('@fantastic-admin/components')['FaTooltip']
@@ -75,6 +78,7 @@ declare global {
   const AppSystemInfo: typeof import('./../components/AppSystemInfo/index.vue')['default']
   const FaAlert: typeof import('@fantastic-admin/components')['FaAlert']
   const FaAvatar: typeof import('@fantastic-admin/components')['FaAvatar']
+  const FaBadge: typeof import('@fantastic-admin/components')['FaBadge']
   const FaButton: typeof import('@fantastic-admin/components')['FaButton']
   const FaButtonGroup: typeof import('@fantastic-admin/components')['FaButtonGroup']
   const FaCard: typeof import('@fantastic-admin/components')['FaCard']
@@ -110,7 +114,9 @@ declare global {
   const FaSelect: typeof import('@fantastic-admin/components')['FaSelect']
   const FaSlider: typeof import('@fantastic-admin/components')['FaSlider']
   const FaSwitch: typeof import('@fantastic-admin/components')['FaSwitch']
+  const FaTable: typeof import('@fantastic-admin/components')['FaTable']
   const FaTabs: typeof import('@fantastic-admin/components')['FaTabs']
+  const FaTag: typeof import('@fantastic-admin/components')['FaTag']
   const FaTextarea: typeof import('@fantastic-admin/components')['FaTextarea']
   const FaToast: typeof import('@fantastic-admin/components')['FaToast']
   const FaTooltip: typeof import('@fantastic-admin/components')['FaTooltip']
diff --git a/apps/core-tdesign/src/types/components.d.ts b/apps/core-tdesign/src/types/components.d.ts
index 35aa0d3e..aed426a3 100755
--- a/apps/core-tdesign/src/types/components.d.ts
+++ b/apps/core-tdesign/src/types/components.d.ts
@@ -21,6 +21,7 @@ declare module 'vue' {
     AppSystemInfo: typeof import('./../components/AppSystemInfo/index.vue')['default']
     FaAlert: typeof import('@fantastic-admin/components')['FaAlert']
     FaAvatar: typeof import('@fantastic-admin/components')['FaAvatar']
+    FaBadge: typeof import('@fantastic-admin/components')['FaBadge']
     FaButton: typeof import('@fantastic-admin/components')['FaButton']
     FaButtonGroup: typeof import('@fantastic-admin/components')['FaButtonGroup']
     FaCard: typeof import('@fantastic-admin/components')['FaCard']
@@ -56,7 +57,9 @@ declare module 'vue' {
     FaSelect: typeof import('@fantastic-admin/components')['FaSelect']
     FaSlider: typeof import('@fantastic-admin/components')['FaSlider']
     FaSwitch: typeof import('@fantastic-admin/components')['FaSwitch']
+    FaTable: typeof import('@fantastic-admin/components')['FaTable']
     FaTabs: typeof import('@fantastic-admin/components')['FaTabs']
+    FaTag: typeof import('@fantastic-admin/components')['FaTag']
     FaTextarea: typeof import('@fantastic-admin/components')['FaTextarea']
     FaToast: typeof import('@fantastic-admin/components')['FaToast']
     FaTooltip: typeof import('@fantastic-admin/components')['FaTooltip']
@@ -75,6 +78,7 @@ declare global {
   const AppSystemInfo: typeof import('./../components/AppSystemInfo/index.vue')['default']
   const FaAlert: typeof import('@fantastic-admin/components')['FaAlert']
   const FaAvatar: typeof import('@fantastic-admin/components')['FaAvatar']
+  const FaBadge: typeof import('@fantastic-admin/components')['FaBadge']
   const FaButton: typeof import('@fantastic-admin/components')['FaButton']
   const FaButtonGroup: typeof import('@fantastic-admin/components')['FaButtonGroup']
   const FaCard: typeof import('@fantastic-admin/components')['FaCard']
@@ -110,7 +114,9 @@ declare global {
   const FaSelect: typeof import('@fantastic-admin/components')['FaSelect']
   const FaSlider: typeof import('@fantastic-admin/components')['FaSlider']
   const FaSwitch: typeof import('@fantastic-admin/components')['FaSwitch']
+  const FaTable: typeof import('@fantastic-admin/components')['FaTable']
   const FaTabs: typeof import('@fantastic-admin/components')['FaTabs']
+  const FaTag: typeof import('@fantastic-admin/components')['FaTag']
   const FaTextarea: typeof import('@fantastic-admin/components')['FaTextarea']
   const FaToast: typeof import('@fantastic-admin/components')['FaToast']
   const FaTooltip: typeof import('@fantastic-admin/components')['FaTooltip']
diff --git a/apps/core-vexip-ui/src/types/components.d.ts b/apps/core-vexip-ui/src/types/components.d.ts
index 35aa0d3e..aed426a3 100755
--- a/apps/core-vexip-ui/src/types/components.d.ts
+++ b/apps/core-vexip-ui/src/types/components.d.ts
@@ -21,6 +21,7 @@ declare module 'vue' {
     AppSystemInfo: typeof import('./../components/AppSystemInfo/index.vue')['default']
     FaAlert: typeof import('@fantastic-admin/components')['FaAlert']
     FaAvatar: typeof import('@fantastic-admin/components')['FaAvatar']
+    FaBadge: typeof import('@fantastic-admin/components')['FaBadge']
     FaButton: typeof import('@fantastic-admin/components')['FaButton']
     FaButtonGroup: typeof import('@fantastic-admin/components')['FaButtonGroup']
     FaCard: typeof import('@fantastic-admin/components')['FaCard']
@@ -56,7 +57,9 @@ declare module 'vue' {
     FaSelect: typeof import('@fantastic-admin/components')['FaSelect']
     FaSlider: typeof import('@fantastic-admin/components')['FaSlider']
     FaSwitch: typeof import('@fantastic-admin/components')['FaSwitch']
+    FaTable: typeof import('@fantastic-admin/components')['FaTable']
     FaTabs: typeof import('@fantastic-admin/components')['FaTabs']
+    FaTag: typeof import('@fantastic-admin/components')['FaTag']
     FaTextarea: typeof import('@fantastic-admin/components')['FaTextarea']
     FaToast: typeof import('@fantastic-admin/components')['FaToast']
     FaTooltip: typeof import('@fantastic-admin/components')['FaTooltip']
@@ -75,6 +78,7 @@ declare global {
   const AppSystemInfo: typeof import('./../components/AppSystemInfo/index.vue')['default']
   const FaAlert: typeof import('@fantastic-admin/components')['FaAlert']
   const FaAvatar: typeof import('@fantastic-admin/components')['FaAvatar']
+  const FaBadge: typeof import('@fantastic-admin/components')['FaBadge']
   const FaButton: typeof import('@fantastic-admin/components')['FaButton']
   const FaButtonGroup: typeof import('@fantastic-admin/components')['FaButtonGroup']
   const FaCard: typeof import('@fantastic-admin/components')['FaCard']
@@ -110,7 +114,9 @@ declare global {
   const FaSelect: typeof import('@fantastic-admin/components')['FaSelect']
   const FaSlider: typeof import('@fantastic-admin/components')['FaSlider']
   const FaSwitch: typeof import('@fantastic-admin/components')['FaSwitch']
+  const FaTable: typeof import('@fantastic-admin/components')['FaTable']
   const FaTabs: typeof import('@fantastic-admin/components')['FaTabs']
+  const FaTag: typeof import('@fantastic-admin/components')['FaTag']
   const FaTextarea: typeof import('@fantastic-admin/components')['FaTextarea']
   const FaToast: typeof import('@fantastic-admin/components')['FaToast']
   const FaTooltip: typeof import('@fantastic-admin/components')['FaTooltip']
diff --git a/apps/core/src/types/components.d.ts b/apps/core/src/types/components.d.ts
index 35aa0d3e..aed426a3 100644
--- a/apps/core/src/types/components.d.ts
+++ b/apps/core/src/types/components.d.ts
@@ -21,6 +21,7 @@ declare module 'vue' {
     AppSystemInfo: typeof import('./../components/AppSystemInfo/index.vue')['default']
     FaAlert: typeof import('@fantastic-admin/components')['FaAlert']
     FaAvatar: typeof import('@fantastic-admin/components')['FaAvatar']
+    FaBadge: typeof import('@fantastic-admin/components')['FaBadge']
     FaButton: typeof import('@fantastic-admin/components')['FaButton']
     FaButtonGroup: typeof import('@fantastic-admin/components')['FaButtonGroup']
     FaCard: typeof import('@fantastic-admin/components')['FaCard']
@@ -56,7 +57,9 @@ declare module 'vue' {
     FaSelect: typeof import('@fantastic-admin/components')['FaSelect']
     FaSlider: typeof import('@fantastic-admin/components')['FaSlider']
     FaSwitch: typeof import('@fantastic-admin/components')['FaSwitch']
+    FaTable: typeof import('@fantastic-admin/components')['FaTable']
     FaTabs: typeof import('@fantastic-admin/components')['FaTabs']
+    FaTag: typeof import('@fantastic-admin/components')['FaTag']
     FaTextarea: typeof import('@fantastic-admin/components')['FaTextarea']
     FaToast: typeof import('@fantastic-admin/components')['FaToast']
     FaTooltip: typeof import('@fantastic-admin/components')['FaTooltip']
@@ -75,6 +78,7 @@ declare global {
   const AppSystemInfo: typeof import('./../components/AppSystemInfo/index.vue')['default']
   const FaAlert: typeof import('@fantastic-admin/components')['FaAlert']
   const FaAvatar: typeof import('@fantastic-admin/components')['FaAvatar']
+  const FaBadge: typeof import('@fantastic-admin/components')['FaBadge']
   const FaButton: typeof import('@fantastic-admin/components')['FaButton']
   const FaButtonGroup: typeof import('@fantastic-admin/components')['FaButtonGroup']
   const FaCard: typeof import('@fantastic-admin/components')['FaCard']
@@ -110,7 +114,9 @@ declare global {
   const FaSelect: typeof import('@fantastic-admin/components')['FaSelect']
   const FaSlider: typeof import('@fantastic-admin/components')['FaSlider']
   const FaSwitch: typeof import('@fantastic-admin/components')['FaSwitch']
+  const FaTable: typeof import('@fantastic-admin/components')['FaTable']
   const FaTabs: typeof import('@fantastic-admin/components')['FaTabs']
+  const FaTag: typeof import('@fantastic-admin/components')['FaTag']
   const FaTextarea: typeof import('@fantastic-admin/components')['FaTextarea']
   const FaToast: typeof import('@fantastic-admin/components')['FaToast']
   const FaTooltip: typeof import('@fantastic-admin/components')['FaTooltip']
diff --git a/apps/example/src/router/modules/component.example.ts b/apps/example/src/router/modules/component.example.ts
index 3299503e..633f3cbb 100755
--- a/apps/example/src/router/modules/component.example.ts
+++ b/apps/example/src/router/modules/component.example.ts
@@ -302,6 +302,14 @@ const routes: RouteRecordRaw = {
         title: '开关',
       },
     },
+    {
+      path: 'table',
+      name: 'componentExampleTable',
+      component: () => import('@/views/component_example/table.vue'),
+      meta: {
+        title: '表格',
+      },
+    },
     {
       path: 'tag',
       name: 'componentExampleTag',
diff --git a/apps/example/src/types/components.d.ts b/apps/example/src/types/components.d.ts
index 35aa0d3e..aed426a3 100644
--- a/apps/example/src/types/components.d.ts
+++ b/apps/example/src/types/components.d.ts
@@ -21,6 +21,7 @@ declare module 'vue' {
     AppSystemInfo: typeof import('./../components/AppSystemInfo/index.vue')['default']
     FaAlert: typeof import('@fantastic-admin/components')['FaAlert']
     FaAvatar: typeof import('@fantastic-admin/components')['FaAvatar']
+    FaBadge: typeof import('@fantastic-admin/components')['FaBadge']
     FaButton: typeof import('@fantastic-admin/components')['FaButton']
     FaButtonGroup: typeof import('@fantastic-admin/components')['FaButtonGroup']
     FaCard: typeof import('@fantastic-admin/components')['FaCard']
@@ -56,7 +57,9 @@ declare module 'vue' {
     FaSelect: typeof import('@fantastic-admin/components')['FaSelect']
     FaSlider: typeof import('@fantastic-admin/components')['FaSlider']
     FaSwitch: typeof import('@fantastic-admin/components')['FaSwitch']
+    FaTable: typeof import('@fantastic-admin/components')['FaTable']
     FaTabs: typeof import('@fantastic-admin/components')['FaTabs']
+    FaTag: typeof import('@fantastic-admin/components')['FaTag']
     FaTextarea: typeof import('@fantastic-admin/components')['FaTextarea']
     FaToast: typeof import('@fantastic-admin/components')['FaToast']
     FaTooltip: typeof import('@fantastic-admin/components')['FaTooltip']
@@ -75,6 +78,7 @@ declare global {
   const AppSystemInfo: typeof import('./../components/AppSystemInfo/index.vue')['default']
   const FaAlert: typeof import('@fantastic-admin/components')['FaAlert']
   const FaAvatar: typeof import('@fantastic-admin/components')['FaAvatar']
+  const FaBadge: typeof import('@fantastic-admin/components')['FaBadge']
   const FaButton: typeof import('@fantastic-admin/components')['FaButton']
   const FaButtonGroup: typeof import('@fantastic-admin/components')['FaButtonGroup']
   const FaCard: typeof import('@fantastic-admin/components')['FaCard']
@@ -110,7 +114,9 @@ declare global {
   const FaSelect: typeof import('@fantastic-admin/components')['FaSelect']
   const FaSlider: typeof import('@fantastic-admin/components')['FaSlider']
   const FaSwitch: typeof import('@fantastic-admin/components')['FaSwitch']
+  const FaTable: typeof import('@fantastic-admin/components')['FaTable']
   const FaTabs: typeof import('@fantastic-admin/components')['FaTabs']
+  const FaTag: typeof import('@fantastic-admin/components')['FaTag']
   const FaTextarea: typeof import('@fantastic-admin/components')['FaTextarea']
   const FaToast: typeof import('@fantastic-admin/components')['FaToast']
   const FaTooltip: typeof import('@fantastic-admin/components')['FaTooltip']
diff --git a/apps/example/src/views/component_example/table.vue b/apps/example/src/views/component_example/table.vue
new file mode 100644
index 00000000..82ec9cdf
--- /dev/null
+++ b/apps/example/src/views/component_example/table.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { table } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="表格" description="FaTable" />
+    <FaPageMain
+      v-for="example in table"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/packages/components/package.json b/packages/components/package.json
index 6d2beb88..3f802cf3 100755
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -29,6 +29,7 @@
   "dependencies": {
     "@iconify/vue": "catalog:",
     "@lucide/vue": "catalog:",
+    "@tanstack/vue-table": "catalog:",
     "axios": "catalog:",
     "class-variance-authority": "catalog:",
     "clsx": "catalog:",
diff --git a/packages/components/resolver.ts b/packages/components/resolver.ts
index 80ca3ed2..1a0dbd65 100755
--- a/packages/components/resolver.ts
+++ b/packages/components/resolver.ts
@@ -8,6 +8,7 @@ const PACKAGE_NAME = createRequire(import.meta.url)('./package.json').name
 const BASIC_COMPONENT_NAMES = [
   'FaAlert',
   'FaAvatar',
+  'FaBadge',
   'FaButton',
   'FaButtonGroup',
   'FaCard',
@@ -43,7 +44,9 @@ const BASIC_COMPONENT_NAMES = [
   'FaSelect',
   'FaSlider',
   'FaSwitch',
+  'FaTable',
   'FaTabs',
+  'FaTag',
   'FaTextarea',
   'FaToast',
   'FaTooltip',
diff --git a/packages/components/src/basic/checkbox-group/index.vue b/packages/components/src/basic/checkbox-group/index.vue
index 6c29ce74..7b2294bd 100755
--- a/packages/components/src/basic/checkbox-group/index.vue
+++ b/packages/components/src/basic/checkbox-group/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts" generic="TOption extends CheckboxGroupOption">
-import type { AcceptableValue } from 'reka-ui'
+import type { AcceptableValue, Direction } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
+import { useTextDirection } from '@vueuse/core'
 import { computed, useId, watch } from 'vue'
 import { cn } from '#utils'
 import { Checkbox } from '../checkbox/checkbox'
@@ -23,7 +24,7 @@ const props = defineProps<{
   disabled?: boolean
   min?: number
   max?: number
-  dir?: 'ltr' | 'rtl'
+  dir?: Direction
   class?: HTMLAttributes['class']
   optionClass?: HTMLAttributes['class']
   itemClass?: HTMLAttributes['class']
@@ -47,6 +48,11 @@ const value = defineModel<AcceptableValue[]>({
   default: () => [],
 })
 
+const documentDir = useTextDirection({
+  observe: true,
+})
+
+const dir = computed<Direction>(() => props.dir ?? (documentDir.value === 'rtl' ? 'rtl' : 'ltr'))
 const baseId = useId()
 const checkedCount = computed(() => value.value.length)
 
diff --git a/packages/components/src/basic/dropdown/index.vue b/packages/components/src/basic/dropdown/index.vue
index 08c7961f..ac7ed792 100644
--- a/packages/components/src/basic/dropdown/index.vue
+++ b/packages/components/src/basic/dropdown/index.vue
@@ -5,6 +5,7 @@ import { createReusableTemplate, useTextDirection } from '@vueuse/core'
 import Icon from '../icon/index.vue'
 import {
   DropdownMenu,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuGroup,
   DropdownMenuItem,
@@ -41,10 +42,12 @@ const Option = createReusableTemplate<{
 
 interface MenuItem {
   label: string
+  type?: 'checkbox'
   icon?: string
   variant?: 'default' | 'destructive'
   disabled?: boolean
-  handle?: () => void
+  checked?: boolean
+  handle?: (checked?: boolean) => void
 }
 
 interface MenuSubItem {
@@ -62,9 +65,13 @@ function hasIcon(group: (MenuItem | MenuSubItem)[][]) {
   }))
 }
 
-function handleItemClick(item: { handle?: () => void }) {
+function handleItemClick(item: { handle?: (checked?: boolean) => void }) {
   item.handle?.()
 }
+
+function handleCheckboxItemChange(item: MenuItem, checked: boolean) {
+  item.handle?.(checked)
+}
 </script>
 
 <template>
@@ -83,7 +90,15 @@ function handleItemClick(item: { handle?: () => void }) {
         <template v-for="(item, index) in its" :key="index">
           <DropdownMenuGroup>
             <template v-for="(v, i) in item" :key="i">
-              <DropdownMenuItem v-if="!('items' in v)" :variant="v.variant" :disabled="v.disabled" @click="handleItemClick(v)">
+              <DropdownMenuCheckboxItem
+                v-if="!('items' in v) && v.type === 'checkbox'"
+                :model-value="v.checked"
+                :disabled="v.disabled"
+                @update:model-value="value => handleCheckboxItemChange(v, value)"
+              >
+                {{ v.label }}
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuItem v-else-if="!('items' in v)" :variant="v.variant" :disabled="v.disabled" @click="handleItemClick(v)">
                 <div v-if="hasIcon(its)" class="flex-center size-4">
                   <Icon v-if="v.icon" :name="v.icon" class="size-4" />
                 </div>
diff --git a/packages/components/src/basic/radio-group/index.vue b/packages/components/src/basic/radio-group/index.vue
index c73c0500..24503716 100644
--- a/packages/components/src/basic/radio-group/index.vue
+++ b/packages/components/src/basic/radio-group/index.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts" generic="TOption extends RadioGroupOption">
-import type { AcceptableValue, RadioGroupRootProps } from 'reka-ui'
+import type { AcceptableValue, Direction, RadioGroupRootProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
-import { useId, watch } from 'vue'
+import { useTextDirection } from '@vueuse/core'
+import { computed, useId, watch } from 'vue'
 import { cn } from '#utils'
 import { Label } from '../label/label'
 import { RadioGroup, RadioGroupItem } from './radio-group'
@@ -21,7 +22,7 @@ defineOptions({
 const props = defineProps<{
   options: TOption[]
   disabled?: RadioGroupRootProps['disabled']
-  dir?: RadioGroupRootProps['dir']
+  dir?: Direction
   class?: HTMLAttributes['class']
   optionClass?: HTMLAttributes['class']
   itemClass?: HTMLAttributes['class']
@@ -41,6 +42,11 @@ const slots = defineSlots<{
 }>()
 
 const value = defineModel<AcceptableValue | undefined>()
+const documentDir = useTextDirection({
+  observe: true,
+})
+
+const dir = computed<Direction>(() => props.dir ?? (documentDir.value === 'rtl' ? 'rtl' : 'ltr'))
 const baseId = useId()
 
 watch(value, (newValue) => {
diff --git a/packages/components/src/basic/table/README.md b/packages/components/src/basic/table/README.md
new file mode 100644
index 00000000..d94b1d34
--- /dev/null
+++ b/packages/components/src/basic/table/README.md
@@ -0,0 +1,106 @@
+# FaTable 表格
+
+基于 TanStack Table 封装的数据表格组件，提供基础展示、树型数据、工具栏、列显示控制、排序、边框、斑马纹、固定列、固定高度、单选、多选和插槽自定义能力。
+
+## 使用场景
+
+- 常规数据列表展示
+- 通过 `children` 或 `getSubRows` 展示树型层级数据
+- 需要单选或多选的数据表格
+- 固定列、固定高度等复杂表格布局
+- 需要外部处理排序状态的数据表格
+- 通过工具栏插槽放置新增、刷新、批量操作等自定义功能
+- 通过插槽自定义单元格、表头、表尾和空状态
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `columns` | `TableColumn[]` | **必需** | 表格列配置 |
+| `data` | `TData[]` | **必需** | 表格数据 |
+| `border` | `boolean` | `false` | 是否显示外边框和单元格纵向分割线 |
+| `caption` | `string` | - | 表格标题 |
+| `columnVisibility` | `boolean` | `false` | 是否在工具栏右侧显示列显示控制按钮 |
+| `defaultSorting` | `TableSortingState` | `[]` | 初始排序状态，仅在未受控时生效 |
+| `defaultExpanded` | `TableExpandedState` | `{}` | 初始展开状态，仅在未受控时生效 |
+| `emptyText` | `string` | `'暂无数据'` | 空数据文本 |
+| `enableMultiSort` | `boolean` | `true` | 是否允许多列排序 |
+| `enableSortingRemoval` | `boolean` | `true` | 是否允许清除排序 |
+| `expanded` | `TableExpandedState` | - | 受控展开状态 |
+| `getRowId` | `TableOptions<TData>['getRowId']` | - | 自定义行 ID 获取方法 |
+| `getSubRows` | `TableOptions<TData>['getSubRows']` | - | 自定义子行获取方法，未设置时默认读取 `children` |
+| `indentSize` | `number` | `20` | 树型数据每一级缩进像素 |
+| `manualExpanding` | `boolean` | `false` | 是否由外部手动处理展开数据 |
+| `multiple` | `boolean` | `false` | 是否为多选模式 |
+| `rowKey` | `keyof TData \| string \| ((row: TData, index: number) => string \| number)` | - | 行唯一标识 |
+| `selectable` | `boolean` | `false` | 是否启用选择列 |
+| `sortable` | `boolean` | `false` | 是否启用排序交互 |
+| `sorting` | `TableSortingState` | - | 受控排序状态 |
+| `sortDescFirst` | `boolean` | `true` | 首次排序是否从降序开始 |
+| `stripe` | `boolean` | `false` | 是否显示斑马纹 |
+| `class` | `HTMLAttributes['class']` | - | 外层根节点 class，包含工具栏和表格 |
+| `tableRootClass` | `HTMLAttributes['class']` | - | 表格根节点 class，仅作用于表格区域 |
+| `tableClass` | `HTMLAttributes['class']` | - | 表格 class |
+| `headerClass` | `HTMLAttributes['class']` | - | 表头 class |
+| `headerRowClass` | `HTMLAttributes['class']` | - | 表头行 class |
+| `bodyClass` | `HTMLAttributes['class']` | - | 表体 class |
+| `rowClass` | `HTMLAttributes['class'] \| ((row: Row<TData>) => HTMLAttributes['class'])` | - | 表格行 class |
+| `selectionColumnClass` | `HTMLAttributes['class']` | - | 选择列 class |
+| `tree` | `boolean` | `false` | 是否启用树型数据展示，展开图标渲染在首列 |
+
+## TableColumn
+
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| `accessorKey` | `string` | 数据字段名 |
+| `header` | `string \| Function` | 表头内容 |
+| `cell` | `string \| Function` | 单元格内容 |
+| `columns` | `TableColumn[]` | 多级表头子列 |
+| `align` | `'left' \| 'center' \| 'right'` | 对齐方式 |
+| `fixed` | `boolean \| 'left' \| 'right'` | 固定列位置 |
+| `enableSorting` | `boolean` | 是否允许当前列排序 |
+| `enableMultiSort` | `boolean` | 是否允许当前列参与多列排序 |
+| `sortDescFirst` | `boolean` | 当前列首次排序是否从降序开始 |
+| `sortingFn` | `string \| Function` | 排序函数（组件内部不执行实际排序） |
+| `width` | `number \| string` | 列宽 |
+| `minWidth` | `number \| string` | 最小列宽 |
+| `maxWidth` | `number \| string` | 最大列宽 |
+| `class` | `HTMLAttributes['class']` | 列 class |
+| `headerClass` | `HTMLAttributes['class'] \| Function` | 表头 class |
+| `cellClass` | `HTMLAttributes['class'] \| Function` | 单元格 class |
+
+选择列可配置 `{ type: 'selection' }`，并可通过 `disabled` 控制某一行是否禁用选择。
+
+排序能力基于 TanStack Table 的 `SortingState` 实现。开启 `sortable` 后，支持单列排序与 `Shift + 点击` 多列排序；组件只维护排序状态并触发事件，不会对传入数据做实际排序，当前参与排序的列会显示独立背景。
+
+树型数据能力基于 TanStack Table 的 Expanding Row Model 实现。开启 `tree` 后，组件默认读取每行的 `children` 字段作为子行，也可以通过 `getSubRows` 自定义子行来源；展开图标固定渲染在首个可见列。
+
+## Slots
+
+| 名称 | 说明 | 作用域参数 |
+|------|------|------------|
+| `caption` | 自定义表格标题 | - |
+| `empty` | 自定义空状态 | `table` |
+| `toolbar` | 自定义工具栏左侧内容 | `table` |
+| `header-{columnId}` | 自定义指定列表头 | `column`、`header`、`table` |
+| `cell-{columnId}` | 自定义指定列单元格 | `cell`、`column`、`index`、`row`、`table`、`value` |
+| `footer-{columnId}` | 自定义指定列表尾 | `column`、`header`、`table` |
+
+## Events
+
+| 事件名 | 说明 | 回调参数 |
+|--------|------|----------|
+| `row-click` | 点击表格行时触发 | `(row: TData, index: number, event: MouseEvent)` |
+| `selection-change` | 选择状态变化时触发 | `(rows: TData[], rowSelection: RowSelectionState)` |
+| `sorting-change` | 排序状态变化时触发 | `(sorting: TableSortingState, table: TanStackTable<TData>)` |
+| `expanded-change` | 展开状态变化时触发 | `(expanded: TableExpandedState, table: TanStackTable<TData>)` |
+| `update:expanded` | 受控展开状态更新时触发 | `(expanded: TableExpandedState)` |
+
+## 注意事项
+
+1. 推荐为复杂表格设置 `rowKey` 或 `getRowId`，保证选择状态和行更新稳定。
+2. 启用选择能力时需要设置 `selectable`，多选场景再配合 `multiple` 使用。
+3. 固定列建议显式设置列宽，避免横向滚动时出现宽度计算不稳定。
+4. 普通列默认可被列显示控制隐藏，设置 `enableHiding: false` 可禁止某列出现在列显示菜单中。
+5. 排序仅负责状态管理，真正的数据排序请在外部根据 `sorting-change` 自行处理。
+6. 树型数据建议设置 `rowKey` 或 `getRowId`，避免展开状态在数据更新后错位。
diff --git a/packages/components/src/basic/table/_examples/_basic.vue b/packages/components/src/basic/table/_examples/_basic.vue
new file mode 100644
index 00000000..baab3d11
--- /dev/null
+++ b/packages/components/src/basic/table/_examples/_basic.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { TableColumn } from '../index.vue'
+
+interface Task {
+  id: string
+  title: string
+  owner: string
+  status: string
+  updatedAt: string
+}
+
+const columns: TableColumn<Task>[] = [
+  {
+    accessorKey: 'title',
+    header: '任务',
+  },
+  {
+    accessorKey: 'owner',
+    header: '负责人',
+  },
+  {
+    accessorKey: 'status',
+    header: '状态',
+  },
+  {
+    accessorKey: 'updatedAt',
+    header: '更新时间',
+  },
+]
+
+const data: Task[] = [
+  { id: 't-001', title: '完善组件文档', owner: '林舟', status: '进行中', updatedAt: '2026-05-23' },
+  { id: 't-002', title: '同步设计变量', owner: '陈念', status: '待处理', updatedAt: '2026-05-22' },
+  { id: 't-003', title: '整理示例数据', owner: '周衡', status: '已完成', updatedAt: '2026-05-21' },
+  { id: 't-004', title: '回归交互状态', owner: '沈若', status: '进行中', updatedAt: '2026-05-20' },
+]
+</script>
+
+<template>
+  <FaTable :columns :data />
+</template>
diff --git a/packages/components/src/basic/table/_examples/_border.vue b/packages/components/src/basic/table/_examples/_border.vue
new file mode 100644
index 00000000..46111ff0
--- /dev/null
+++ b/packages/components/src/basic/table/_examples/_border.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { TableColumn } from '../index.vue'
+
+interface Project {
+  id: string
+  name: string
+  owner: string
+  progress: string
+  status: string
+}
+
+const columns: TableColumn<Project>[] = [
+  {
+    accessorKey: 'name',
+    header: '项目',
+    width: 220,
+  },
+  {
+    accessorKey: 'owner',
+    header: '负责人',
+    width: 120,
+  },
+  {
+    accessorKey: 'progress',
+    header: '进度',
+    width: 120,
+    align: 'right',
+  },
+  {
+    accessorKey: 'status',
+    header: '状态',
+    width: 120,
+  },
+]
+
+const data: Project[] = [
+  { id: 'p-001', name: '权限策略整理', owner: '林舟', progress: '72%', status: '进行中' },
+  { id: 'p-002', name: '表格示例拆分', owner: '陈念', progress: '100%', status: '已完成' },
+  { id: 'p-003', name: '数据导出流程', owner: '周衡', progress: '48%', status: '进行中' },
+  { id: 'p-004', name: '菜单体验优化', owner: '沈若', progress: '16%', status: '待处理' },
+]
+</script>
+
+<template>
+  <FaTable border row-key="id" :columns :data />
+</template>
diff --git a/packages/components/src/basic/table/_examples/_column-visibility.vue b/packages/components/src/basic/table/_examples/_column-visibility.vue
new file mode 100644
index 00000000..70198517
--- /dev/null
+++ b/packages/components/src/basic/table/_examples/_column-visibility.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { TableColumn } from '../index.vue'
+
+interface Task {
+  id: string
+  title: string
+  owner: string
+  priority: string
+  status: string
+  updatedAt: string
+}
+
+const columns: TableColumn<Task>[] = [
+  {
+    accessorKey: 'title',
+    header: '任务',
+    enableHiding: false,
+  },
+  {
+    accessorKey: 'owner',
+    header: '负责人',
+  },
+  {
+    accessorKey: 'priority',
+    header: '优先级',
+  },
+  {
+    accessorKey: 'status',
+    header: '状态',
+  },
+  {
+    accessorKey: 'updatedAt',
+    header: '更新时间',
+  },
+]
+
+const data: Task[] = [
+  { id: 't-001', title: '完善组件文档', owner: '林舟', priority: '中', status: '进行中', updatedAt: '2026-05-23' },
+  { id: 't-002', title: '同步设计变量', owner: '陈念', priority: '高', status: '待处理', updatedAt: '2026-05-22' },
+  { id: 't-003', title: '整理示例数据', owner: '周衡', priority: '低', status: '已完成', updatedAt: '2026-05-21' },
+  { id: 't-004', title: '回归交互状态', owner: '沈若', priority: '中', status: '进行中', updatedAt: '2026-05-20' },
+]
+</script>
+
+<template>
+  <FaTable column-visibility :columns :data />
+</template>
diff --git a/packages/components/src/basic/table/_examples/_custom-column.vue b/packages/components/src/basic/table/_examples/_custom-column.vue
new file mode 100644
index 00000000..5ff506f2
--- /dev/null
+++ b/packages/components/src/basic/table/_examples/_custom-column.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { TableColumn } from '../index.vue'
+
+interface Metric {
+  id: string
+  name: string
+  today: string
+  yesterday: string
+  trend: string
+}
+
+const columns: TableColumn<Metric>[] = [
+  {
+    accessorKey: 'name',
+    label: '指标名称',
+    width: 180,
+    cellClass: 'font-medium bg-amber-200/80 dark:bg-amber-500/35',
+  },
+  {
+    accessorKey: 'today',
+    header: '今日',
+    align: 'right',
+    width: 120,
+    cellClass: 'tabular-nums',
+  },
+  {
+    accessorKey: 'yesterday',
+    header: '昨日',
+    align: 'right',
+    width: 120,
+    cellClass: 'tabular-nums text-muted-foreground',
+  },
+  {
+    accessorKey: 'trend',
+    title: '变化',
+    align: 'right',
+    width: 120,
+    headerClass: 'text-primary',
+    cellClass: ({ row }) => row.original.trend.startsWith('+')
+      ? 'text-success font-medium tabular-nums'
+      : 'text-destructive font-medium tabular-nums',
+  },
+]
+
+const data: Metric[] = [
+  { id: 'm-001', name: '访问量', today: '18,420', yesterday: '16,280', trend: '+13.1%' },
+  { id: 'm-002', name: '转化率', today: '8.6%', yesterday: '9.1%', trend: '-0.5%' },
+  { id: 'm-003', name: '新增客户', today: '326', yesterday: '304', trend: '+7.2%' },
+]
+</script>
+
+<template>
+  <FaTable row-key="id" :columns :data />
+</template>
diff --git a/packages/components/src/basic/table/_examples/_fixed-column.vue b/packages/components/src/basic/table/_examples/_fixed-column.vue
new file mode 100644
index 00000000..3d79d620
--- /dev/null
+++ b/packages/components/src/basic/table/_examples/_fixed-column.vue
@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import type { TableColumn } from '../index.vue'
+
+interface Project {
+  id: string
+  name: string
+  owner: string
+  department: string
+  priority: string
+  status: string
+  deadline: string
+  budget: string
+  nextAction: string
+}
+
+const columns: TableColumn<Project>[] = [
+  {
+    accessorKey: 'name',
+    header: '项目',
+    fixed: 'left',
+    width: 220,
+  },
+  {
+    accessorKey: 'owner',
+    header: '负责人',
+    fixed: 'left',
+    width: 120,
+  },
+  {
+    accessorKey: 'department',
+    header: '所属部门',
+    width: 160,
+  },
+  {
+    accessorKey: 'priority',
+    header: '优先级',
+    width: 120,
+  },
+  {
+    accessorKey: 'status',
+    header: '状态',
+    width: 120,
+  },
+  {
+    accessorKey: 'deadline',
+    header: '截止日期',
+    width: 140,
+  },
+  {
+    accessorKey: 'budget',
+    header: '预算',
+    align: 'right',
+    fixed: 'right',
+    width: 120,
+  },
+  {
+    accessorKey: 'nextAction',
+    header: '下一步',
+    align: 'right',
+    fixed: 'right',
+    width: 140,
+  },
+]
+
+const data: Project[] = [
+  {
+    id: 'p-1001',
+    name: '权限中心改造',
+    owner: '林舟',
+    department: '基础平台部',
+    priority: '高',
+    status: '进行中',
+    deadline: '2026-06-12',
+    budget: '¥84,000',
+    nextAction: '查看详情',
+  },
+  {
+    id: 'p-1002',
+    name: '移动端适配',
+    owner: '陈念',
+    department: '体验技术部',
+    priority: '中',
+    status: '评审中',
+    deadline: '2026-06-18',
+    budget: '¥56,000',
+    nextAction: '排期',
+  },
+  {
+    id: 'p-1003',
+    name: '数据看板升级',
+    owner: '周衡',
+    department: '数据产品部',
+    priority: '中',
+    status: '已完成',
+    deadline: '2026-05-30',
+    budget: '¥126,000',
+    nextAction: '复盘',
+  },
+]
+</script>
+
+<template>
+  <FaTable
+    row-key="id"
+    table-class="min-w-[1160px]"
+    :columns
+    :data
+  />
+</template>
diff --git a/packages/components/src/basic/table/_examples/_fixed-height.vue b/packages/components/src/basic/table/_examples/_fixed-height.vue
new file mode 100644
index 00000000..f60d1162
--- /dev/null
+++ b/packages/components/src/basic/table/_examples/_fixed-height.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { TableColumn } from '../index.vue'
+
+interface LogRecord {
+  id: string
+  event: string
+  operator: string
+  result: string
+  time: string
+}
+
+const columns: TableColumn<LogRecord>[] = [
+  {
+    accessorKey: 'event',
+    header: '事件',
+    width: 180,
+  },
+  {
+    accessorKey: 'operator',
+    header: '操作人',
+    width: 120,
+  },
+  {
+    accessorKey: 'result',
+    header: '结果',
+    width: 120,
+  },
+  {
+    accessorKey: 'time',
+    header: '时间',
+    width: 180,
+  },
+]
+
+const data: LogRecord[] = [
+  { id: 'l-001', event: '创建项目', operator: '林舟', result: '成功', time: '2026-05-23 09:12' },
+  { id: 'l-002', event: '提交审批', operator: '陈念', result: '成功', time: '2026-05-23 09:26' },
+  { id: 'l-003', event: '同步成员', operator: '周衡', result: '成功', time: '2026-05-23 09:41' },
+  { id: 'l-004', event: '导出报表', operator: '沈若', result: '排队中', time: '2026-05-23 10:05' },
+  { id: 'l-005', event: '更新预算', operator: '梁一', result: '成功', time: '2026-05-23 10:18' },
+  { id: 'l-006', event: '变更负责人', operator: '许知', result: '成功', time: '2026-05-23 10:39' },
+  { id: 'l-007', event: '归档任务', operator: '林舟', result: '成功', time: '2026-05-23 11:02' },
+  { id: 'l-008', event: '生成快照', operator: '陈念', result: '成功', time: '2026-05-23 11:27' },
+  { id: 'l-009', event: '刷新缓存', operator: '周衡', result: '成功', time: '2026-05-23 11:48' },
+  { id: 'l-010', event: '权限校验', operator: '沈若', result: '成功', time: '2026-05-23 12:13' },
+  { id: 'l-011', event: '发布版本', operator: '梁一', result: '成功', time: '2026-05-23 12:45' },
+  { id: 'l-012', event: '关闭工单', operator: '许知', result: '成功', time: '2026-05-23 13:08' },
+]
+</script>
+
+<template>
+  <FaTable
+    class="h-80"
+    row-key="id"
+    :columns
+    :data
+  />
+</template>
diff --git a/packages/components/src/basic/table/_examples/_multiple-selection.vue b/packages/components/src/basic/table/_examples/_multiple-selection.vue
new file mode 100644
index 00000000..2da8da16
--- /dev/null
+++ b/packages/components/src/basic/table/_examples/_multiple-selection.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { TableColumn } from '../index.vue'
+import { computed, shallowRef } from 'vue'
+
+interface Member {
+  id: string
+  name: string
+  role: string
+  team: string
+  locked: boolean
+}
+
+const columns: TableColumn<Member>[] = [
+  {
+    type: 'selection',
+    fixed: 'left',
+    width: 50,
+    disabled: row => row.locked,
+  },
+  {
+    accessorKey: 'name',
+    header: '成员',
+  },
+  {
+    accessorKey: 'role',
+    header: '角色',
+    width: 120,
+  },
+  {
+    accessorKey: 'team',
+    header: '团队',
+    width: 140,
+  },
+  {
+    accessorKey: 'locked',
+    header: '锁定',
+    width: 120,
+  },
+]
+
+const data: Member[] = [
+  { id: 'm-001', name: '沈若', role: '管理员', team: '平台组', locked: false },
+  { id: 'm-002', name: '梁一', role: '开发者', team: '体验组', locked: false },
+  { id: 'm-003', name: '许知', role: '访客', team: '运营组', locked: true },
+  { id: 'm-004', name: '苏眠', role: '审计员', team: '风控组', locked: false },
+]
+
+const selectedRows = shallowRef<Member[]>([])
+
+const selectedNames = computed(() => selectedRows.value.map(item => item.name).join('、') || '暂无')
+
+function handleSelectionChange(rows: Member[]) {
+  selectedRows.value = rows
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <FaTable
+      selectable
+      multiple
+      row-key="id"
+      :columns
+      :data
+      @selection-change="handleSelectionChange"
+    />
+
+    <div class="text-sm text-muted-foreground px-4 py-3 rounded-md bg-muted">
+      已选中：{{ selectedNames }}
+    </div>
+  </div>
+</template>
diff --git a/packages/components/src/basic/table/_examples/_single-selection.vue b/packages/components/src/basic/table/_examples/_single-selection.vue
new file mode 100644
index 00000000..bf58f17c
--- /dev/null
+++ b/packages/components/src/basic/table/_examples/_single-selection.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { TableColumn } from '../index.vue'
+import { computed, shallowRef } from 'vue'
+
+interface Member {
+  id: string
+  name: string
+  role: string
+  team: string
+  enabled: boolean
+}
+
+const columns: TableColumn<Member>[] = [
+  {
+    type: 'selection',
+    fixed: 'left',
+    width: 50,
+    disabled: row => !row.enabled,
+  },
+  {
+    accessorKey: 'name',
+    header: '成员',
+  },
+  {
+    accessorKey: 'role',
+    header: '角色',
+    width: 120,
+  },
+  {
+    accessorKey: 'team',
+    header: '团队',
+    width: 140,
+  },
+  {
+    accessorKey: 'enabled',
+    header: '是否可选',
+    width: 120,
+  },
+]
+
+const data: Member[] = [
+  { id: 'm-001', name: '沈若', role: '管理员', team: '平台组', enabled: true },
+  { id: 'm-002', name: '梁一', role: '开发者', team: '体验组', enabled: true },
+  { id: 'm-003', name: '许知', role: '访客', team: '运营组', enabled: false },
+  { id: 'm-004', name: '苏眠', role: '审计员', team: '风控组', enabled: true },
+]
+
+const selectedRows = shallowRef<Member[]>([])
+
+const selectedName = computed(() => selectedRows.value[0]?.name || '暂无')
+
+function handleSelectionChange(rows: Member[]) {
+  selectedRows.value = rows
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <FaTable
+      selectable
+      row-key="id"
+      :columns
+      :data
+      @selection-change="handleSelectionChange"
+    />
+
+    <div class="text-sm text-muted-foreground px-4 py-3 rounded-md bg-muted">
+      当前选中：{{ selectedName }}
+    </div>
+  </div>
+</template>
diff --git a/packages/components/src/basic/table/_examples/_slot.vue b/packages/components/src/basic/table/_examples/_slot.vue
new file mode 100644
index 00000000..51f78752
--- /dev/null
+++ b/packages/components/src/basic/table/_examples/_slot.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import type { TableColumn } from '../index.vue'
+
+interface Product {
+  id: string
+  name: string
+  category: string
+  price: number
+  stock: number
+  status: 'available' | 'warning' | 'sold-out'
+}
+
+const columns: TableColumn<Product>[] = [
+  {
+    accessorKey: 'name',
+    header: '商品',
+    width: 220,
+  },
+  {
+    accessorKey: 'category',
+    header: '分类',
+    width: 120,
+  },
+  {
+    accessorKey: 'price',
+    header: '价格',
+    align: 'right',
+    width: 120,
+  },
+  {
+    accessorKey: 'stock',
+    header: '库存',
+    align: 'right',
+    width: 120,
+  },
+  {
+    accessorKey: 'status',
+    header: '状态',
+    width: 120,
+  },
+]
+
+const data: Product[] = [
+  { id: 'sku-001', name: '协作空间专业版', category: '软件', price: 1280, stock: 42, status: 'available' },
+  { id: 'sku-002', name: '团队数据大屏', category: '模板', price: 680, stock: 8, status: 'warning' },
+  { id: 'sku-003', name: '年度支持服务', category: '服务', price: 3600, stock: 0, status: 'sold-out' },
+]
+
+const statusMap: Record<Product['status'], { label: string, class: string }> = {
+  'available': {
+    label: '可售',
+    class: 'bg-success/10 text-success',
+  },
+  'warning': {
+    label: '低库存',
+    class: 'bg-warning/10 text-warning',
+  },
+  'sold-out': {
+    label: '售罄',
+    class: 'bg-muted text-muted-foreground',
+  },
+}
+
+function formatCurrency(value: number) {
+  return new Intl.NumberFormat('zh-CN', {
+    style: 'currency',
+    currency: 'CNY',
+    maximumFractionDigits: 0,
+  }).format(value)
+}
+</script>
+
+<template>
+  <FaTable row-key="id" :columns :data>
+    <template #header-name>
+      <div class="flex flex-col">
+        <span>商品</span>
+        <span class="text-xs text-muted-foreground font-normal">名称 / 编号</span>
+      </div>
+    </template>
+
+    <template #cell-name="{ row }">
+      <div class="font-medium">
+        {{ row.original.name }}
+      </div>
+      <div class="text-xs text-muted-foreground">
+        {{ row.original.id }}
+      </div>
+    </template>
+
+    <template #cell-price="{ value }">
+      {{ formatCurrency(Number(value)) }}
+    </template>
+
+    <template #cell-stock="{ value }">
+      <span class="tabular-nums">{{ value }}</span>
+    </template>
+
+    <template #cell-status="{ value }">
+      <span class="text-xs font-medium px-2 py-0.5 rounded-full inline-flex" :class="statusMap[value as Product['status']].class">
+        {{ statusMap[value as Product['status']].label }}
+      </span>
+    </template>
+  </FaTable>
+</template>
diff --git a/packages/components/src/basic/table/_examples/_sorting.vue b/packages/components/src/basic/table/_examples/_sorting.vue
new file mode 100644
index 00000000..f62dda9c
--- /dev/null
+++ b/packages/components/src/basic/table/_examples/_sorting.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import type { TableColumn, TableSortingState } from '../index.vue'
+import { computed, shallowRef } from 'vue'
+
+interface Task {
+  id: string
+  title: string
+  owner: string
+  priority: string
+  updatedAt: string
+}
+
+const columns: TableColumn<Task>[] = [
+  {
+    accessorKey: 'title',
+    header: '任务',
+  },
+  {
+    accessorKey: 'owner',
+    header: '负责人',
+  },
+  {
+    accessorKey: 'priority',
+    header: '优先级',
+    enableSorting: true,
+  },
+  {
+    accessorKey: 'updatedAt',
+    header: '更新时间',
+    enableSorting: true,
+  },
+]
+
+const data: Task[] = [
+  { id: 't-001', title: '完善组件文档', owner: '林舟', priority: '中', updatedAt: '2026-05-23' },
+  { id: 't-002', title: '同步设计变量', owner: '陈念', priority: '高', updatedAt: '2026-05-22' },
+  { id: 't-003', title: '整理示例数据', owner: '周衡', priority: '低', updatedAt: '2026-05-21' },
+  { id: 't-004', title: '回归交互状态', owner: '沈若', priority: '中', updatedAt: '2026-05-20' },
+]
+
+const priorityRank: Record<Task['priority'], number> = {
+  高: 3,
+  中: 2,
+  低: 1,
+}
+
+const sorting = shallowRef<TableSortingState>([])
+
+function getSortValue(row: Task, key: keyof Task) {
+  if (key === 'priority') {
+    return priorityRank[row.priority]
+  }
+
+  return row[key]
+}
+
+function compareSortValue(a: string | number, b: string | number) {
+  if (typeof a === 'number' && typeof b === 'number') {
+    return a - b
+  }
+
+  return String(a).localeCompare(String(b), 'zh-CN', { numeric: true })
+}
+
+const sortedData = computed(() => {
+  if (!sorting.value.length) {
+    return data
+  }
+
+  return [...data].sort((a, b) => {
+    for (const sort of sorting.value) {
+      const key = sort.id as keyof Task
+      const aVal = getSortValue(a, key)
+      const bVal = getSortValue(b, key)
+
+      if (aVal === bVal) {
+        continue
+      }
+
+      const result = compareSortValue(aVal, bVal)
+      return sort.desc ? -result : result
+    }
+
+    return 0
+  })
+})
+
+const sortingText = computed(() => {
+  if (!sorting.value.length) {
+    return '暂无排序'
+  }
+
+  return sorting.value.map(item => `${item.id}: ${item.desc ? '降序' : '升序'}`).join('，')
+})
+
+function handleSortingChange(value: TableSortingState) {
+  sorting.value = value
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <FaTable
+      sortable
+      row-key="id"
+      :sorting
+      :columns
+      :data="sortedData"
+      @sorting-change="handleSortingChange"
+    />
+
+    <div class="text-sm text-muted-foreground px-4 py-3 rounded-md bg-muted">
+      当前排序：{{ sortingText }}
+    </div>
+  </div>
+</template>
diff --git a/packages/components/src/basic/table/_examples/_stripe.vue b/packages/components/src/basic/table/_examples/_stripe.vue
new file mode 100644
index 00000000..6f381059
--- /dev/null
+++ b/packages/components/src/basic/table/_examples/_stripe.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { TableColumn } from '../index.vue'
+
+interface Ticket {
+  id: string
+  title: string
+  owner: string
+  priority: string
+  status: string
+  updatedAt: string
+}
+
+const columns: TableColumn<Ticket>[] = [
+  {
+    accessorKey: 'title',
+    header: '事项',
+    width: 220,
+  },
+  {
+    accessorKey: 'owner',
+    header: '负责人',
+    width: 120,
+  },
+  {
+    accessorKey: 'priority',
+    header: '优先级',
+    width: 120,
+  },
+  {
+    accessorKey: 'status',
+    header: '状态',
+    width: 120,
+  },
+  {
+    accessorKey: 'updatedAt',
+    header: '更新时间',
+    width: 160,
+  },
+]
+
+const data: Ticket[] = [
+  { id: 't-001', title: '补充表格文档', owner: '林舟', priority: '中', status: '进行中', updatedAt: '2026-05-23' },
+  { id: 't-002', title: '优化筛选体验', owner: '陈念', priority: '高', status: '待处理', updatedAt: '2026-05-22' },
+  { id: 't-003', title: '同步设计变量', owner: '周衡', priority: '低', status: '已完成', updatedAt: '2026-05-21' },
+  { id: 't-004', title: '检查固定列阴影', owner: '沈若', priority: '中', status: '进行中', updatedAt: '2026-05-20' },
+  { id: 't-005', title: '整理示例数据', owner: '梁一', priority: '低', status: '已完成', updatedAt: '2026-05-19' },
+  { id: 't-006', title: '回归行选择交互', owner: '许知', priority: '高', status: '待处理', updatedAt: '2026-05-18' },
+]
+</script>
+
+<template>
+  <FaTable stripe row-key="id" :columns :data />
+</template>
diff --git a/packages/components/src/basic/table/_examples/_toolbar.vue b/packages/components/src/basic/table/_examples/_toolbar.vue
new file mode 100644
index 00000000..fc5eade5
--- /dev/null
+++ b/packages/components/src/basic/table/_examples/_toolbar.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type { TableColumn } from '../index.vue'
+import FaButton from '../../../basic/button/index.vue'
+import FaIcon from '../../../basic/icon/index.vue'
+
+interface Task {
+  id: string
+  title: string
+  owner: string
+  status: string
+  updatedAt: string
+}
+
+const columns: TableColumn<Task>[] = [
+  {
+    accessorKey: 'title',
+    header: '任务',
+  },
+  {
+    accessorKey: 'owner',
+    header: '负责人',
+  },
+  {
+    accessorKey: 'status',
+    header: '状态',
+  },
+  {
+    accessorKey: 'updatedAt',
+    header: '更新时间',
+  },
+]
+
+const data: Task[] = [
+  { id: 't-001', title: '完善组件文档', owner: '林舟', status: '进行中', updatedAt: '2026-05-23' },
+  { id: 't-002', title: '同步设计变量', owner: '陈念', status: '待处理', updatedAt: '2026-05-22' },
+  { id: 't-003', title: '整理示例数据', owner: '周衡', status: '已完成', updatedAt: '2026-05-21' },
+  { id: 't-004', title: '回归交互状态', owner: '沈若', status: '进行中', updatedAt: '2026-05-20' },
+]
+</script>
+
+<template>
+  <FaTable :columns :data>
+    <template #toolbar="{ table }">
+      <FaButton size="sm">
+        <FaIcon name="i-lucide:plus" />
+        新增
+      </FaButton>
+      <FaButton variant="outline" size="sm">
+        <FaIcon name="i-lucide:refresh-cw" />
+        刷新
+      </FaButton>
+      <span class="text-sm text-muted-foreground">
+        共 {{ table.getRowModel().rows.length }} 条
+      </span>
+    </template>
+  </FaTable>
+</template>
diff --git a/packages/components/src/basic/table/_examples/_tree.vue b/packages/components/src/basic/table/_examples/_tree.vue
new file mode 100644
index 00000000..e2e13f3b
--- /dev/null
+++ b/packages/components/src/basic/table/_examples/_tree.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { TableColumn } from '../index.vue'
+
+interface Task {
+  id: string
+  title: string
+  owner: string
+  status: string
+  updatedAt: string
+  children?: Task[]
+}
+
+const columns: TableColumn<Task>[] = [
+  {
+    accessorKey: 'title',
+    header: '任务',
+  },
+  {
+    accessorKey: 'owner',
+    header: '负责人',
+    width: 120,
+  },
+  {
+    accessorKey: 'status',
+    header: '状态',
+    width: 120,
+  },
+  {
+    accessorKey: 'updatedAt',
+    header: '更新时间',
+    width: 160,
+  },
+]
+
+const data: Task[] = [
+  {
+    id: 't-001',
+    title: '组件能力建设',
+    owner: '林舟',
+    status: '进行中',
+    updatedAt: '2026-05-23',
+    children: [
+      { id: 't-001-1', title: '补充树型表格', owner: '林舟', status: '进行中', updatedAt: '2026-05-23' },
+      { id: 't-001-2', title: '完善列显示控制', owner: '陈念', status: '待处理', updatedAt: '2026-05-22' },
+    ],
+  },
+  {
+    id: 't-002',
+    title: '设计变量同步',
+    owner: '陈念',
+    status: '待处理',
+    updatedAt: '2026-05-22',
+    children: [
+      {
+        id: 't-002-1',
+        title: '整理主题色',
+        owner: '周衡',
+        status: '已完成',
+        updatedAt: '2026-05-21',
+        children: [
+          { id: 't-002-1-1', title: '校验暗色模式', owner: '沈若', status: '已完成', updatedAt: '2026-05-20' },
+        ],
+      },
+    ],
+  },
+  { id: 't-003', title: '回归交互状态', owner: '沈若', status: '进行中', updatedAt: '2026-05-20' },
+]
+</script>
+
+<template>
+  <FaTable tree row-key="id" :columns :data />
+</template>
diff --git a/packages/components/src/basic/table/_examples/index.ts b/packages/components/src/basic/table/_examples/index.ts
new file mode 100644
index 00000000..7be827cf
--- /dev/null
+++ b/packages/components/src/basic/table/_examples/index.ts
@@ -0,0 +1,94 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Border from './_border.vue'
+import BorderRaw from './_border.vue?raw'
+import ColumnVisibility from './_column-visibility.vue'
+import ColumnVisibilityRaw from './_column-visibility.vue?raw'
+import CustomColumn from './_custom-column.vue'
+import CustomColumnRaw from './_custom-column.vue?raw'
+import FixedColumn from './_fixed-column.vue'
+import FixedColumnRaw from './_fixed-column.vue?raw'
+import FixedHeight from './_fixed-height.vue'
+import FixedHeightRaw from './_fixed-height.vue?raw'
+import MultipleSelection from './_multiple-selection.vue'
+import MultipleSelectionRaw from './_multiple-selection.vue?raw'
+import SingleSelection from './_single-selection.vue'
+import SingleSelectionRaw from './_single-selection.vue?raw'
+import Slot from './_slot.vue'
+import SlotRaw from './_slot.vue?raw'
+import Sorting from './_sorting.vue'
+import SortingRaw from './_sorting.vue?raw'
+import Stripe from './_stripe.vue'
+import StripeRaw from './_stripe.vue?raw'
+import Toolbar from './_toolbar.vue'
+import ToolbarRaw from './_toolbar.vue?raw'
+import Tree from './_tree.vue'
+import TreeRaw from './_tree.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '固定高度',
+    component: FixedHeight,
+    componentRaw: FixedHeightRaw,
+  },
+  {
+    title: '工具栏插槽',
+    component: Toolbar,
+    componentRaw: ToolbarRaw,
+  },
+  {
+    title: '固定列',
+    component: FixedColumn,
+    componentRaw: FixedColumnRaw,
+  },
+  {
+    title: '自定义列',
+    component: CustomColumn,
+    componentRaw: CustomColumnRaw,
+  },
+  {
+    title: '树型数据',
+    component: Tree,
+    componentRaw: TreeRaw,
+  },
+  {
+    title: '自定义插槽',
+    component: Slot,
+    componentRaw: SlotRaw,
+  },
+  {
+    title: '排序',
+    component: Sorting,
+    componentRaw: SortingRaw,
+  },
+  {
+    title: '行选择 - 单选',
+    component: SingleSelection,
+    componentRaw: SingleSelectionRaw,
+  },
+  {
+    title: '行选择 - 多选',
+    component: MultipleSelection,
+    componentRaw: MultipleSelectionRaw,
+  },
+  {
+    title: '斑马纹',
+    component: Stripe,
+    componentRaw: StripeRaw,
+  },
+  {
+    title: '边框',
+    component: Border,
+    componentRaw: BorderRaw,
+  },
+  {
+    title: '列可见性',
+    component: ColumnVisibility,
+    componentRaw: ColumnVisibilityRaw,
+  },
+]
diff --git a/packages/components/src/basic/table/index.vue b/packages/components/src/basic/table/index.vue
new file mode 100644
index 00000000..3a1ec689
--- /dev/null
+++ b/packages/components/src/basic/table/index.vue
@@ -0,0 +1,1135 @@
+<script lang="ts">
+import type {
+  Cell,
+  CellContext,
+  Column,
+  ColumnDef,
+  ColumnPinningState,
+  DisplayColumnDef,
+  ExpandedState,
+  Header,
+  HeaderContext,
+  Row,
+  RowData,
+  RowSelectionState,
+  SortingState,
+  TableOptions,
+  Table as TanStackTable,
+  Updater,
+  VisibilityState,
+} from '@tanstack/vue-table'
+import type { CSSProperties, HTMLAttributes } from 'vue'
+import {
+  FlexRender,
+  getCoreRowModel,
+  getExpandedRowModel,
+  isFunction,
+  useVueTable,
+} from '@tanstack/vue-table'
+import { computed, ref, watch } from 'vue'
+import { cn } from '#utils'
+import Button from '../../basic/button/index.vue'
+import { Checkbox } from '../../basic/checkbox/checkbox'
+import Dropdown from '../../basic/dropdown/index.vue'
+import Icon from '../../basic/icon/index.vue'
+import { RadioGroup, RadioGroupItem } from '../../basic/radio-group/radio-group'
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableEmpty,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from './table'
+import { valueUpdater } from './table/utils'
+
+const SELECTION_COLUMN_ID = '__fa_table_selection__'
+const TABLE_HEADER_ROW_HEIGHT = 40
+
+type ColumnSlotName = `cell-${string}` | `header-${string}` | `footer-${string}`
+type TableSlots<TData extends RowData> = {
+  caption?: () => any
+  empty?: (props: TableEmptySlotProps<TData>) => any
+  toolbar?: (props: TableToolbarSlotProps<TData>) => any
+} & {
+  [key: `cell-${string}`]: ((props: TableCellSlotProps<TData, any>) => any) | undefined
+} & {
+  [key: `header-${string}`]: ((props: TableHeaderSlotProps<TData, any>) => any) | undefined
+} & {
+  [key: `footer-${string}`]: ((props: TableFooterSlotProps<TData, any>) => any) | undefined
+}
+type ColumnClass<TContext> = HTMLAttributes['class'] | ((context: TContext) => HTMLAttributes['class'])
+type RowClass<TData extends RowData> = HTMLAttributes['class'] | ((row: Row<TData>) => HTMLAttributes['class'])
+type RowKey<TData extends RowData> = keyof TData | string | ((row: TData, index: number) => string | number)
+
+export type TableAlign = 'left' | 'center' | 'right'
+export type TableColumnFixed = 'left' | 'right'
+export type TableSelectionDisabled<TData extends RowData = RowData> = (row: TData, index: number) => boolean
+export type TableSortingState = SortingState
+export type TableExpandedState = ExpandedState
+
+interface TableColumnOptions<TData extends RowData = RowData, TValue = unknown> {
+  align?: TableAlign
+  cellClass?: ColumnClass<CellContext<TData, TValue>>
+  class?: HTMLAttributes['class']
+  fixed?: boolean | TableColumnFixed
+  headerClass?: ColumnClass<HeaderContext<TData, TValue>>
+  label?: string
+  maxWidth?: number | string
+  minWidth?: number | string
+  title?: string
+  width?: number | string
+}
+
+export type TableSelectionColumn<TData extends RowData = RowData>
+  = Partial<DisplayColumnDef<TData, unknown>>
+    & TableColumnOptions<TData, unknown>
+    & {
+      type: 'selection'
+      disabled?: TableSelectionDisabled<TData>
+      columns?: never
+    }
+
+export type TableColumn<TData extends RowData = RowData, TValue = unknown>
+  = | (ColumnDef<TData, TValue> & TableColumnOptions<TData, TValue> & {
+    type?: never
+    columns?: TableColumn<TData, any>[]
+  })
+  | TableSelectionColumn<TData>
+
+export interface TableCellSlotProps<TData extends RowData = RowData, TValue = unknown> {
+  cell: Cell<TData, TValue>
+  column: Column<TData, TValue>
+  index: number
+  row: Row<TData>
+  table: TanStackTable<TData>
+  value: TValue
+}
+
+export interface TableHeaderSlotProps<TData extends RowData = RowData, TValue = unknown> {
+  column: Column<TData, TValue>
+  header: Header<TData, TValue>
+  table: TanStackTable<TData>
+}
+
+export interface TableFooterSlotProps<TData extends RowData = RowData, TValue = unknown> {
+  column: Column<TData, TValue>
+  header: Header<TData, TValue>
+  table: TanStackTable<TData>
+}
+
+export interface TableEmptySlotProps<TData extends RowData = RowData> {
+  table: TanStackTable<TData>
+}
+
+export interface TableToolbarSlotProps<TData extends RowData = RowData> {
+  table: TanStackTable<TData>
+}
+
+export interface TableProps<TData extends RowData = RowData> {
+  border?: boolean
+  bodyClass?: HTMLAttributes['class']
+  caption?: string
+  class?: HTMLAttributes['class']
+  columnVisibility?: boolean
+  columns: TableColumn<TData, any>[]
+  data: TData[]
+  defaultExpanded?: ExpandedState
+  defaultSorting?: SortingState
+  emptyText?: string
+  enableMultiSort?: boolean
+  enableSortingRemoval?: boolean
+  expanded?: ExpandedState
+  getRowId?: TableOptions<TData>['getRowId']
+  getSubRows?: TableOptions<TData>['getSubRows']
+  headerClass?: HTMLAttributes['class']
+  headerRowClass?: HTMLAttributes['class']
+  indentSize?: number
+  manualExpanding?: boolean
+  multiple?: boolean
+  rowClass?: RowClass<TData>
+  rowKey?: RowKey<TData>
+  selectable?: boolean
+  selectionColumnClass?: HTMLAttributes['class']
+  sortable?: boolean
+  sorting?: SortingState
+  sortDescFirst?: boolean
+  stripe?: boolean
+  tableClass?: HTMLAttributes['class']
+  tableRootClass?: HTMLAttributes['class']
+  tree?: boolean
+}
+</script>
+
+<script setup lang="ts" generic="TData extends RowData = RowData">
+defineOptions({
+  name: 'BuiltInTable',
+})
+
+const props = withDefaults(defineProps<TableProps<TData>>(), {
+  border: false,
+  caption: undefined,
+  columnVisibility: false,
+  defaultExpanded: undefined,
+  enableMultiSort: true,
+  enableSortingRemoval: true,
+  expanded: undefined,
+  emptyText: '暂无数据',
+  indentSize: 20,
+  manualExpanding: false,
+  multiple: false,
+  selectable: false,
+  sortable: false,
+  sortDescFirst: true,
+  stripe: false,
+  tree: false,
+})
+
+const emit = defineEmits<{
+  'expandedChange': [expanded: ExpandedState, table: TanStackTable<TData>]
+  'rowClick': [row: TData, index: number, event: MouseEvent]
+  'selectionChange': [rows: TData[], rowSelection: RowSelectionState]
+  'sortingChange': [sorting: SortingState, table: TanStackTable<TData>]
+  'update:expanded': [expanded: ExpandedState]
+}>()
+
+const slots = defineSlots<TableSlots<TData>>()
+
+const rowSelection = ref<RowSelectionState>({})
+const columnVisibilityState = ref<VisibilityState>({})
+const sortingState = ref<SortingState>(props.sorting ?? props.defaultSorting ?? [])
+const expandedState = ref<ExpandedState>(props.expanded ?? props.defaultExpanded ?? {})
+const isSortingControlled = computed(() => props.sorting !== undefined)
+const isExpandedControlled = computed(() => props.expanded !== undefined)
+
+function isSelectionColumnDef(column: TableColumn<TData, any>): column is TableSelectionColumn<TData> {
+  return column.type === 'selection'
+}
+
+function normalizeFixed(value?: boolean | TableColumnFixed): TableColumnFixed | undefined {
+  if (value === true) {
+    return 'left'
+  }
+
+  if (value === 'left' || value === 'right') {
+    return value
+  }
+
+  return undefined
+}
+
+function parseNumericWidth(width?: number | string) {
+  if (typeof width === 'number') {
+    return width
+  }
+
+  if (typeof width === 'string') {
+    const matched = width.trim().match(/^(\d+(?:\.\d+)?)px$/)
+    return matched ? Number(matched[1]) : undefined
+  }
+
+  return undefined
+}
+
+function getColumnId(column: TableColumn<TData, any>): string | undefined {
+  if (isSelectionColumnDef(column)) {
+    return column.id ? String(column.id) : SELECTION_COLUMN_ID
+  }
+
+  if (column.id) {
+    return String(column.id)
+  }
+
+  if ('accessorKey' in column && column.accessorKey) {
+    return String(column.accessorKey).replaceAll('.', '_')
+  }
+
+  if (typeof column.header === 'string') {
+    return column.header
+  }
+
+  return undefined
+}
+
+function normalizeColumn(column: TableColumn<TData, any>): TableColumn<TData, any> {
+  const normalized = { ...column }
+
+  if (isSelectionColumnDef(normalized)) {
+    normalized.id ??= SELECTION_COLUMN_ID
+    normalized.header ??= ''
+    normalized.cell ??= ''
+    normalized.align ??= 'center'
+    normalized.enableHiding ??= false
+    normalized.enableSorting ??= false
+    normalized.size ??= parseNumericWidth(normalized.width) ?? 40
+    normalized.minSize ??= parseNumericWidth(normalized.minWidth)
+    normalized.maxSize ??= parseNumericWidth(normalized.maxWidth)
+    normalized.width ??= normalized.size
+
+    return normalized
+  }
+
+  normalized.header ??= normalized.label ?? normalized.title
+  normalized.enableSorting ??= false
+  normalized.size ??= parseNumericWidth(normalized.width)
+  normalized.minSize ??= parseNumericWidth(normalized.minWidth)
+  normalized.maxSize ??= parseNumericWidth(normalized.maxWidth)
+
+  if (normalized.columns?.length) {
+    normalized.columns = normalized.columns.map(item => normalizeColumn(item))
+  }
+
+  return normalized
+}
+
+const normalizedColumns = computed<TableColumn<TData, any>[]>(() => props.columns.map(column => normalizeColumn(column)))
+
+const resolvedColumns = computed<ColumnDef<TData, any>[]>(() => normalizedColumns.value as ColumnDef<TData, any>[])
+
+function findSelectionColumn(columns: TableColumn<TData, any>[]): TableSelectionColumn<TData> | undefined {
+  for (const column of columns) {
+    if (isSelectionColumnDef(column)) {
+      return column
+    }
+
+    if (column.columns?.length) {
+      const selectionColumn = findSelectionColumn(column.columns)
+      if (selectionColumn) {
+        return selectionColumn
+      }
+    }
+  }
+}
+
+const selectionColumnDef = computed(() => findSelectionColumn(normalizedColumns.value))
+
+function getColumnPinningState(columns: TableColumn<TData, any>[]) {
+  const left = new Set<string>()
+  const right = new Set<string>()
+
+  function collect(items: TableColumn<TData, any>[], inheritedFixed?: TableColumnFixed) {
+    items.forEach((column) => {
+      const fixed = normalizeFixed(column.fixed) ?? inheritedFixed
+
+      if (column.columns?.length) {
+        collect(column.columns, fixed)
+        return
+      }
+
+      const columnId = getColumnId(column)
+      if (!columnId || !fixed) {
+        return
+      }
+
+      if (fixed === 'left') {
+        left.add(columnId)
+        right.delete(columnId)
+      }
+      else {
+        right.add(columnId)
+        left.delete(columnId)
+      }
+    })
+  }
+
+  collect(columns)
+
+  return {
+    left: [...left],
+    right: [...right],
+  } satisfies ColumnPinningState
+}
+
+const columnPinning = computed<ColumnPinningState>(() => getColumnPinningState(resolvedColumns.value as TableColumn<TData, any>[]))
+
+function resolveRowId(row: TData, index: number, parent?: Row<TData>): string {
+  if (props.getRowId) {
+    return props.getRowId(row, index, parent)
+  }
+
+  if (typeof props.rowKey === 'function') {
+    return String(props.rowKey(row, index))
+  }
+
+  if (props.rowKey) {
+    const value = (row as Record<string, unknown>)[String(props.rowKey)]
+    if (value != null) {
+      return String(value)
+    }
+  }
+
+  return parent ? `${parent.id}.${index}` : String(index)
+}
+
+function resolveSubRows(row: TData, index: number): TData[] | undefined {
+  if (!props.tree) {
+    return undefined
+  }
+
+  if (props.getSubRows) {
+    return props.getSubRows(row, index)
+  }
+
+  const children = (row as Record<string, unknown>).children
+  return Array.isArray(children) ? children as TData[] : undefined
+}
+
+function isRowSelectionDisabled(row: Row<TData>) {
+  return selectionColumnDef.value?.disabled?.(row.original, row.index) ?? false
+}
+
+function syncSingleRowSelection() {
+  if (props.multiple) {
+    return
+  }
+
+  const selectedIds = Object.keys(rowSelection.value).filter(id => rowSelection.value[id])
+  if (selectedIds.length <= 1) {
+    return
+  }
+
+  const selectedId = selectedIds.at(-1)
+  rowSelection.value = selectedId ? { [selectedId]: true } : {}
+}
+
+function handleRowSelectionChange(updaterOrValue: Updater<RowSelectionState>) {
+  valueUpdater(updaterOrValue, rowSelection)
+  syncSingleRowSelection()
+}
+
+function handleColumnVisibilityChange(updaterOrValue: Updater<VisibilityState>) {
+  valueUpdater(updaterOrValue, columnVisibilityState)
+}
+
+function handleSortingChange(updaterOrValue: Updater<SortingState>) {
+  const nextSorting = isFunction(updaterOrValue) ? updaterOrValue(sortingState.value) : updaterOrValue
+
+  if (!isSortingControlled.value) {
+    sortingState.value = nextSorting
+  }
+
+  emit('sortingChange', nextSorting, table)
+}
+
+function handleExpandedChange(updaterOrValue: Updater<ExpandedState>) {
+  const nextExpanded = isFunction(updaterOrValue) ? updaterOrValue(expandedState.value) : updaterOrValue
+
+  if (!isExpandedControlled.value) {
+    expandedState.value = nextExpanded
+  }
+
+  emit('update:expanded', nextExpanded)
+  emit('expandedChange', nextExpanded, table)
+}
+
+const table = useVueTable<TData>({
+  data: computed(() => props.data),
+  get enableMultiSort() {
+    return props.enableMultiSort
+  },
+  get enableMultiRowSelection() {
+    return props.multiple
+  },
+  get enableSorting() {
+    return props.sortable
+  },
+  get enableSortingRemoval() {
+    return props.enableSortingRemoval
+  },
+  enableRowSelection: row => props.selectable && Boolean(selectionColumnDef.value) && !isRowSelectionDisabled(row),
+  get columns() {
+    return resolvedColumns.value
+  },
+  get rowCount() {
+    return props.data.length
+  },
+  getCoreRowModel: getCoreRowModel(),
+  getExpandedRowModel: getExpandedRowModel(),
+  getRowId: resolveRowId,
+  getSubRows: resolveSubRows,
+  get manualExpanding() {
+    return props.manualExpanding
+  },
+  manualSorting: true,
+  onColumnVisibilityChange: handleColumnVisibilityChange,
+  onRowSelectionChange: handleRowSelectionChange,
+  onExpandedChange: handleExpandedChange,
+  onSortingChange: handleSortingChange,
+  get sortDescFirst() {
+    return props.sortDescFirst
+  },
+  state: {
+    get columnVisibility() {
+      return columnVisibilityState.value
+    },
+    get columnPinning() {
+      return columnPinning.value
+    },
+    get rowSelection() {
+      return rowSelection.value
+    },
+    get expanded() {
+      return expandedState.value
+    },
+    get sorting() {
+      return sortingState.value
+    },
+  },
+})
+
+function getTableRows(_data: TData[], _rowSelection: RowSelectionState, _columnVisibility: VisibilityState, _sorting: SortingState) {
+  return table.getRowModel().rows
+}
+
+const selectedRows = computed(() => table.getSelectedRowModel().rows.map(row => row.original))
+const tableRows = computed(() => getTableRows(props.data, rowSelection.value, columnVisibilityState.value, sortingState.value))
+const visibleColumnCount = computed(() => {
+  void columnVisibilityState.value
+  return Math.max(table.getVisibleLeafColumns().length, 1)
+})
+const isSingleSelectionMode = computed(() => props.selectable && !props.multiple && Boolean(selectionColumnDef.value))
+const singleSelectedRowId = computed(() => Object.keys(rowSelection.value).find(id => rowSelection.value[id]))
+const tableRootComponent = computed(() => isSingleSelectionMode.value ? RadioGroup : 'div')
+const tableRootModelValue = computed(() => isSingleSelectionMode.value ? singleSelectedRowId.value : undefined)
+const stripeInteractionClass = computed(() => props.stripe ? '[&:hover>td]:bg-muted/50 [&[data-state=selected]>td]:bg-muted' : undefined)
+const hasToolbar = computed(() => props.columnVisibility || Boolean(slots.toolbar))
+const columnVisibilityColumns = computed(() => {
+  void resolvedColumns.value
+  void columnVisibilityState.value
+
+  return table.getAllLeafColumns().filter(column => column.getCanHide())
+})
+const columnVisibilityMenuItems = computed(() => [
+  columnVisibilityColumns.value.length
+    ? columnVisibilityColumns.value.map(column => ({
+        type: 'checkbox' as const,
+        label: getColumnVisibilityLabel(column),
+        checked: column.getIsVisible(),
+        handle: (checked?: boolean) => column.toggleVisibility(checked),
+      }))
+    : [],
+])
+
+watch(
+  () => props.multiple,
+  () => {
+    syncSingleRowSelection()
+  },
+  { immediate: true },
+)
+
+watch(
+  () => props.sorting,
+  (sorting) => {
+    if (sorting !== undefined) {
+      sortingState.value = sorting
+    }
+  },
+  { deep: true },
+)
+
+watch(
+  () => props.expanded,
+  (expanded) => {
+    if (expanded !== undefined) {
+      expandedState.value = expanded
+    }
+  },
+  { deep: true },
+)
+
+watch(
+  [rowSelection, () => props.data],
+  () => {
+    emit('selectionChange', selectedRows.value, rowSelection.value)
+  },
+  { deep: true },
+)
+
+function isSelectionColumn(column: Column<TData, unknown>) {
+  return isSelectionColumnDef(column.columnDef as TableColumn<TData, unknown>)
+}
+
+function getColumnSlotName(prefix: 'cell' | 'header' | 'footer', columnId: string): ColumnSlotName {
+  return `${prefix}-${columnId}`
+}
+
+function getHeaderSlotName(header: Header<TData, unknown>) {
+  return getColumnSlotName('header', header.column.id)
+}
+
+function getCellSlotName(cell: Cell<TData, unknown>) {
+  return getColumnSlotName('cell', cell.column.id)
+}
+
+function hasColumnSlot(name: ColumnSlotName) {
+  return Boolean(slots[name])
+}
+
+function getColumnVisibilityLabel(column: Column<TData, unknown>) {
+  const columnDef = column.columnDef as TableColumn<TData, unknown>
+
+  if (columnDef.label) {
+    return columnDef.label
+  }
+
+  if (columnDef.title) {
+    return columnDef.title
+  }
+
+  if (typeof columnDef.header === 'string' && columnDef.header) {
+    return columnDef.header
+  }
+
+  return column.id
+}
+
+function getHeaderSlotProps(header: Header<TData, unknown>): any {
+  return {
+    column: header.column,
+    header,
+    table,
+  }
+}
+
+function getHeaderAriaSort(header: Header<TData, unknown>) {
+  if (!props.sortable || !header.column.getCanSort()) {
+    return undefined
+  }
+
+  const sorted = header.column.getIsSorted()
+
+  if (sorted === 'asc') {
+    return 'ascending'
+  }
+
+  if (sorted === 'desc') {
+    return 'descending'
+  }
+
+  return undefined
+}
+
+function getCellSlotProps(cell: Cell<TData, unknown>, row: Row<TData>): any {
+  return {
+    cell,
+    column: cell.column,
+    index: row.index,
+    row,
+    table,
+    value: cell.getValue(),
+  }
+}
+
+function shouldRenderTreeCell(cell: Cell<TData, unknown>, row: Row<TData>) {
+  if (!props.tree || isSelectionColumn(cell.column)) {
+    return false
+  }
+
+  return row.getVisibleCells().find(item => !isSelectionColumn(item.column))?.id === cell.id
+}
+
+function getTreeCellIndentStyle(row: Row<TData>): CSSProperties {
+  return {
+    paddingLeft: `${row.depth * props.indentSize}px`,
+  }
+}
+
+function getTreeToggleIconName(row: Row<TData>) {
+  return row.getIsExpanded() ? 'i-lucide:chevron-down' : 'i-lucide:chevron-right'
+}
+
+function handleToggleRowExpanded(row: Row<TData>) {
+  row.toggleExpanded()
+}
+
+function getAlignClass(align?: TableAlign) {
+  if (align === 'center') {
+    return 'text-center'
+  }
+
+  if (align === 'right') {
+    return 'text-right'
+  }
+
+  return undefined
+}
+
+function resolveSize(size?: number | string) {
+  if (size == null || size === '') {
+    return undefined
+  }
+
+  return typeof size === 'number' ? `${size}px` : size
+}
+
+function getColumnStyle(column: Column<TData, unknown>): CSSProperties | undefined {
+  const columnDef = column.columnDef as TableColumn<TData, unknown>
+  const pin = column.getIsPinned()
+  const width = resolveSize(columnDef.width ?? (pin ? column.getSize() : columnDef.size && columnDef.size !== 150 ? columnDef.size : undefined))
+  const minSize = columnDef.minSize && columnDef.minSize !== 20 ? columnDef.minSize : undefined
+  const maxSize = columnDef.maxSize && columnDef.maxSize !== Number.MAX_SAFE_INTEGER ? columnDef.maxSize : undefined
+  const minWidth = resolveSize(columnDef.minWidth ?? minSize)
+  const maxWidth = resolveSize(columnDef.maxWidth ?? maxSize)
+  const style: CSSProperties = {}
+
+  if (width) {
+    style.width = width
+    style.minWidth = minWidth ?? width
+  }
+  else if (minWidth) {
+    style.minWidth = minWidth
+  }
+
+  if (maxWidth) {
+    style.maxWidth = maxWidth
+  }
+
+  if (pin === 'left') {
+    style.left = `${column.getStart('left')}px`
+    style.position = 'sticky'
+  }
+  else if (pin === 'right') {
+    style.position = 'sticky'
+    style.right = `${column.getAfter('right')}px`
+  }
+
+  if (!Object.keys(style).length) {
+    return undefined
+  }
+
+  return style
+}
+
+function resolveColumnClass<TContext>(
+  columnClass: ColumnClass<TContext> | undefined,
+  context: TContext,
+) {
+  return typeof columnClass === 'function' ? columnClass(context) : columnClass
+}
+
+function getHeaderClass(header: Header<TData, unknown>) {
+  const columnDef = header.column.columnDef as TableColumn<TData, unknown>
+  return cn(
+    'sticky z-2 bg-muted text-muted-foreground after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-border after:content-empty',
+    getAlignClass(columnDef.align),
+    getHeaderBorderClass(header),
+    getPinnedColumnClass(header.column, 'header'),
+    header.column.getCanSort() && 'cursor-pointer select-none',
+    getSortedColumnClass(header.column, 'header'),
+    columnDef.class,
+    resolveColumnClass(columnDef.headerClass, header.getContext()),
+    isSelectionColumn(header.column) && cn('px-3', props.selectionColumnClass),
+  )
+}
+
+function getHeaderStyle(header: Header<TData, unknown>, headerGroupIndex: number): CSSProperties {
+  return {
+    ...getColumnStyle(header.column),
+    top: `${headerGroupIndex * TABLE_HEADER_ROW_HEIGHT}px`,
+  }
+}
+
+function getHeaderContentClass(header: Header<TData, unknown>) {
+  const columnDef = header.column.columnDef as TableColumn<TData, unknown>
+
+  return cn(
+    'inline-flex w-full items-center gap-1.5',
+    columnDef.align === 'center' && 'justify-center',
+    columnDef.align === 'right' && 'justify-end',
+  )
+}
+
+function getCellClass(cell: Cell<TData, unknown>) {
+  const columnDef = cell.column.columnDef as TableColumn<TData, unknown>
+  return cn(
+    getAlignClass(columnDef.align),
+    getCellBorderClass(cell),
+    getPinnedColumnClass(cell.column, 'cell'),
+    getSortedColumnClass(cell.column, 'cell'),
+    columnDef.class,
+    resolveColumnClass(columnDef.cellClass, cell.getContext()),
+    isSelectionColumn(cell.column) && cn('px-3', props.selectionColumnClass),
+  )
+}
+
+function getSortedColumnClass(column: Column<TData, unknown>, area: 'cell' | 'header') {
+  if (!props.sortable || !column.getIsSorted()) {
+    return undefined
+  }
+
+  return area === 'header'
+    ? '!bg-primary/20 text-foreground'
+    : '!bg-primary/10'
+}
+
+function getPinnedColumnClass(column: Column<TData, unknown>, area: 'cell' | 'header') {
+  const pin = column.getIsPinned()
+
+  if (!pin) {
+    return undefined
+  }
+
+  return cn(
+    'sticky',
+    area === 'header' ? 'z-3' : 'z-1',
+    area === 'cell' && 'bg-background transition-colors',
+    pin === 'left' && column.getIsLastColumn('left') && 'shadow-[4px_0_6px_-4px_rgb(0_0_0/0.18)]',
+    pin === 'right' && column.getIsFirstColumn('right') && 'shadow-[-4px_0_6px_-4px_rgb(0_0_0/0.18)]',
+  )
+}
+
+function isLastVisibleLeafColumn(column: Column<TData, unknown>) {
+  return table.getVisibleLeafColumns().at(-1)?.id === column.id
+}
+
+function getNextVisibleLeafColumn(column: Column<TData, unknown>) {
+  const columns = table.getVisibleLeafColumns()
+  const columnIndex = columns.findIndex(item => item.id === column.id)
+  return columnIndex === -1 ? undefined : columns[columnIndex + 1]
+}
+
+function getVisiblePinnedColumns(pin: TableColumnFixed) {
+  return table.getVisibleLeafColumns().filter(column => column.getIsPinned() === pin)
+}
+
+function isFirstVisiblePinnedColumn(column: Column<TData, unknown>, pin: TableColumnFixed) {
+  return getVisiblePinnedColumns(pin).at(0)?.id === column.id
+}
+
+function isLastVisiblePinnedColumn(column: Column<TData, unknown>, pin: TableColumnFixed) {
+  return getVisiblePinnedColumns(pin).at(-1)?.id === column.id
+}
+
+function getHeaderBorderClass(header: Header<TData, unknown>) {
+  if (!props.border) {
+    return undefined
+  }
+
+  const leafColumns = header.column.getLeafColumns()
+  const lastLeafColumn = leafColumns.at(-1) ?? header.column
+  const pin = lastLeafColumn.getIsPinned()
+
+  if (pin === 'left') {
+    return cn(
+      !isFirstVisiblePinnedColumn(lastLeafColumn, 'left')
+      && 'before:pointer-events-none before:absolute before:inset-y-0 before:left-0 before:z-1 before:w-px before:bg-border before:content-empty',
+      isLastVisiblePinnedColumn(lastLeafColumn, 'left') && !isLastVisibleLeafColumn(lastLeafColumn)
+      && 'bg-[linear-gradient(to_left,oklch(var(--border))_1px,transparent_1px)]',
+    )
+  }
+
+  if (pin === 'right') {
+    return 'before:pointer-events-none before:absolute before:inset-y-0 before:left-0 before:z-1 before:w-px before:bg-border before:content-empty'
+  }
+
+  if (getNextVisibleLeafColumn(lastLeafColumn)?.getIsPinned() === 'right') {
+    return undefined
+  }
+
+  return isLastVisibleLeafColumn(lastLeafColumn) ? undefined : 'border-r'
+}
+
+function getCellBorderClass(cell: Cell<TData, unknown>) {
+  if (!props.border) {
+    return undefined
+  }
+
+  const pin = cell.column.getIsPinned()
+
+  if (pin === 'left') {
+    return cn(
+      !isFirstVisiblePinnedColumn(cell.column, 'left')
+      && 'before:pointer-events-none before:absolute before:inset-y-0 before:left-0 before:z-1 before:w-px before:bg-border before:content-empty',
+      isLastVisiblePinnedColumn(cell.column, 'left') && !isLastVisibleLeafColumn(cell.column)
+      && 'after:pointer-events-none after:absolute after:inset-y-0 after:right-0 after:z-1 after:w-px after:bg-border after:content-empty',
+    )
+  }
+
+  if (pin === 'right') {
+    return 'after:pointer-events-none after:absolute after:inset-y-0 after:left-0 after:z-1 after:w-px after:bg-border after:content-empty'
+  }
+
+  if (getNextVisibleLeafColumn(cell.column)?.getIsPinned() === 'right') {
+    return undefined
+  }
+
+  return isLastVisibleLeafColumn(cell.column) ? undefined : 'border-r'
+}
+
+function getRowClass(row: Row<TData>, rowIndex: number) {
+  return cn(
+    'bg-background',
+    '[&:hover>td[data-pinned]]:bg-muted [&[data-state=selected]>td[data-pinned]]:bg-muted',
+    props.stripe && rowIndex % 2 === 1 && '[&>td]:bg-muted/50',
+    props.stripe && rowIndex % 2 === 1 && '[&>td[data-pinned]]:bg-muted',
+    stripeInteractionClass.value,
+    typeof props.rowClass === 'function' ? props.rowClass(row) : props.rowClass,
+  )
+}
+
+function getHeaderCheckboxValue() {
+  if (table.getIsAllRowsSelected()) {
+    return true
+  }
+
+  if (table.getIsSomeRowsSelected()) {
+    return 'indeterminate'
+  }
+
+  return false
+}
+
+function shouldRenderSelectionHeader(header: Header<TData, unknown>) {
+  return props.selectable && props.multiple && isSelectionColumn(header.column) && !header.column.columnDef.header
+}
+
+function getSortIconName(header: Header<TData, unknown>) {
+  const sorted = header.column.getIsSorted()
+
+  if (sorted === 'desc') {
+    return 'i-lucide:arrow-down'
+  }
+
+  if (sorted === 'asc') {
+    return 'i-lucide:arrow-up'
+  }
+
+  return 'i-lucide:arrow-up-down'
+}
+
+function getSortIconClass(header: Header<TData, unknown>) {
+  return cn(
+    'shrink-0 size-3.5',
+    header.column.getIsSorted() ? 'text-primary' : 'text-muted-foreground/80',
+  )
+}
+
+function shouldRenderSortIndex(header: Header<TData, unknown>) {
+  return props.enableMultiSort && header.column.getSortIndex() > -1 && sortingState.value.length > 1
+}
+
+function getSortIndexLabel(header: Header<TData, unknown>) {
+  return header.column.getSortIndex() + 1
+}
+
+function handleHeaderClick(header: Header<TData, unknown>, event: MouseEvent) {
+  if (!props.sortable || !header.column.getCanSort()) {
+    return
+  }
+
+  header.column.getToggleSortingHandler()?.(event)
+}
+
+function handleToggleAllRows(value: boolean | 'indeterminate') {
+  table.toggleAllRowsSelected(value === true)
+}
+
+function handleToggleRow(row: Row<TData>, value: boolean | 'indeterminate') {
+  row.toggleSelected(value === true)
+}
+
+function handleSingleSelectionChange(value: unknown) {
+  if (value == null) {
+    return
+  }
+
+  rowSelection.value = {
+    [String(value)]: true,
+  }
+}
+
+function handleRowClick(row: Row<TData>, event: MouseEvent) {
+  emit('rowClick', row.original, row.index, event)
+}
+
+defineExpose({
+  table,
+})
+</script>
+
+<template>
+  <div :class="cn('flex flex-col gap-2', props.class)">
+    <div v-if="hasToolbar" class="flex gap-2 items-center">
+      <div class="flex flex-1 gap-2 min-w-0 items-center">
+        <slot name="toolbar" :table="table" />
+      </div>
+      <Dropdown v-if="props.columnVisibility" :items="columnVisibilityMenuItems" align="end">
+        <Button
+          variant="outline"
+          size="icon"
+          :disabled="!columnVisibilityColumns.length"
+        >
+          <Icon name="i-lucide:columns-3" />
+        </Button>
+      </Dropdown>
+    </div>
+    <component
+      :is="tableRootComponent"
+      :class="cn('size-full', props.border && 'border', props.tableRootClass)"
+      :model-value="tableRootModelValue"
+      @update:model-value="handleSingleSelectionChange"
+    >
+      <Table :class="cn(tableClass, !tableRows.length && 'h-full')">
+        <slot name="caption">
+          <TableCaption v-if="caption">
+            {{ caption }}
+          </TableCaption>
+        </slot>
+
+        <TableHeader :class="headerClass">
+          <TableRow
+            v-for="(headerGroup, headerGroupIndex) in table.getHeaderGroups()"
+            :key="headerGroup.id"
+            :class="cn('border-b-0', headerRowClass)"
+          >
+            <TableHead
+              v-for="header in headerGroup.headers"
+              :key="header.id"
+              :colspan="header.colSpan"
+              :class="getHeaderClass(header)"
+              :style="getHeaderStyle(header, headerGroupIndex)"
+              :aria-sort="getHeaderAriaSort(header)"
+              :data-sortable="props.sortable && header.column.getCanSort() ? '' : undefined"
+              @click="handleHeaderClick(header, $event)"
+            >
+              <template v-if="!header.isPlaceholder">
+                <div :class="getHeaderContentClass(header)">
+                  <slot
+                    v-if="hasColumnSlot(getHeaderSlotName(header))"
+                    :name="getHeaderSlotName(header)"
+                    v-bind="getHeaderSlotProps(header)"
+                  />
+                  <Checkbox
+                    v-else-if="shouldRenderSelectionHeader(header)"
+                    :model-value="getHeaderCheckboxValue()"
+                    class="translate-y-[2px]"
+                    @click.stop
+                    @update:model-value="handleToggleAllRows"
+                  />
+                  <FlexRender
+                    v-else
+                    :render="header.column.columnDef.header"
+                    :props="header.getContext()"
+                  />
+                  <template v-if="props.sortable && header.column.getCanSort()">
+                    <Icon :name="getSortIconName(header)" :class="getSortIconClass(header)" />
+                    <span
+                      v-if="shouldRenderSortIndex(header)"
+                      class="text-[10px] text-muted-foreground leading-none font-medium rounded-full bg-muted inline-flex size-4 items-center justify-center"
+                    >
+                      {{ getSortIndexLabel(header) }}
+                    </span>
+                  </template>
+                </div>
+              </template>
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+
+        <TableBody :class="bodyClass">
+          <template v-if="tableRows.length">
+            <TableRow
+              v-for="(row, rowIndex) in tableRows"
+              :key="row.id"
+              :class="getRowClass(row, rowIndex)"
+              :data-state="row.getIsSelected() ? 'selected' : undefined"
+              @click="handleRowClick(row, $event)"
+            >
+              <TableCell
+                v-for="cell in row.getVisibleCells()"
+                :key="cell.id"
+                :class="getCellClass(cell)"
+                :style="getColumnStyle(cell.column)"
+                :data-pinned="cell.column.getIsPinned() || undefined"
+              >
+                <div
+                  v-if="shouldRenderTreeCell(cell, row)"
+                  class="flex gap-1.5 min-w-0 items-center"
+                  :style="getTreeCellIndentStyle(row)"
+                >
+                  <Button
+                    v-if="row.getCanExpand()"
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    class="shrink-0 size-6"
+                    @click.stop="handleToggleRowExpanded(row)"
+                  >
+                    <Icon :name="getTreeToggleIconName(row)" class="size-3.5" />
+                  </Button>
+                  <span v-else class="shrink-0 size-6" aria-hidden="true" />
+                  <div class="flex-1 min-w-0">
+                    <slot
+                      v-if="hasColumnSlot(getCellSlotName(cell))"
+                      :name="getCellSlotName(cell)"
+                      v-bind="getCellSlotProps(cell, row)"
+                    />
+                    <template v-else-if="isSelectionColumn(cell.column) && selectable">
+                      <Checkbox
+                        v-if="multiple"
+                        :model-value="row.getIsSelected()"
+                        :disabled="!row.getCanSelect()"
+                        class="translate-y-[2px]"
+                        @click.stop
+                        @update:model-value="value => handleToggleRow(row, value)"
+                      />
+                      <RadioGroupItem
+                        v-else
+                        :value="row.id"
+                        :disabled="!row.getCanSelect()"
+                        class="translate-y-[2px]"
+                        @click.stop
+                      />
+                    </template>
+                    <FlexRender
+                      v-else
+                      :render="cell.column.columnDef.cell"
+                      :props="cell.getContext()"
+                    />
+                  </div>
+                </div>
+                <template v-else>
+                  <slot
+                    v-if="hasColumnSlot(getCellSlotName(cell))"
+                    :name="getCellSlotName(cell)"
+                    v-bind="getCellSlotProps(cell, row)"
+                  />
+                  <template v-else-if="isSelectionColumn(cell.column) && selectable">
+                    <Checkbox
+                      v-if="multiple"
+                      :model-value="row.getIsSelected()"
+                      :disabled="!row.getCanSelect()"
+                      class="translate-y-[2px]"
+                      @click.stop
+                      @update:model-value="value => handleToggleRow(row, value)"
+                    />
+                    <RadioGroupItem
+                      v-else
+                      :value="row.id"
+                      :disabled="!row.getCanSelect()"
+                      class="translate-y-[2px]"
+                      @click.stop
+                    />
+                  </template>
+                  <FlexRender
+                    v-else
+                    :render="cell.column.columnDef.cell"
+                    :props="cell.getContext()"
+                  />
+                </template>
+              </TableCell>
+            </TableRow>
+          </template>
+          <TableEmpty v-else :colspan="visibleColumnCount">
+            <slot name="empty" :table="table">
+              <span class="text-muted-foreground">{{ emptyText }}</span>
+            </slot>
+          </TableEmpty>
+        </TableBody>
+      </Table>
+    </component>
+  </div>
+</template>
diff --git a/packages/components/src/basic/table/table/Table.vue b/packages/components/src/basic/table/table/Table.vue
new file mode 100644
index 00000000..62fded78
--- /dev/null
+++ b/packages/components/src/basic/table/table/Table.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '#utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div data-slot="table-container" class="h-full w-full relative overflow-auto">
+    <table data-slot="table" :class="cn('w-full caption-bottom text-sm', props.class)">
+      <slot />
+    </table>
+  </div>
+</template>
diff --git a/packages/components/src/basic/table/table/TableBody.vue b/packages/components/src/basic/table/table/TableBody.vue
new file mode 100644
index 00000000..765ce1d7
--- /dev/null
+++ b/packages/components/src/basic/table/table/TableBody.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '#utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <tbody
+    data-slot="table-body"
+    :class="cn('[&_tr:last-child]:border-0 [&_tr:last-child]:shadow-[0_1px_0_0_oklch(var(--border))]', props.class)"
+  >
+    <slot />
+  </tbody>
+</template>
diff --git a/packages/components/src/basic/table/table/TableCaption.vue b/packages/components/src/basic/table/table/TableCaption.vue
new file mode 100644
index 00000000..40bd4f02
--- /dev/null
+++ b/packages/components/src/basic/table/table/TableCaption.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '#utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <caption
+    data-slot="table-caption"
+    :class="cn('text-muted-foreground mt-4 text-sm', props.class)"
+  >
+    <slot />
+  </caption>
+</template>
diff --git a/packages/components/src/basic/table/table/TableCell.vue b/packages/components/src/basic/table/table/TableCell.vue
new file mode 100644
index 00000000..92b7498c
--- /dev/null
+++ b/packages/components/src/basic/table/table/TableCell.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '#utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <td
+    data-slot="table-cell"
+    :class="
+      cn(
+        'p-2 align-middle whitespace-nowrap',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </td>
+</template>
diff --git a/packages/components/src/basic/table/table/TableEmpty.vue b/packages/components/src/basic/table/table/TableEmpty.vue
new file mode 100644
index 00000000..d3f84cd8
--- /dev/null
+++ b/packages/components/src/basic/table/table/TableEmpty.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { cn } from '#utils'
+import TableCell from './TableCell.vue'
+import TableRow from './TableRow.vue'
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes['class']
+  colspan?: number
+}>(), {
+  colspan: 1,
+})
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <TableRow class="h-full">
+    <TableCell
+      :class="
+        cn(
+          'h-full p-4 whitespace-nowrap align-middle text-sm text-foreground',
+          props.class,
+        )
+      "
+      v-bind="delegatedProps"
+    >
+      <div class="flex h-full min-h-40 items-center justify-center">
+        <slot />
+      </div>
+    </TableCell>
+  </TableRow>
+</template>
diff --git a/packages/components/src/basic/table/table/TableFooter.vue b/packages/components/src/basic/table/table/TableFooter.vue
new file mode 100644
index 00000000..e365368a
--- /dev/null
+++ b/packages/components/src/basic/table/table/TableFooter.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '#utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <tfoot
+    data-slot="table-footer"
+    :class="cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', props.class)"
+  >
+    <slot />
+  </tfoot>
+</template>
diff --git a/packages/components/src/basic/table/table/TableHead.vue b/packages/components/src/basic/table/table/TableHead.vue
new file mode 100644
index 00000000..d2d91531
--- /dev/null
+++ b/packages/components/src/basic/table/table/TableHead.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '#utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <th
+    data-slot="table-head"
+    :class="cn('text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap', props.class)"
+  >
+    <slot />
+  </th>
+</template>
diff --git a/packages/components/src/basic/table/table/TableHeader.vue b/packages/components/src/basic/table/table/TableHeader.vue
new file mode 100644
index 00000000..3d14498e
--- /dev/null
+++ b/packages/components/src/basic/table/table/TableHeader.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '#utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <thead
+    data-slot="table-header"
+    :class="cn(props.class)"
+  >
+    <slot />
+  </thead>
+</template>
diff --git a/packages/components/src/basic/table/table/TableRow.vue b/packages/components/src/basic/table/table/TableRow.vue
new file mode 100644
index 00000000..c48f5271
--- /dev/null
+++ b/packages/components/src/basic/table/table/TableRow.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '#utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <tr
+    data-slot="table-row"
+    :class="cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors', props.class)"
+  >
+    <slot />
+  </tr>
+</template>
diff --git a/packages/components/src/basic/table/table/index.ts b/packages/components/src/basic/table/table/index.ts
new file mode 100644
index 00000000..2b4ce391
--- /dev/null
+++ b/packages/components/src/basic/table/table/index.ts
@@ -0,0 +1,9 @@
+export { default as Table } from './Table.vue'
+export { default as TableBody } from './TableBody.vue'
+export { default as TableCaption } from './TableCaption.vue'
+export { default as TableCell } from './TableCell.vue'
+export { default as TableEmpty } from './TableEmpty.vue'
+export { default as TableFooter } from './TableFooter.vue'
+export { default as TableHead } from './TableHead.vue'
+export { default as TableHeader } from './TableHeader.vue'
+export { default as TableRow } from './TableRow.vue'
diff --git a/packages/components/src/basic/table/table/utils.ts b/packages/components/src/basic/table/table/utils.ts
new file mode 100644
index 00000000..9b153026
--- /dev/null
+++ b/packages/components/src/basic/table/table/utils.ts
@@ -0,0 +1,9 @@
+import type { Updater } from '@tanstack/vue-table'
+import type { Ref } from 'vue'
+import { isFunction } from '@tanstack/vue-table'
+
+export function valueUpdater<T>(updaterOrValue: Updater<T>, ref: Ref<T>) {
+  ref.value = isFunction(updaterOrValue)
+    ? updaterOrValue(ref.value)
+    : updaterOrValue
+}
diff --git a/packages/components/src/examples.ts b/packages/components/src/examples.ts
index 642f54e7..e3e588d8 100644
--- a/packages/components/src/examples.ts
+++ b/packages/components/src/examples.ts
@@ -36,6 +36,7 @@ export { default as searchBar } from './basic/search-bar/_examples'
 export { default as select } from './basic/select/_examples'
 export { default as slider } from './basic/slider/_examples'
 export { default as switch } from './basic/switch/_examples'
+export { default as table } from './basic/table/_examples'
 export { default as tabs } from './basic/tabs/_examples'
 export { default as tag } from './basic/tag/_examples'
 export { default as textarea } from './basic/textarea/_examples'
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index c3289c38..8e0ce161 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -44,6 +44,8 @@ export { default as FaSearchBar } from './basic/search-bar/index.vue'
 export { default as FaSelect } from './basic/select/index.vue'
 export { default as FaSlider } from './basic/slider/index.vue'
 export { default as FaSwitch } from './basic/switch/index.vue'
+export { default as FaTable } from './basic/table/index.vue'
+export type { TableAlign, TableCellSlotProps, TableColumn, TableColumnFixed, TableEmptySlotProps, TableExpandedState, TableFooterSlotProps, TableHeaderSlotProps, TableProps, TableSelectionColumn, TableSelectionDisabled, TableSortingState, TableToolbarSlotProps } from './basic/table/index.vue'
 export { default as FaTabs } from './basic/tabs/index.vue'
 export { default as FaTag } from './basic/tag/index.vue'
 export { default as FaTextarea } from './basic/textarea/index.vue'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 212d3c46..81a9cbcf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -51,6 +51,9 @@ catalogs:
     '@stylistic/stylelint-config':
       specifier: ^5.0.0
       version: 5.0.0
+    '@tanstack/vue-table':
+      specifier: ^8.21.3
+      version: 8.21.3
     '@tinymce/tinymce-vue':
       specifier: ^6.3.0
       version: 6.3.0
@@ -96,6 +99,9 @@ catalogs:
     '@vue/tsconfig':
       specifier: ^0.9.1
       version: 0.9.1
+    '@vueuse/components':
+      specifier: ^14.3.0
+      version: 14.3.0
     '@vueuse/core':
       specifier: ^14.3.0
       version: 14.3.0
@@ -2035,6 +2041,9 @@ importers:
       '@lucide/vue':
         specifier: 'catalog:'
         version: 1.17.0(vue@3.5.35(typescript@6.0.3))
+      '@tanstack/vue-table':
+        specifier: 'catalog:'
+        version: 8.21.3(vue@3.5.35(typescript@6.0.3))
       '@vueuse/components':
         specifier: 'catalog:'
         version: 14.3.0(vue@3.5.35(typescript@6.0.3))
@@ -4417,9 +4426,19 @@ packages:
   '@sxzz/popperjs-es@2.11.8':
     resolution: {integrity: sha512-wOwESXvvED3S8xBmcPWHs2dUuzrE4XiZeFu7e1hROIJkm02a49N120pmOXxY33sBb6hArItm5W5tcg1cBtV+HQ==}
 
+  '@tanstack/table-core@8.21.3':
+    resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==}
+    engines: {node: '>=12'}
+
   '@tanstack/virtual-core@3.13.23':
     resolution: {integrity: sha512-zSz2Z2HNyLjCplANTDyl3BcdQJc2k1+yyFoKhNRmCr7V7dY8o8q5m8uFTI1/Pg1kL+Hgrz6u3Xo6eFUB7l66cg==}
 
+  '@tanstack/vue-table@8.21.3':
+    resolution: {integrity: sha512-rusRyd77c5tDPloPskctMyPLFEQUeBzxdQ+2Eow4F7gDPlPOB1UnnhzfpdvqZ8ZyX2rRNGmqNnQWm87OI2OQPw==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      vue: '>=3.2'
+
   '@tanstack/vue-virtual@3.13.23':
     resolution: {integrity: sha512-b5jPluAR6U3eOq6GWAYSpj3ugnAIZgGR0e6aGAgyRse0Yu6MVQQ0ZWm9SArSXWtageogn6bkVD8D//c4IjW3xQ==}
     peerDependencies:
@@ -11662,8 +11681,15 @@ snapshots:
 
   '@sxzz/popperjs-es@2.11.8': {}
 
+  '@tanstack/table-core@8.21.3': {}
+
   '@tanstack/virtual-core@3.13.23': {}
 
+  '@tanstack/vue-table@8.21.3(vue@3.5.35(typescript@6.0.3))':
+    dependencies:
+      '@tanstack/table-core': 8.21.3
+      vue: 3.5.35(typescript@6.0.3)
+
   '@tanstack/vue-virtual@3.13.23(vue@3.5.35(typescript@6.0.3))':
     dependencies:
       '@tanstack/virtual-core': 3.13.23
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index d55df401..5ad39283 100755
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -22,6 +22,7 @@ catalog:
   '@lucide/vue': ^1.17.0
   '@spiriit/vite-plugin-svg-spritemap': ^7.0.0
   '@stylistic/stylelint-config': ^5.0.0
+  '@tanstack/vue-table': ^8.21.3
   '@tinymce/tinymce-vue': ^6.3.0
   '@types/fs-extra': ^11.0.4
   '@types/node': ^25.9.1