CTable — sắp xếp và phân trang

Cả hai đều chạy ở backend. CTable phát sự kiện @change; useTable nhận, cập nhật truy vấn rồi tải lại dữ liệu.

<script setup lang="ts">
import { computed, ref } from 'vue'

// Kiểu tối thiểu cho tham số của @change — app không import kiểu từ ant-design-vue
// (ESLint chặn); khai đúng phần cần dùng, như useTable của @tasco/composables làm.
interface ChangePagination { current?: number, pageSize?: number }
interface ChangeSorter { field?: string | number | readonly (string | number)[], order?: 'ascend' | 'descend' | null }

// Sắp xếp và phân trang ở app thật do BACKEND làm, qua useTable. Demo này sắp xếp
// tại chỗ để chạy được trong trang tài liệu, nhưng luồng sự kiện thì giống hệt:
// @change → cập nhật trang/sắp xếp → tải lại dữ liệu.
interface Order { id: number, code: string, customer: string, amount: number }

const columns = [
  { title: 'Mã đơn', dataIndex: 'code', key: 'code', width: 130, sorter: true },
  { title: 'Khách hàng', dataIndex: 'customer', key: 'customer' },
  { title: 'Giá trị', dataIndex: 'amount', key: 'amount', align: 'right', width: 150, sorter: true },
]

const ALL: Order[] = Array.from({ length: 23 }, (_, i) => ({
  id: i + 1,
  code: `DH-${String(i + 1).padStart(4, '0')}`,
  customer: ['Công ty An Bình', 'Tập đoàn Bắc Sơn', 'Cửa hàng Cường Thịnh'][i % 3] ?? '',
  amount: ((i * 37) % 50 + 1) * 1_000_000,
}))

const page = ref(1)
const pageSize = ref(5)
const sortField = ref<'code' | 'amount' | null>(null)
const sortOrder = ref<'ascend' | 'descend' | null>(null)

const sorted = computed(() => {
  const field = sortField.value
  if (!field || !sortOrder.value) return ALL
  const factor = sortOrder.value === 'ascend' ? 1 : -1
  return [...ALL].sort((a, b) => (a[field] > b[field] ? factor : a[field] < b[field] ? -factor : 0))
})

const dataSource = computed(() =>
  sorted.value.slice((page.value - 1) * pageSize.value, page.value * pageSize.value),
)

const pagination = computed(() => ({
  current: page.value,
  pageSize: pageSize.value,
  total: ALL.length,
}))

function onChange(pag: ChangePagination, _filters: unknown, sorter: ChangeSorter | ChangeSorter[]) {
  page.value = pag.current ?? 1
  pageSize.value = pag.pageSize ?? 5
  const { field, order } = (Array.isArray(sorter) ? sorter[0] : sorter) ?? {}
  sortField.value = order && (field === 'code' || field === 'amount') ? field : null
  sortOrder.value = order ?? null
}

const currency = new Intl.NumberFormat('vi-VN')
</script>

<template>
  <CTable
    row-key="id"
    :columns="columns"
    :data-source="dataSource"
    :pagination="pagination"
    @change="onChange"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'amount'">
        {{ currency.format((record as Order).amount) }} ₫
      </template>
    </template>
  </CTable>
</template>

Sắp xếp

const columns = [
  { title: 'Mã đơn', dataIndex: 'code', key: 'code', sorter: true },
  { title: 'Giá trị', dataIndex: 'amount', key: 'amount', sorter: true, align: 'right' },
]

sorter: true bật chỉ báo sắp xếp trên header. Khi người dùng bấm, bảng phát @change với sorter:

Người dùng bấm	sortField	sortOrder
Lần 1	dataIndex của cột	ascend
Lần 2	dataIndex của cột	descend
Lần 3	undefined	undefined

useTable quy đổi sẵn, fetcher chỉ việc đọc query.sortField / query.sortOrder và gửi theo đúng tên tham số của backend — xem useApi và fetcher.

• dataIndex lồng (['owner', 'name']) được nối thành owner.name.
• Sắp xếp nhiều cột (sorter: { multiple: n }) thì useTable chỉ gửi cột đầu, vì TableQuery giữ một cột.
• Đừng sắp xếp tại chỗ trên dataSource: nó chỉ đúng trong trang hiện tại và sai ngay khi sang trang thứ hai.

Phân trang

<CTable :pagination="pagination" @change="onChange" />

pagination từ useTable gồm current, pageSize, total, showSizeChanger. CTable gộp thêm mặc định của framework:

Khoá	Mặc định	Ghi chú
showTotal	Tổng số dòng N	Ghi đè bằng hàm riêng nếu muốn
showSizeChanger	true	Cho đổi số dòng mỗi trang
size	default	antd tự thu nhỏ theo size của bảng

Trang ghi đè từng khoá:

<CTable :pagination="{ ...pagination, showSizeChanger: false, pageSizeOptions: ['10', '20'] }" />

Tắt hẳn phân trang (bảng con ngắn, bảng trong drawer):

<CTable :pagination="false" />

total phải là tổng số bản ghi khớp điều kiện, không phải số dòng của trang hiện tại — sai chỗ này thì thanh phân trang hiện sai số trang.

Tự viết @change

Khi không dùng useTable, khai kiểu tối thiểu cho tham số thay vì import kiểu từ ant-design-vue (ESLint chặn import trực tiếp):

interface ChangePagination { current?: number, pageSize?: number }
interface ChangeSorter {
  field?: string | number | readonly (string | number)[]
  order?: 'ascend' | 'descend' | null
}

function onChange(pag: ChangePagination, filters: unknown, sorter: ChangeSorter | ChangeSorter[]) {
  // ...
}

Đây cũng là cách useTable của @tasco/composables làm.

Sắp xếp mặc định

Hai nguồn, theo thứ tự ưu tiên:

1. Thiết lập của người dùng (drawer ⚙, lưu theo settings-key) — xem Thiết lập bảng.
2. defaultSortOrder khai trên cột — áp dụng khi người dùng chưa đặt gì.

Dùng thiết lập thì truyền cùng khoá cho useTable để lần tải đầu đã đúng thứ tự, không phải tải hai lần:

const TABLE_KEY = 'orders'
useTable(fetchOrders, { settingsKey: TABLE_KEY })

<CTable :settings-key="TABLE_KEY" show-column-setting />

Quên settingsKey ở useTable thì bảng vẫn hiện chỉ báo sắp xếp nhưng dữ liệu lần đầu chưa được sắp xếp — một lỗi rất khó nhận ra khi nhìn màn hình.

Liên quan

• useTable — truy vấn và tải lại.
• Thiết lập bảng — sắp xếp mặc định của người dùng.
• Hợp đồng dữ liệu — TableQuery và Paginated.