@vestow/vue 0.1.0

package/src/components/data-table/DataTable.vue

@@ -0,0 +1,458 @@
+<script setup lang="ts" generic="TData extends RowData">
+import type {
+  ColumnFiltersState,
+  ColumnVisibilityState,
+  PaginationState,
+  RowData,
+  RowSelectionState,
+  SortingState,
+  Updater,
+} from '@tanstack/vue-table'
+import type { ClassProps } from '../../lib/types'
+import type { DataTableColumn, DataTableColumnMeta } from './features'
+import type { TableQuery } from './types'
+import { FlexRender, useTable } from '@tanstack/vue-table'
+import { useVirtualizer } from '@tanstack/vue-virtual'
+import { computed, ref, toRef, useTemplateRef } from 'vue'
+import { useDelayedFlag } from '../../composables/useDelayedFlag'
+import { ArrowDown, ArrowUp, ChevronsUpDown } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import Spinner from '../spinner/Spinner.vue'
+import TableEmpty from '../table/TableEmpty.vue'
+import DataTablePagination from './DataTablePagination.vue'
+import DataTableViewOptions from './DataTableViewOptions.vue'
+import { dataTableFeatures } from './features'
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    columns: DataTableColumn<TData>[]
+    data: TData[]
+    loading?: boolean
+    /**
+     * true = backend lo sort/filter/paginate. DataTable chỉ phát event,
+     * không tự cắt dữ liệu. Khi đó `totalRecords` là bắt buộc.
+     */
+    serverSide?: boolean
+    totalRecords?: number
+    pageSize?: number
+    pageSizeOptions?: number[]
+    /**
+     * Trang và sort lúc mở, dùng để khôi phục từ URL.
+     *
+     * Đọc **một lần** ở setup, cố ý không phải `v-model`: bảng tự giữ trạng
+     * thái của nó rồi emit ra. Biến hai chiều thì mỗi lần đổi trang sẽ đi một
+     * vòng qua URL rồi quay lại, và bất kỳ độ trễ nào trên đường đó cũng thành
+     * một nhịp giật ở phân trang.
+     */
+    initialPageIndex?: number
+    initialSorting?: SortingState
+    enableRowSelection?: boolean
+    enableColumnVisibility?: boolean
+    enablePagination?: boolean
+    stickyHeader?: boolean
+    /**
+     * Đóng băng N cột đầu khi cuộn NGANG — cặp đôi của `stickyHeader` cho trục
+     * còn lại. Cuộn dọc mà mất tên cột, hay cuộn ngang mà mất tên dòng, đều là
+     * cùng một chuyện: mất mất cái mốc để biết ô đang nhìn là ô nào.
+     *
+     * Cột bị đóng băng **bắt buộc khai `size`**: vị trí `left` của cột thứ hai
+     * là tổng bề rộng các cột trước nó, mà bề rộng đó chỉ biết được nếu người
+     * viết khai. Cột không khai sẽ bị bỏ qua cùng mọi cột sau nó.
+     */
+    freezeColumns?: number
+    /**
+     * 'fixed' = table-layout: fixed. Bắt buộc khi muốn một cột co giãn còn
+     * các cột khác có độ rộng cố định, và khi cần truncate nội dung trong ô.
+     */
+    layout?: 'auto' | 'fixed'
+    emptyMessage?: string
+    getRowId?: (row: TData, index: number) => string
+    /** Ảo hoá dòng — dùng khi 1 trang có hàng nghìn dòng. */
+    virtual?: boolean
+    estimateRowHeight?: number
+    /** Bắt buộc khi virtual = true, vì virtualizer cần 1 vùng cuộn có chiều cao. */
+    maxHeight?: string
+  }>(),
+  {
+    loading: false,
+    serverSide: false,
+    pageSize: 20,
+    pageSizeOptions: () => [10, 20, 50, 100],
+    enableRowSelection: false,
+    enableColumnVisibility: true,
+    enablePagination: true,
+    stickyHeader: true,
+    freezeColumns: 0,
+    layout: 'auto',
+    virtual: false,
+    estimateRowHeight: 41,
+  },
+)
+
+const emit = defineEmits<{
+  'page-change': [query: TableQuery]
+  'sort-change': [query: TableQuery]
+  'filter-change': [query: TableQuery]
+  'row-click': [row: TData]
+  'update:rowSelection': [selection: RowSelectionState]
+}>()
+
+// --- state: giữ bên ngoài để có thể emit và (nếu cần) đồng bộ lên URL ---
+const sorting = ref<SortingState>(props.initialSorting ?? [])
+const columnFilters = ref<ColumnFiltersState>([])
+const columnVisibility = ref<ColumnVisibilityState>({})
+const rowSelection = ref<RowSelectionState>({})
+const pagination = ref<PaginationState>({
+  pageIndex: props.initialPageIndex ?? 0,
+  pageSize: props.pageSize,
+})
+
+const tableState = computed(() => ({
+  sorting: sorting.value,
+  columnFilters: columnFilters.value,
+  columnVisibility: columnVisibility.value,
+  rowSelection: rowSelection.value,
+  pagination: pagination.value,
+}))
+
+function resolve<T>(updater: Updater<T>, current: T): T {
+  return typeof updater === 'function' ? (updater as (old: T) => T)(current) : updater
+}
+
+function currentQuery(): TableQuery {
+  return {
+    pageIndex: pagination.value.pageIndex,
+    pageSize: pagination.value.pageSize,
+    sorting: sorting.value,
+    filters: columnFilters.value,
+  }
+}
+
+function onSortingChange(updater: Updater<SortingState>): void {
+  sorting.value = resolve(updater, sorting.value)
+  // Đổi sort thì về trang 1, nếu không người dùng đang ở trang 7 sẽ thấy trống.
+  pagination.value = { ...pagination.value, pageIndex: 0 }
+  emit('sort-change', currentQuery())
+}
+
+function onColumnFiltersChange(updater: Updater<ColumnFiltersState>): void {
+  columnFilters.value = resolve(updater, columnFilters.value)
+  pagination.value = { ...pagination.value, pageIndex: 0 }
+  emit('filter-change', currentQuery())
+}
+
+function onPaginationChange(updater: Updater<PaginationState>): void {
+  pagination.value = resolve(updater, pagination.value)
+  emit('page-change', currentQuery())
+}
+
+function onColumnVisibilityChange(updater: Updater<ColumnVisibilityState>): void {
+  columnVisibility.value = resolve(updater, columnVisibility.value)
+}
+
+function onRowSelectionChange(updater: Updater<RowSelectionState>): void {
+  rowSelection.value = resolve(updater, rowSelection.value)
+  emit('update:rowSelection', rowSelection.value)
+}
+
+/**
+ * serverSide là cấu hình tĩnh của bảng, đọc một lần là đủ.
+ *
+ * QUAN TRỌNG: không bao giờ truyền một computed có thể trả về `undefined`
+ * vào option của useTable. mergeProxy của adapter bỏ qua giá trị `undefined`
+ * và rơi ngược về source gốc — tức chính ComputedRef chưa unwrap — khiến
+ * option nhận được một object thay vì số (getPageCount() ra NaN).
+ * Vì vậy `rowCount` chỉ được thêm vào khi thật sự chạy server-side.
+ */
+const isServerSide = props.serverSide
+
+const table = useTable({
+  features: dataTableFeatures,
+  columns: toRef(props, 'columns'),
+  data: toRef(props, 'data'),
+  state: tableState,
+  getRowId: props.getRowId,
+  enableRowSelection: computed(() => props.enableRowSelection),
+  manualSorting: isServerSide,
+  manualFiltering: isServerSide,
+  manualPagination: isServerSide,
+  ...(isServerSide ? { rowCount: computed(() => props.totalRecords ?? 0) } : {}),
+  onSortingChange,
+  onColumnFiltersChange,
+  onPaginationChange,
+  onColumnVisibilityChange,
+  onRowSelectionChange,
+})
+
+/**
+ * Chỉ ép chiều rộng cho cột MÀ NGƯỜI VIẾT khai `size`.
+ *
+ * Không đọc `header.column.columnDef.size`: columnSizingFeature nhét sẵn
+ * `size: 150` vào mọi cột, nên đọc từ đó thì cột nào cũng có width cố định
+ * và không còn cột nào co giãn được.
+ */
+const declaredWidths = computed(() => {
+  const widths = new Map<string, number>()
+
+  for (const column of props.columns) {
+    const id = column.id ?? ('accessorKey' in column ? String(column.accessorKey) : undefined)
+
+    if (id !== undefined && typeof column.size === 'number')
+      widths.set(id, column.size)
+  }
+
+  return widths
+})
+
+function widthStyle(columnId: string): { width: string } | undefined {
+  const width = declaredWidths.value.get(columnId)
+  return width === undefined ? undefined : { width: `${width}px` }
+}
+
+/** Căn chữ khai qua `meta.align`, áp cho cả header và ô để không lệch nhau. */
+const declaredAlign = computed(() => {
+  const alignments = new Map<string, NonNullable<DataTableColumnMeta['align']>>()
+
+  for (const column of props.columns) {
+    const id = column.id ?? ('accessorKey' in column ? String(column.accessorKey) : undefined)
+    const align = column.meta?.align
+
+    if (id !== undefined && align !== undefined)
+      alignments.set(id, align)
+  }
+
+  return alignments
+})
+
+function alignClass(columnId: string): string | undefined {
+  const align = declaredAlign.value.get(columnId)
+
+  // Cột số: căn phải VÀ tabular figures — thiếu vế sau thì các chữ số vẫn
+  // không thẳng hàng, xem chú thích ở `DataTableColumnMeta['align']`.
+  if (align === 'number')
+    return 'text-right tabular-nums'
+  if (align === 'right')
+    return 'text-right'
+  if (align === 'center')
+    return 'text-center'
+
+  return undefined
+}
+
+/**
+ * Lớp phủ tải chỉ hiện khi lần chờ vượt 300ms.
+ *
+ * Dữ liệu đã cache trả về gần như tức thì, mà nháy spinner đúng một khung hình
+ * rồi tắt thì đọc ra giống lỗi render hơn là phản hồi. Xem `useDelayedFlag`.
+ *
+ * `showEmpty` bên dưới cố ý vẫn đọc `props.loading` chứ không đọc cờ đã hoãn:
+ * trong 300ms đầu chưa có spinner, nếu `showEmpty` cũng chờ theo thì bảng sẽ
+ * chớp qua trạng thái "không có dữ liệu" ngay trước khi dữ liệu về.
+ */
+const showLoading = useDelayedFlag(() => props.loading)
+
+/**
+ * Vị trí `left` của từng cột bị đóng băng, cộng dồn từ bề rộng đã khai.
+ *
+ * Dừng ngay ở cột đầu tiên không khai `size`: đoán bừa một con số thì cột sau
+ * sẽ chồng lên cột trước hoặc chừa ra một khe — sai kiểu khó thấy hơn hẳn so
+ * với việc cột đó đơn giản là không dính.
+ */
+const frozenOffsets = computed(() => {
+  const offsets = new Map<string, number>()
+
+  if (props.freezeColumns < 1)
+    return offsets
+
+  let left = 0
+
+  for (const column of table.getVisibleLeafColumns().slice(0, props.freezeColumns)) {
+    const width = declaredWidths.value.get(column.id)
+
+    if (width === undefined)
+      break
+
+    offsets.set(column.id, left)
+    left += width
+  }
+
+  return offsets
+})
+
+function frozenStyle(columnId: string): { left: string } | undefined {
+  const left = frozenOffsets.value.get(columnId)
+  return left === undefined ? undefined : { left: `${left}px` }
+}
+
+/** Chỉ cột đóng băng CUỐI CÙNG mới kẻ vạch — đó là chỗ mặt phẳng bị cắt. */
+function isLastFrozen(columnId: string): boolean {
+  const ids = [...frozenOffsets.value.keys()]
+  return ids[ids.length - 1] === columnId
+}
+
+const headerGroups = computed(() => table.getHeaderGroups())
+const rows = computed(() => table.getRowModel().rows)
+const visibleColumnCount = computed(() => table.getVisibleLeafColumns().length)
+
+// --- virtualization ---
+const scrollRef = useTemplateRef<HTMLDivElement>('scrollEl')
+
+const virtualizer = useVirtualizer(computed(() => ({
+  count: props.virtual ? rows.value.length : 0,
+  getScrollElement: () => scrollRef.value,
+  estimateSize: () => props.estimateRowHeight,
+  overscan: 8,
+})))
+
+const virtualItems = computed(() => (props.virtual ? virtualizer.value.getVirtualItems() : []))
+
+const paddingTop = computed(() => virtualItems.value[0]?.start ?? 0)
+
+const paddingBottom = computed(() => {
+  const items = virtualItems.value
+  const last = items[items.length - 1]
+  return last ? virtualizer.value.getTotalSize() - last.end : 0
+})
+
+const visibleRows = computed(() =>
+  props.virtual ? virtualItems.value.map(item => rows.value[item.index]) : rows.value,
+)
+
+const showEmpty = computed(() => !props.loading && rows.value.length === 0)
+
+function resetSelection(): void {
+  rowSelection.value = {}
+}
+
+defineExpose({ table, resetSelection })
+</script>
+
+<template>
+  <!-- Toolbar, bảng và footer nằm TRONG cùng một card — đúng theo thiết kế. -->
+  <div
+    :class="cn(
+      'surface relative overflow-hidden rounded-lg border border-border bg-card shadow-sm',
+      props.class,
+    )"
+  >
+    <div
+      v-if="props.enableColumnVisibility || $slots.toolbar"
+      class="flex items-center gap-2 border-b border-border px-3.5 py-3"
+    >
+      <slot name="toolbar" :table="table" />
+      <DataTableViewOptions v-if="props.enableColumnVisibility" :table="table" class="ml-auto" />
+    </div>
+
+    <div
+      ref="scrollEl"
+      class="w-full overflow-auto"
+      :style="props.maxHeight ? { maxHeight: props.maxHeight } : undefined"
+    >
+      <table
+        :class="cn(
+          'w-full caption-bottom border-separate border-spacing-0 text-[12.5px]',
+          props.layout === 'fixed' && 'table-fixed',
+        )"
+      >
+        <!--
+          z-index KHÔNG đặt ở đây mà đặt thẳng trên `<th>`. Biến thể
+          `[&_th]:z-(--z-raised)` sinh ra selector con nên specificity (0,1,1), thắng
+          luôn `z-(--z-elevated)` viết thẳng trên ô (0,1,0) — ô đóng băng sẽ nằm cùng lớp
+          với các ô khác và bị ô sau nó trong DOM vẽ đè lên. Đã dính đúng lỗi
+          đó: header cột đóng băng bị header cột kế tiếp che mất.
+        -->
+        <thead :class="props.stickyHeader ? '[&_th]:sticky [&_th]:top-0' : undefined">
+          <tr v-for="group in headerGroups" :key="group.id">
+            <th
+              v-for="header in group.headers"
+              :key="header.id"
+              :style="[widthStyle(header.column.id), frozenStyle(header.column.id)]"
+              :class="cn(
+                'h-9 whitespace-nowrap border-b border-border bg-muted/50 px-3.5 text-left align-middle text-[11px] font-medium text-muted-foreground',
+                alignClass(header.column.id),
+                props.stickyHeader && 'z-(--z-raised)',
+                // Góc trên-trái dính cả hai chiều nên phải nằm trên cả hai lớp
+                // kia, và nền phải ĐỤC — `bg-muted/50` trong suốt sẽ để nội
+                // dung cuộn qua bên dưới hiện lên xuyên qua nó.
+                frozenOffsets.has(header.column.id) && [
+                  'sticky z-(--z-elevated) bg-[color-mix(in_oklab,var(--muted)_50%,var(--card))]',
+                  isLastFrozen(header.column.id) && 'border-r border-r-border',
+                ],
+              )"
+            >
+              <template v-if="!header.isPlaceholder">
+                <button
+                  v-if="header.column.getCanSort()"
+                  type="button"
+                  class="-mx-1 inline-flex max-w-full items-center gap-1 rounded px-1 py-0.5 transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                  @click="header.column.getToggleSortingHandler()?.($event)"
+                >
+                  <FlexRender :header="header" />
+                  <ArrowUp v-if="header.column.getIsSorted() === 'asc'" class="size-3 shrink-0" />
+                  <ArrowDown v-else-if="header.column.getIsSorted() === 'desc'" class="size-3 shrink-0" />
+                  <ChevronsUpDown v-else class="size-3 shrink-0 opacity-40" />
+                </button>
+                <FlexRender v-else :header="header" />
+              </template>
+            </th>
+          </tr>
+        </thead>
+
+        <tbody>
+          <tr v-if="props.virtual && paddingTop > 0" :style="{ height: `${paddingTop}px` }">
+            <td :colspan="visibleColumnCount" class="p-0" />
+          </tr>
+
+          <TableEmpty v-if="showEmpty" :colspan="visibleColumnCount" :message="props.emptyMessage" />
+
+          <tr
+            v-for="row in visibleRows"
+            :key="row.id"
+            :data-state="row.getIsSelected() ? 'selected' : undefined"
+            class="group/row h-[42px] transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted/50"
+            @click="emit('row-click', row.original)"
+          >
+            <td
+              v-for="cell in row.getAllCells()"
+              :key="cell.id"
+              :style="frozenStyle(cell.column.id)"
+              :class="cn(
+                'min-w-0 border-b border-border px-3.5 align-middle',
+                alignClass(cell.column.id),
+                // Nền của DÒNG nằm trên `<tr>`; ô dính mà để trong suốt thì
+                // nội dung cuộn qua sẽ hiện lên xuyên qua nó. Vì vậy ô tự tô
+                // nền đục, và tự bắt lại hover/selected của dòng qua `group`.
+                frozenOffsets.has(cell.column.id) && [
+                  'sticky z-(--z-base) bg-card',
+                  'group-hover/row:bg-[color-mix(in_oklab,var(--muted)_50%,var(--card))]',
+                  'group-data-[state=selected]/row:bg-[color-mix(in_oklab,var(--muted)_50%,var(--card))]',
+                  isLastFrozen(cell.column.id) && 'border-r border-r-border',
+                ],
+              )"
+            >
+              <FlexRender :cell="cell" />
+            </td>
+          </tr>
+
+          <tr v-if="props.virtual && paddingBottom > 0" :style="{ height: `${paddingBottom}px` }">
+            <td :colspan="visibleColumnCount" class="p-0" />
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <DataTablePagination
+      v-if="props.enablePagination"
+      :table="table"
+      :page-size-options="props.pageSizeOptions"
+      :show-selection="props.enableRowSelection"
+    />
+
+    <div
+      v-if="showLoading"
+      class="absolute inset-0 grid place-items-center bg-background/60 backdrop-blur-[1px]"
+    >
+      <Spinner class="text-primary" />
+    </div>
+  </div>
+</template>

