From 8b871ccbcadeaefa8527271da9bbed399dfa92b2 Mon Sep 17 00:00:00 2001
From: overtrue <anzhengchao@gmail.com>
Date: Fri, 31 Oct 2025 21:34:12 +0800
Subject: [PATCH] refactor: migrate all tables to DataTable component

- Migrate pages/events/index.vue to use DataTable
- Migrate pages/license/index.vue feature permissions table to DataTable
- Migrate components/user/* tables to DataTable (account, policies, groups)
- Migrate components/user-group/* tables to DataTable (policies, members, set-policies-mutiple)
- Replace native table elements and raw Table components with shared DataTable
- Implement search functionality using DataTable filter capabilities
- Ensure consistent table rendering across the application
---
 components/user-group/members.vue             |  53 +++---
 components/user-group/policies.vue            |  53 +++---
 .../user-group/set-policies-mutiple.vue       |  72 ++++----
 components/user/account.vue                   | 128 ++++++++------
 components/user/groups.vue                    |  53 +++---
 components/user/policies.vue                  |  53 +++---
 pages/events/index.vue                        | 158 +++++++++---------
 pages/license/index.vue                       |  61 ++++---
 8 files changed, 347 insertions(+), 284 deletions(-)

diff --git a/components/user-group/members.vue b/components/user-group/members.vue
index f3a50f6..e01875e 100644
--- a/components/user-group/members.vue
+++ b/components/user-group/members.vue
@@ -71,38 +71,22 @@
       </CardContent>
     </Card>
 
-    <Table class="overflow-hidden rounded-lg border">
-      <TableHeader>
-        <TableRow>
-          <TableHead>{{ t('Name') }}</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody v-if="filteredMembers.length">
-        <TableRow v-for="member in filteredMembers" :key="member">
-          <TableCell class="font-medium">{{ member }}</TableCell>
-        </TableRow>
-      </TableBody>
-      <TableBody v-else>
-        <TableRow>
-          <TableCell class="text-center" colspan="1">
-            <p class="py-6 text-sm text-muted-foreground">{{ t('No Data') }}</p>
-          </TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
+    <DataTable :table="table" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { Icon } from '#components'
+import DataTable from '@/components/data-table/data-table.vue'
+import { useDataTable } from '@/components/data-table/useDataTable'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent } from '@/components/ui/card'
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
 import { Field, FieldContent, FieldLabel } from '@/components/ui/field'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
-import { computed, onMounted, ref, watch } from 'vue'
+import type { ColumnDef } from '@tanstack/vue-table'
+import { computed, h, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 interface UserOption {
@@ -141,11 +125,28 @@ const userLabelMap = computed(() => {
 
 const selectedUserLabels = computed(() => members.value.map(value => userLabelMap.value[value] ?? value))
 
-const filteredMembers = computed(() => {
-  const keyword = searchTerm.value.trim().toLowerCase()
-  const source = props.group?.members ?? []
-  if (!keyword) return source
-  return source.filter(item => item.toLowerCase().includes(keyword))
+interface MemberItem {
+  name: string
+}
+
+const membersData = computed<MemberItem[]>(() => (props.group?.members ?? []).map(name => ({ name })))
+
+const columns: ColumnDef<MemberItem>[] = [
+  {
+    id: 'name',
+    header: () => t('Name'),
+    cell: ({ row }) => h('span', { class: 'font-medium' }, row.original.name),
+  },
+]
+
+const { table } = useDataTable<MemberItem>({
+  data: membersData,
+  columns,
+  getRowId: row => row.name,
+})
+
+watch(searchTerm, value => {
+  table.getColumn('name')?.setFilterValue(value || undefined)
 })
 
 watch(
diff --git a/components/user-group/policies.vue b/components/user-group/policies.vue
index 628402c..42c20dd 100644
--- a/components/user-group/policies.vue
+++ b/components/user-group/policies.vue
@@ -67,37 +67,21 @@
       </div>
     </div>
 
-    <Table class="overflow-hidden rounded-lg border">
-      <TableHeader>
-        <TableRow>
-          <TableHead>{{ t('Name') }}</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody v-if="filteredPolicies.length">
-        <TableRow v-for="policy in filteredPolicies" :key="policy">
-          <TableCell class="font-medium">{{ policy }}</TableCell>
-        </TableRow>
-      </TableBody>
-      <TableBody v-else>
-        <TableRow>
-          <TableCell class="text-center" colspan="1">
-            <p class="py-6 text-sm text-muted-foreground">{{ t('No Data') }}</p>
-          </TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
+    <DataTable :table="table" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { Icon } from '#components'
+import DataTable from '@/components/data-table/data-table.vue'
+import { useDataTable } from '@/components/data-table/useDataTable'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
 import { Field, FieldContent, FieldLabel } from '@/components/ui/field'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
-import { computed, onMounted, ref, watch } from 'vue'
+import type { ColumnDef } from '@tanstack/vue-table'
+import { computed, h, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 const { listPolicies, setUserOrGroupPolicy } = usePolicies()
@@ -124,11 +108,28 @@ const currentPolicies = computed(() => {
   return props.group.policy.split(',').map(item => item.trim()).filter(Boolean)
 })
 
-const filteredPolicies = computed(() => {
-  const keyword = searchTerm.value.trim().toLowerCase()
-  const source = currentPolicies.value
-  if (!keyword) return source
-  return source.filter(policy => policy.toLowerCase().includes(keyword))
+interface PolicyItem {
+  name: string
+}
+
+const policiesData = computed<PolicyItem[]>(() => currentPolicies.value.map(name => ({ name })))
+
+const columns: ColumnDef<PolicyItem>[] = [
+  {
+    id: 'name',
+    header: () => t('Name'),
+    cell: ({ row }) => h('span', { class: 'font-medium' }, row.original.name),
+  },
+]
+
+const { table } = useDataTable<PolicyItem>({
+  data: policiesData,
+  columns,
+  getRowId: row => row.name,
+})
+
+watch(searchTerm, value => {
+  table.getColumn('name')?.setFilterValue(value || undefined)
 })
 
 const policyLabelMap = computed(() => {
diff --git a/components/user-group/set-policies-mutiple.vue b/components/user-group/set-policies-mutiple.vue
index f9aab7b..25d2532 100644
--- a/components/user-group/set-policies-mutiple.vue
+++ b/components/user-group/set-policies-mutiple.vue
@@ -10,42 +10,18 @@
         </Button>
       </div>
 
-      <Table class="overflow-hidden rounded-lg border">
-        <TableHeader>
-          <TableRow>
-            <TableHead class="w-12">
-              <Checkbox :checked="allVisibleSelected" :indeterminate="checkedKeys.length > 0 && !allVisibleSelected"
-                @update:checked="(value: boolean | 'indeterminate') => toggleSelectAll(value === true)" />
-            </TableHead>
-            <TableHead>{{ t('Name') }}</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody v-if="filteredPolicies.length">
-          <TableRow v-for="policy in filteredPolicies" :key="policy.name">
-            <TableCell>
-              <Checkbox :checked="isSelected(policy.name)" @update:checked="(value: boolean | 'indeterminate') => toggleSelection(policy.name, value === true)" />
-            </TableCell>
-            <TableCell class="font-medium">{{ policy.name }}</TableCell>
-          </TableRow>
-        </TableBody>
-        <TableBody v-else>
-          <TableRow>
-            <TableCell class="text-center" colspan="2">
-              <p class="py-6 text-sm text-muted-foreground">{{ t('No Data') }}</p>
-            </TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
+      <DataTable :table="table" />
     </div>
   </Modal>
 </template>
 
 <script setup lang="ts">
+import DataTable from '@/components/data-table/data-table.vue'
+import { useDataTable } from '@/components/data-table/useDataTable'
 import { Button } from '@/components/ui/button'
-
 import { Checkbox } from '@/components/ui/checkbox'
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
-import { computed, ref } from 'vue'
+import type { ColumnDef } from '@tanstack/vue-table'
+import { computed, h, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import Modal from '~/components/modal.vue'
 
@@ -102,6 +78,44 @@ const toggleSelectAll = (checked: boolean) => {
   }
 }
 
+const columns: ColumnDef<{ name: string; content: unknown }>[] = [
+  {
+    id: 'select',
+    header: () =>
+      h(Checkbox, {
+        checked: allVisibleSelected.value,
+        indeterminate: checkedKeys.value.length > 0 && !allVisibleSelected.value,
+        onUpdateChecked: (value: boolean | 'indeterminate') => toggleSelectAll(value === true),
+      }),
+    enableSorting: false,
+    cell: ({ row }) =>
+      h(Checkbox, {
+        checked: isSelected(row.original.name),
+        onUpdateChecked: (value: boolean | 'indeterminate') => toggleSelection(row.original.name, value === true),
+      }),
+    meta: { maxWidth: '3rem' },
+  },
+  {
+    id: 'name',
+    header: () => t('Name'),
+    cell: ({ row }) => h('span', { class: 'font-medium' }, row.original.name),
+    filterFn: (row, _columnId, filterValue) => {
+      if (!filterValue) return true
+      return row.original.name.toLowerCase().includes(String(filterValue).toLowerCase())
+    },
+  },
+]
+
+const { table } = useDataTable<{ name: string; content: unknown }>({
+  data: filteredPolicies,
+  columns,
+  getRowId: row => row.name,
+})
+
+watch(searchTerm, value => {
+  table.getColumn('name')?.setFilterValue(value || undefined)
+})
+
 const loadPolicies = async () => {
   try {
     const res = await listPolicies()
diff --git a/components/user/account.vue b/components/user/account.vue
index 1bf1765..bda7e0e 100644
--- a/components/user/account.vue
+++ b/components/user/account.vue
@@ -12,51 +12,7 @@
           </Button>
         </div>
 
-        <Table class="overflow-hidden rounded-lg border">
-          <TableHeader>
-            <TableRow>
-              <TableHead class="text-center">{{ t('Access Key') }}</TableHead>
-              <TableHead class="text-center">{{ t('Expiration') }}</TableHead>
-              <TableHead class="text-center">{{ t('Status') }}</TableHead>
-              <TableHead class="text-center">{{ t('Name') }}</TableHead>
-              <TableHead class="w-32 text-center">{{ t('Actions') }}</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody v-if="filteredAccounts.length">
-            <TableRow v-for="account in filteredAccounts" :key="account.accessKey">
-              <TableCell class="text-center font-medium">{{ account.accessKey }}</TableCell>
-              <TableCell class="text-center">{{ formatExpiration(account.expiration) }}</TableCell>
-              <TableCell class="text-center">
-                <span class="text-sm">
-                  {{ account.accountStatus === 'on' ? t('Available') : t('Disabled') }}
-                </span>
-              </TableCell>
-              <TableCell class="text-center">{{ account.name || '-' }}</TableCell>
-              <TableCell>
-                <div class="flex justify-center gap-2">
-                  <Button variant="outline" size="sm" class="h-8 w-8 p-0" @click="openEditItem(account)">
-                    <Icon class="size-4" name="ri:edit-2-line" />
-                  </Button>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    class="h-8 w-8 p-0 text-destructive border-destructive"
-                    @click="confirmDelete(account)"
-                  >
-                    <Icon class="size-4" name="ri:delete-bin-5-line" />
-                  </Button>
-                </div>
-              </TableCell>
-            </TableRow>
-          </TableBody>
-          <TableBody v-else>
-            <TableRow>
-              <TableCell class="text-center" colspan="5">
-                <p class="py-6 text-sm text-muted-foreground">{{ t('No Data') }}</p>
-              </TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
+        <DataTable :table="table" />
       </div>
     </template>
 
@@ -134,13 +90,15 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 
 import { Icon } from '#components'
+import DataTable from '@/components/data-table/data-table.vue'
+import { useDataTable } from '@/components/data-table/useDataTable'
 import DateTimePicker from '@/components/datetime-picker.vue'
 import { Field, FieldContent, FieldLabel } from '@/components/ui/field'
 import { Switch } from '@/components/ui/switch'
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
 import { Textarea } from '@/components/ui/textarea'
+import type { ColumnDef } from '@tanstack/vue-table'
 import dayjs from 'dayjs'
-import { computed, reactive, ref, watch } from 'vue'
+import { computed, h, reactive, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useDialog, useMessage } from '~/composables/ui'
 import { makeRandomString } from '~/utils/functions'
@@ -183,10 +141,78 @@ const parentPolicy = ref('')
 
 const minExpiry = computed(() => new Date().toISOString())
 
-const filteredAccounts = computed(() => {
-  const keyword = searchTerm.value.trim().toLowerCase()
-  if (!keyword) return listData.value
-  return listData.value.filter((item: any) => item.accessKey.toLowerCase().includes(keyword))
+interface AccountItem {
+  accessKey: string
+  expiration?: string
+  accountStatus?: string
+  name?: string
+  [key: string]: unknown
+}
+
+const columns: ColumnDef<AccountItem>[] = [
+  {
+    id: 'accessKey',
+    header: () => t('Access Key'),
+    cell: ({ row }) => h('span', { class: 'text-center font-medium' }, row.original.accessKey),
+  },
+  {
+    id: 'expiration',
+    header: () => t('Expiration'),
+    cell: ({ row }) => h('span', { class: 'text-center' }, formatExpiration(row.original.expiration)),
+  },
+  {
+    id: 'status',
+    header: () => t('Status'),
+    cell: ({ row }) =>
+      h(
+        'span',
+        { class: 'text-sm text-center' },
+        row.original.accountStatus === 'on' ? t('Available') : t('Disabled')
+      ),
+  },
+  {
+    id: 'name',
+    header: () => t('Name'),
+    cell: ({ row }) => h('span', { class: 'text-center' }, row.original.name || '-'),
+  },
+  {
+    id: 'actions',
+    header: () => t('Actions'),
+    enableSorting: false,
+    cell: ({ row }) =>
+      h('div', { class: 'flex justify-center gap-2' }, [
+        h(
+          Button,
+          {
+            variant: 'outline',
+            size: 'sm',
+            class: 'h-8 w-8 p-0',
+            onClick: () => openEditItem(row.original),
+          },
+          () => h(Icon, { class: 'size-4', name: 'ri:edit-2-line' })
+        ),
+        h(
+          Button,
+          {
+            variant: 'outline',
+            size: 'sm',
+            class: 'h-8 w-8 p-0 text-destructive border-destructive',
+            onClick: () => confirmDelete(row.original),
+          },
+          () => h(Icon, { class: 'size-4', name: 'ri:delete-bin-5-line' })
+        ),
+      ]),
+  },
+]
+
+const { table } = useDataTable<AccountItem>({
+  data: listData as any,
+  columns,
+  getRowId: row => row.accessKey,
+})
+
+watch(searchTerm, value => {
+  table.getColumn('accessKey')?.setFilterValue(value || undefined)
 })
 
 const formatExpiration = (value?: string) => {
diff --git a/components/user/groups.vue b/components/user/groups.vue
index c2f118d..0193303 100644
--- a/components/user/groups.vue
+++ b/components/user/groups.vue
@@ -53,37 +53,21 @@
       </div>
     </div>
 
-    <Table class="overflow-hidden rounded-lg border">
-      <TableHeader>
-        <TableRow>
-          <TableHead>{{ t('Name') }}</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody v-if="filteredGroups.length">
-        <TableRow v-for="item in filteredGroups" :key="item">
-          <TableCell class="font-medium">{{ item }}</TableCell>
-        </TableRow>
-      </TableBody>
-      <TableBody v-else>
-        <TableRow>
-          <TableCell class="text-center" colspan="1">
-            <p class="py-6 text-sm text-muted-foreground">{{ t('No Data') }}</p>
-          </TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
+    <DataTable :table="table" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { Icon } from '#components'
+import DataTable from '@/components/data-table/data-table.vue'
+import { useDataTable } from '@/components/data-table/useDataTable'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
 import { Field, FieldContent, FieldLabel } from '@/components/ui/field'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
-import { computed, onMounted, ref, watch } from 'vue'
+import type { ColumnDef } from '@tanstack/vue-table'
+import { computed, h, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
@@ -108,11 +92,28 @@ const submitting = ref(false)
 
 const currentGroups = computed(() => props.user.memberOf ?? [])
 
-const filteredGroups = computed(() => {
-  const keyword = searchTerm.value.trim().toLowerCase()
-  const source = currentGroups.value
-  if (!keyword) return source
-  return source.filter(item => item.toLowerCase().includes(keyword))
+interface GroupItem {
+  name: string
+}
+
+const groupsData = computed<GroupItem[]>(() => currentGroups.value.map(name => ({ name })))
+
+const columns: ColumnDef<GroupItem>[] = [
+  {
+    id: 'name',
+    header: () => t('Name'),
+    cell: ({ row }) => h('span', { class: 'font-medium' }, row.original.name),
+  },
+]
+
+const { table } = useDataTable<GroupItem>({
+  data: groupsData,
+  columns,
+  getRowId: row => row.name,
+})
+
+watch(searchTerm, value => {
+  table.getColumn('name')?.setFilterValue(value || undefined)
 })
 
 const groupLabelMap = computed(() => {
diff --git a/components/user/policies.vue b/components/user/policies.vue
index 7b78392..48c3455 100644
--- a/components/user/policies.vue
+++ b/components/user/policies.vue
@@ -53,37 +53,21 @@
       </div>
     </div>
 
-    <Table class="overflow-hidden rounded-lg border">
-      <TableHeader>
-        <TableRow>
-          <TableHead>{{ t('Name') }}</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody v-if="filteredPolicies.length">
-        <TableRow v-for="policy in filteredPolicies" :key="policy">
-          <TableCell class="font-medium">{{ policy }}</TableCell>
-        </TableRow>
-      </TableBody>
-      <TableBody v-else>
-        <TableRow>
-          <TableCell class="text-center" colspan="1">
-            <p class="py-6 text-sm text-muted-foreground">{{ t('No Data') }}</p>
-          </TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
+    <DataTable :table="table" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { Icon } from '#components'
+import DataTable from '@/components/data-table/data-table.vue'
+import { useDataTable } from '@/components/data-table/useDataTable'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
 import { Field, FieldContent, FieldLabel } from '@/components/ui/field'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
-import { computed, onMounted, ref, watch } from 'vue'
+import type { ColumnDef } from '@tanstack/vue-table'
+import { computed, h, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 const { listPolicies, setUserOrGroupPolicy } = usePolicies()
@@ -108,11 +92,28 @@ const submitting = ref(false)
 
 const currentPolicies = computed(() => props.user.policy ?? [])
 
-const filteredPolicies = computed(() => {
-  const keyword = searchTerm.value.trim().toLowerCase()
-  const source = currentPolicies.value
-  if (!keyword) return source
-  return source.filter(item => item.toLowerCase().includes(keyword))
+interface PolicyItem {
+  name: string
+}
+
+const policiesData = computed<PolicyItem[]>(() => currentPolicies.value.map(name => ({ name })))
+
+const columns: ColumnDef<PolicyItem>[] = [
+  {
+    id: 'name',
+    header: () => t('Name'),
+    cell: ({ row }) => h('span', { class: 'font-medium' }, row.original.name),
+  },
+]
+
+const { table } = useDataTable<PolicyItem>({
+  data: policiesData,
+  columns,
+  getRowId: row => row.name,
+})
+
+watch(searchTerm, value => {
+  table.getColumn('name')?.setFilterValue(value || undefined)
 })
 
 const policyLabelMap = computed(() => {
diff --git a/pages/events/index.vue b/pages/events/index.vue
index b20a4f7..62d6dd5 100644
--- a/pages/events/index.vue
+++ b/pages/events/index.vue
@@ -3,12 +3,7 @@
     <page-header>
       <h1 class="text-2xl font-bold">{{ t('Events') }}</h1>
       <template #actions>
-        <BucketSelector
-          v-model="bucketName"
-          :placeholder="t('Please select bucket')"
-          selector-class="w-full"
-          cache-key="events-buckets"
-        />
+        <BucketSelector v-model="bucketName" :placeholder="t('Please select bucket')" selector-class="w-full" cache-key="events-buckets" />
         <Button type="button" variant="outline" @click="handleNew">
           <Icon class="size-4" name="ri:add-line" />
           <span>{{ t('Add Event Subscription') }}</span>
@@ -20,82 +15,20 @@
       </template>
     </page-header>
 
-    <div class="space-y-6">
-      <div class="relative">
-        <div v-if="loading" class="absolute inset-0 z-10 flex items-center justify-center rounded-lg border bg-background/70 backdrop-blur-sm">
-          <Spinner class="size-6 text-muted-foreground" />
-        </div>
+    <DataTable :table="table" :is-loading="loading" :empty-title="t('No Data')" :empty-description="t('Add Event Subscription to get started')" />
 
-        <div v-if="pageData.length" class="overflow-hidden rounded-lg border">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead class="w-28">{{ t('Type') }}</TableHead>
-                <TableHead class="min-w-[180px]">{{ t('ARN') }}</TableHead>
-                <TableHead class="w-52">{{ t('Events') }}</TableHead>
-                <TableHead class="w-36">{{ t('Prefix') }}</TableHead>
-                <TableHead class="w-36">{{ t('Suffix') }}</TableHead>
-                <TableHead class="w-24 text-center">{{ t('Actions') }}</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              <TableRow v-for="row in pageData" :key="row.id">
-                <TableCell>
-                  <Badge :class="typeBadgeClasses[row.type]">
-                    {{ row.type }}
-                  </Badge>
-                </TableCell>
-                <TableCell class="font-medium">
-                  <span class="line-clamp-2 break-all">{{ row.arn }}</span>
-                </TableCell>
-                <TableCell>
-                  <div class="flex flex-wrap gap-1">
-                    <Badge v-for="event in getDisplayEvents(row.events)" :key="event" variant="secondary">
-                      {{ event }}
-                    </Badge>
-                  </div>
-                </TableCell>
-                <TableCell>{{ row.prefix || '-' }}</TableCell>
-                <TableCell>{{ row.suffix || '-' }}</TableCell>
-                <TableCell>
-                  <div class="flex justify-center">
-                    <Button type="button" size="sm" variant="outline" class="gap-2" @click="event => handleRowDelete(row, event)">
-                      <Icon class="size-4" name="ri:delete-bin-7-line" />
-                      {{ t('Delete') }}
-                    </Button>
-                  </div>
-                </TableCell>
-              </TableRow>
-            </TableBody>
-          </Table>
-        </div>
-
-        <Card v-else class="relative shadow-none">
-          <CardContent class="py-16">
-            <Empty class="mx-auto max-w-sm text-center">
-              <EmptyHeader>
-                <EmptyTitle>{{ t('No Data') }}</EmptyTitle>
-                <EmptyDescription>{{ t('Add Event Subscription to get started') }}</EmptyDescription>
-              </EmptyHeader>
-            </Empty>
-          </CardContent>
-        </Card>
-      </div>
-
-      <events-new-form ref="newRef" :bucketName="bucketName" @success="refresh" />
-    </div>
+    <events-new-form v-if="bucketName" ref="newRef" :bucketName="bucketName" @success="refresh" />
   </page>
 </template>
 
 <script setup lang="ts">
 import { Icon } from '#components'
+import DataTable from '@/components/data-table/data-table.vue'
+import { useDataTable } from '@/components/data-table/useDataTable'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
-import { Card, CardContent } from '@/components/ui/card'
-import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from '@/components/ui/empty'
-import { Spinner } from '@/components/ui/spinner'
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
-import { ref, watch } from 'vue'
+import type { ColumnDef } from '@tanstack/vue-table'
+import { h, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
@@ -139,6 +72,77 @@ const bucketName = ref<string | null>(null)
 const loading = ref(false)
 const pageData = ref<NotificationItem[]>([])
 
+const columns: ColumnDef<NotificationItem>[] = [
+  {
+    id: 'type',
+    header: () => t('Type'),
+    cell: ({ row }) =>
+      h(Badge, { class: typeBadgeClasses[row.original.type] }, () => row.original.type),
+    meta: { maxWidth: '7rem' },
+  },
+  {
+    id: 'arn',
+    header: () => t('ARN'),
+    cell: ({ row }) =>
+      h('span', { class: 'line-clamp-2 break-all font-medium' }, row.original.arn),
+    meta: { maxWidth: '180px' },
+  },
+  {
+    id: 'events',
+    header: () => t('Events'),
+    cell: ({ row }) =>
+      h(
+        'div',
+        { class: 'flex flex-wrap gap-1' },
+        getDisplayEvents(row.original.events).map(event =>
+          h(Badge, { variant: 'secondary', key: event }, () => event)
+        )
+      ),
+    meta: { maxWidth: '13rem' },
+  },
+  {
+    id: 'prefix',
+    header: () => t('Prefix'),
+    cell: ({ row }) => h('span', row.original.prefix || '-'),
+    meta: { maxWidth: '9rem' },
+  },
+  {
+    id: 'suffix',
+    header: () => t('Suffix'),
+    cell: ({ row }) => h('span', row.original.suffix || '-'),
+    meta: { maxWidth: '9rem' },
+  },
+  {
+    id: 'actions',
+    header: () => t('Actions'),
+    enableSorting: false,
+    cell: ({ row }) =>
+      h('div', { class: 'flex justify-center' }, [
+        h(
+          Button,
+          {
+            type: 'button',
+            size: 'sm',
+            variant: 'outline',
+            class: 'gap-2',
+            onClick: (event: Event) => handleRowDelete(row.original, event),
+          },
+          () => [
+            h(Icon, { class: 'size-4', name: 'ri:delete-bin-7-line' }),
+            h('span', t('Delete')),
+          ]
+        ),
+      ]),
+    meta: { maxWidth: '6rem' },
+  },
+]
+
+const { table } = useDataTable<NotificationItem>({
+  data: pageData,
+  columns,
+  getRowId: row => row.id,
+})
+
 watch(
   () => bucketName.value,
   async newVal => {
@@ -152,8 +156,8 @@ watch(
   { immediate: true },
 )
 
-const handleRowDelete = async (row: NotificationItem, event: Event) => {
-  event.stopPropagation()
+const handleRowDelete = async (row: NotificationItem, event?: Event) => {
+  event?.stopPropagation()
 
   const confirmed = await new Promise<boolean>(resolve => {
     dialog.warning({
@@ -171,6 +175,8 @@ const handleRowDelete = async (row: NotificationItem, event: Event) => {
   try {
     loading.value = true
 
+    if (!bucketName.value) return
+
     const currentResponse = await listBucketNotifications(bucketName.value)
     const currentNotifications = currentResponse || {}
 
diff --git a/pages/license/index.vue b/pages/license/index.vue
index bcd6bd0..7f19ede 100644
--- a/pages/license/index.vue
+++ b/pages/license/index.vue
@@ -65,26 +65,7 @@
       <Card class="shadow-none">
         <CardContent class="space-y-4">
           <p class="text-base font-semibold">{{ t('Feature Permissions') }}</p>
-          <div class="overflow-hidden rounded-lg border">
-            <table class="w-full text-sm">
-              <thead class="bg-muted/50 text-left text-xs uppercase text-muted-foreground">
-                <tr>
-                  <th class="px-4 py-2">{{ t('Name') }}</th>
-                  <th class="px-4 py-2">{{ t('Description') }}</th>
-                  <th class="px-4 py-2">{{ t('Status') }}</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="item in permissions" :key="item.name" class="border-t">
-                  <td class="px-4 py-3 font-medium">{{ item.name }}</td>
-                  <td class="px-4 py-3 text-muted-foreground">{{ item.description }}</td>
-                  <td class="px-4 py-3">
-                    <Badge variant="default">{{ item.status }}</Badge>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
+          <DataTable :table="permissionsTable" />
         </CardContent>
       </Card>
 
@@ -106,13 +87,15 @@
 </template>
 
 <script setup lang="ts">
-import { Button } from '@/components/ui/button'
-
 import { Icon } from '#components'
+import DataTable from '@/components/data-table/data-table.vue'
+import { useDataTable } from '@/components/data-table/useDataTable'
 import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
 import { Card, CardContent } from '@/components/ui/card'
+import type { ColumnDef } from '@tanstack/vue-table'
 import dayjs from 'dayjs'
-import { computed, ref } from 'vue'
+import { computed, h, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import type { SiteConfig } from '~/types/config'
 import LicenseArticle from './components/license-article.vue'
@@ -145,7 +128,13 @@ const serviceInfo = computed(() => [
   { label: t('Response Level'), value: t('One-hour Response') },
 ])
 
-const permissions = computed(() => [
+interface PermissionItem {
+  name: string
+  description: string
+  status: string
+}
+
+const permissions = computed<PermissionItem[]>(() => [
   {
     name: t('Single Machine Multiple Disks'),
     description: t(
@@ -169,6 +158,30 @@ const permissions = computed(() => [
   },
 ])
 
+const permissionsColumns: ColumnDef<PermissionItem>[] = [
+  {
+    id: 'name',
+    header: () => t('Name'),
+    cell: ({ row }) => h('span', { class: 'font-medium' }, row.original.name),
+  },
+  {
+    id: 'description',
+    header: () => t('Description'),
+    cell: ({ row }) => h('span', { class: 'text-muted-foreground' }, row.original.description),
+  },
+  {
+    id: 'status',
+    header: () => t('Status'),
+    cell: ({ row }) => h(Badge, { variant: 'default' }, () => row.original.status),
+  },
+]
+
+const { table: permissionsTable } = useDataTable<PermissionItem>({
+  data: permissions,
+  columns: permissionsColumns,
+  getRowId: row => row.name,
+})
+
 const technicalParameters = computed(() => [
   { label: t('Service Hotline'), value: '400-033-5363' },
   { label: t('Supported OS'), value: 'Windows、Linux、MacOS' },