CTable — lọc và tìm kiếm

Truyền filter-fields là bảng có sẵn một drawer lọc và thanh điều kiện đang áp dụng — trang chỉ khai báo trường lọc, giống như khai columns.

<script setup lang="ts">
import { computed, ref } from 'vue'
import { CInputNumber } from '@tasco/ui'
import type { TableFilterField, TableFilterValues } from '@tasco/ui'

// Bộ lọc dựng sẵn: khai `filter-fields` như khai `columns`. Trường `custom` render
// control qua slot #filterField và nên có `format` để thẻ điều kiện hiển thị đẹp.
interface Order { id: number, code: string, customer: string, amount: number, status: 'new' | 'done' }

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

const ALL: Order[] = [
  { id: 1, code: 'DH-0001', customer: 'Công ty An Bình', amount: 12_500_000, status: 'done' },
  { id: 2, code: 'DH-0002', customer: 'Tập đoàn Bắc Sơn', amount: 4_200_000, status: 'new' },
  { id: 3, code: 'DH-0003', customer: 'Cửa hàng Cường Thịnh', amount: 980_000, status: 'new' },
]

const filterFields: TableFilterField[] = [
  { key: 'customer', label: 'Khách hàng', type: 'input', placeholder: 'Tên khách hàng' },
  {
    key: 'status',
    label: 'Trạng thái',
    type: 'select',
    options: [
      { label: 'Mới', value: 'new' },
      { label: 'Hoàn thành', value: 'done' },
    ],
  },
  {
    key: 'minAmount',
    label: 'Giá trị từ',
    type: 'custom',
    format: (value) => `${new Intl.NumberFormat('vi-VN').format(Number(value))} ₫`,
  },
]

const filters = ref<TableFilterValues>({})

const dataSource = computed(() =>
  ALL.filter((order) => {
    const { customer, status, minAmount } = filters.value
    if (typeof customer === 'string' && customer
      && !order.customer.toLowerCase().includes(customer.toLowerCase())) return false
    if (typeof status === 'string' && status && order.status !== status) return false
    if (typeof minAmount === 'number' && order.amount < minAmount) return false
    return true
  }),
)

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

<template>
  <CTable
    row-key="id"
    :columns="columns"
    :data-source="dataSource"
    :filter-fields="filterFields"
    :filter-values="filters"
    :pagination="false"
    show-filter
    @update:filter-values="(values: TableFilterValues) => (filters = values)"
  >
    <template #filterField="{ field, values }">
      <!-- values là bản nháp của drawer: đọc có ép kiểu, ghi thẳng vào đúng key của trường. -->
      <CInputNumber
        :value="(values[field.key] as number | undefined)"
        :min="0"
        :step="1000000"
        style="width: 100%"
        placeholder="Giá trị nhỏ nhất"
        @update:value="(value: unknown) => (values[field.key] = value)"
      />
    </template>

    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'amount'">
        {{ currency.format((record as Order).amount) }} ₫
      </template>
    </template>
  </CTable>
</template>

<script setup lang="ts">
import type { TableFilterField } from '@tasco/ui'

const filterFields: TableFilterField[] = [
  { key: 'customer', label: 'Khách hàng', type: 'input', placeholder: 'Tên khách hàng' },
  { key: 'status', label: 'Trạng thái', type: 'select', options: STATUS_OPTIONS, multiple: true },
  { key: 'createdAt', label: 'Ngày tạo', type: 'dateRange' },
]
</script>

<template>
  <CTable
    :filter-fields="filterFields"
    :filter-values="filterValues"
    show-filter
    @update:filter-values="onFilter"
  />
</template>

Kiểu trường

type	Control	Giá trị trong filterValues	Chữ trên thẻ điều kiện
input	Ô nhập (Enter = Áp dụng)	chuỗi đã cắt khoảng trắng	chính chuỗi đó
select	Select tìm theo nhãn; options, multiple	value hoặc mảng value	nhãn option, nối bằng dấu phẩy
date	DatePicker	'YYYY-MM-DD'	DD/MM/YYYY
dateRange	RangePicker	['YYYY-MM-DD', 'YYYY-MM-DD']	DD/MM/YYYY – DD/MM/YYYY
custom	Slot #filterField	tuỳ control	format(value) nếu có

Mọi trường đều có key, label, placeholder? và format?: (value) => string.

Trường tự dựng

<template #filterField="{ field, values }">
  <CInputNumber
    :value="(values[field.key] as number | undefined)"
    :min="0"
    style="width: 100%"
    @update:value="(value: unknown) => (values[field.key] = value)"
  />
</template>

values là bản nháp của drawer: ghi thẳng vào values[field.key]. Khai format cho trường custom để thẻ điều kiện hiển thị được chữ dễ đọc thay vì [object Object].

Khai type: 'custom' mà quên slot #filterField → CTable ném lỗi [@tasco/ui] ngay khi dựng bảng.

Cách drawer làm việc

• Sửa trong drawer chưa ảnh hưởng bảng. Áp dụng mới phát update:filterValues rồi đóng.
• Đóng drawer bằng ✕, Esc hay bấm nền đều bỏ nháp.
• Đặt lại chỉ xoá nháp — vẫn phải bấm Áp dụng.
• Đóng drawer thì focus quay lại nút "Lọc"; bỏ một thẻ điều kiện thì focus nhảy sang thẻ kế tiếp.

Giá trị phát ra

• Trường rỗng bị loại bỏ: '', null, [], khoảng ngày trống. 0 và false vẫn là điều kiện hợp lệ.
• Chấm đỏ trên nút "Lọc" và aria-label của nút đếm theo số điều kiện đang áp dụng.
• Khoá có giá trị nhưng không khai trong filter-fields (ví dụ đọc từ URL) vẫn hiện thành thẻ, nhãn là chính khoá đó — framework không giấu "lọc ngầm".

Đi cùng useTable

<CTable
  :filter-values="filterValues"
  @update:filter-values="onFilter"
  @change="onChange"
/>

useTable giữ bộ lọc form tách khỏi filter cột của a-table rồi mới gộp vào query.filters, nên đổi trang hay sắp xếp không làm mất bộ lọc. Trang tự viết @change mà không dùng useTable thì phải tự gộp — a-table phát lại filter cột ở mỗi lần change.

query.filters là object nên useApi nối vào query string dạng JSON. Backend cần dạng status=1&brand=GEELY thì quy đổi trong fetcher.

Không dùng drawer dựng sẵn

Không truyền filter-fields thì nút "Lọc" chỉ phát @filter — trang tự mở drawer riêng và tự đếm filter-count để hiện chấm đỏ:

<CTable show-filter :filter-count="activeCount" @filter="openMyFilterDrawer" />

Vài control lọc đơn giản đặt ngang phía trên bảng thì dùng CFilterBar; từ ba bốn trường trở lên nên chuyển sang drawer.

Liên quan

• useTable — gộp bộ lọc vào truy vấn.
• Trang danh sách — mẫu đầy đủ.
• Toolbar — ô tìm kiếm nhanh.