package/src/components/data-table/DataTableFacetedFilter.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { computed } from 'vue'
+import { useI18n } from '../../composables/useI18n'
+import { Check } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import DropdownMenu from '../dropdown-menu/DropdownMenu.vue'
+import DropdownMenuCheckboxItem from '../dropdown-menu/DropdownMenuCheckboxItem.vue'
+import DropdownMenuContent from '../dropdown-menu/DropdownMenuContent.vue'
+import DropdownMenuItem from '../dropdown-menu/DropdownMenuItem.vue'
+import DropdownMenuSeparator from '../dropdown-menu/DropdownMenuSeparator.vue'
+import DropdownMenuTrigger from '../dropdown-menu/DropdownMenuTrigger.vue'
+
+export interface FacetOption {
+  label: string
+  value: string
+}
+
+/**
+ * Gốc là `DropdownMenu`, một provider KHÔNG vẽ ra DOM — thuộc tính rơi tự do
+ * không có chỗ đáp và biến mất hẳn. Chuyển tay xuống chính cái trigger.
+ */
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<ClassProps & {
+  label: string
+  options: FacetOption[]
+}>()
+
+const { t } = useI18n()
+
+/**
+ * Bộ lọc dạng chip viền nét đứt. Chưa chọn gì thì chỉ hiện nhãn mờ;
+ * có lựa chọn thì thêm separator dọc + badge đếm — đúng theo thiết kế.
+ */
+const selected = defineModel<string[]>({ default: () => [] })
+
+const selectedSet = computed(() => new Set(selected.value))
+
+function toggle(value: string, checked: boolean): void {
+  const next = new Set(selected.value)
+
+  if (checked)
+    next.add(value)
+  else
+    next.delete(value)
+
+  selected.value = [...next]
+}
+
+function clear(): void {
+  selected.value = []
+}
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger
+      v-bind="$attrs"
+      :class="cn(
+        'flex h-(--ui-field-height-sm) items-center gap-1.5 rounded-md border border-dashed border-border px-(--ui-field-padding-x-sm)',
+        'text-[11.5px] font-medium transition-colors hover:bg-muted',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+        selectedSet.size === 0 && 'text-muted-foreground',
+        props.class,
+      )"
+    >
+      {{ props.label }}
+      <template v-if="selectedSet.size > 0">
+        <span class="h-3.5 w-px bg-border" aria-hidden="true" />
+        <span class="rounded-sm bg-muted px-1.5 py-px font-mono text-[10.5px] font-medium">
+          {{ selectedSet.size }}
+        </span>
+      </template>
+    </DropdownMenuTrigger>
+
+    <DropdownMenuContent align="start" class="w-48">
+      <DropdownMenuCheckboxItem
+        v-for="option in props.options"
+        :key="option.value"
+        :model-value="selectedSet.has(option.value)"
+        @select="(event: Event) => event.preventDefault()"
+        @update:model-value="(checked: boolean) => toggle(option.value, checked)"
+      >
+        {{ option.label }}
+      </DropdownMenuCheckboxItem>
+
+      <template v-if="selectedSet.size > 0">
+        <DropdownMenuSeparator />
+        <DropdownMenuItem class="justify-center text-[11.5px]" @select="clear">
+          <Check class="opacity-0" />
+          {{ t('ui.table.clearFilter') }}
+        </DropdownMenuItem>
+      </template>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>

package/src/components/data-table/DataTablePagination.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts" generic="TData extends RowData">
+import type { RowData, Table } from '@tanstack/vue-table'
+import type { ClassProps } from '../../lib/types'
+import type { DataTableFeatures } from './features'
+import { computed } from 'vue'
+import { useI18n } from '../../composables/useI18n'
+import { ChevronLeft, ChevronRight } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import Select from '../select/Select.vue'
+import SelectContent from '../select/SelectContent.vue'
+import SelectItem from '../select/SelectItem.vue'
+import SelectTrigger from '../select/SelectTrigger.vue'
+import SelectValue from '../select/SelectValue.vue'
+
+const props = defineProps<ClassProps & {
+  table: Table<DataTableFeatures, TData>
+  pageSizeOptions: number[]
+  showSelection?: boolean
+}>()
+
+const pageIndex = computed(() => props.table.atoms.pagination.get().pageIndex)
+const pageSize = computed(() => props.table.atoms.pagination.get().pageSize)
+const pageCount = computed(() => props.table.getPageCount())
+const rowCount = computed(() => props.table.getRowCount())
+
+const selectedCount = computed(() => Object.keys(props.table.atoms.rowSelection.get()).length)
+
+/**
+ * Luôn chèn pageSize hiện tại vào danh sách: nếu nó không có trong options
+ * (vd pageSize 25 nhưng options là 10/20/50/100) thì SelectValue không tìm
+ * được item khớp và ô chọn hiện ra rỗng.
+ */
+const { t } = useI18n()
+
+const sizeOptions = computed(() =>
+  [...new Set([...props.pageSizeOptions, pageSize.value])].sort((a, b) => a - b),
+)
+
+const summary = computed(() =>
+  props.showSelection
+    ? t('ui.table.summarySelected', { selected: selectedCount.value, count: rowCount.value })
+    : t('ui.table.summary', { count: rowCount.value }),
+)
+
+function onPageSizeChange(value: unknown): void {
+  if (typeof value === 'string')
+    props.table.setPageSize(Number(value))
+}
+
+// 26px — kích thước nút điều hướng trong thiết kế, nhỏ hơn cả size="icon-sm".
+const navButton = cn(
+  'grid size-[26px] place-items-center rounded-md border border-border text-muted-foreground transition-colors',
+  'hover:bg-muted hover:text-foreground',
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+  'disabled:pointer-events-none disabled:opacity-50',
+)
+</script>
+
+<template>
+  <div :class="cn('flex flex-wrap items-center gap-3 px-3.5 py-[11px] text-[11.5px]', props.class)">
+    <span class="mr-auto text-muted-foreground">{{ summary }}</span>
+
+    <div class="flex items-center gap-2 text-muted-foreground">
+      <span class="whitespace-nowrap">{{ t('ui.table.rowsPerPage') }}</span>
+      <Select :model-value="String(pageSize)" @update:model-value="onPageSizeChange">
+        <!-- px-2 thay vì px-3 mặc định: ô chỉ chứa 2-3 chữ số, padding rộng làm tràn chữ -->
+        <SelectTrigger size="sm" class="h-[26px] w-[62px] px-2 text-[11.5px]">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem v-for="option in sizeOptions" :key="option" :value="String(option)">
+            {{ option }}
+          </SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+
+    <span class="whitespace-nowrap text-muted-foreground">
+      {{ t('ui.pagination.page', { page: pageCount === 0 ? 0 : pageIndex + 1, total: pageCount }) }}
+    </span>
+
+    <div class="flex gap-1">
+      <button
+        type="button"
+        :class="navButton"
+        :disabled="!props.table.getCanPreviousPage()"
+        :aria-label="t('ui.pagination.previous')"
+        @click="props.table.previousPage()"
+      >
+        <ChevronLeft class="size-3" />
+      </button>
+      <button
+        type="button"
+        :class="navButton"
+        :disabled="!props.table.getCanNextPage()"
+        :aria-label="t('ui.pagination.next')"
+        @click="props.table.nextPage()"
+      >
+        <ChevronRight class="size-3" />
+      </button>
+    </div>
+  </div>
+</template>