Components
Table
One-stop data table on TanStack Table v9, dressed in the paper-and-ink system: rows are CSS grids under ARIA table semantics, so sticky headers, pinned columns, merged cells, and a virtualized window all stay honest while sorting, filtering, tree expansion, selection, and pagination come from the row-model pipeline.
#Basic usage
Region
Units
Revenue
Jiangnan
1240
$18,400
Hokuriku
860
$12,150
Lingnan
620
$9,320
<script setup lang="ts">
import { DataTable } from "@bysages/vue";
const columns = [
{ accessorKey: "region", header: "Region" },
{ accessorKey: "units", header: "Units", meta: { numeric: true } },
{ accessorKey: "revenue", header: "Revenue", meta: { numeric: true } },
];
const data = [
{ region: "Jiangnan", units: 1240, revenue: "$18,400" },
{ region: "Hokuriku", units: 860, revenue: "$12,150" },
{ region: "Lingnan", units: 620, revenue: "$9,320" },
];
</script>
<template>
<DataTable :data="data" :columns="columns" />
</template>
#Props
#SDataTable
| Prop | Type | Default | Description |
|---|---|---|---|
data | Array as PropType<RowData[]> | — | |
columns | Array as PropType<ColumnDef<any, any, any>[]> | — | |
selectable | unknown | — | |
sortable | Boolean | true | — |
filterable | unknown | — | |
showToolbar | Boolean | true | — |
tree | unknown | — | |
merge | Array as PropType<string[]> | — | |
pinStart | Array as PropType<string[]> | — | |
pinEnd | Array as PropType<string[]> | — | |
virtual | unknown | — | |
rowHeight | Number | 40 | — |
paginated | unknown | — | |
pageSize | Number | 10 | — |
pageSizeOptions | Array as PropType<number[]> | () => [10, 20, 50] | — |
stickyFooter | unknown | — | |
initialSorting | Array as PropType<SortingState> | — | |
globalFilterPlaceholder | String | "Filter rows" | — |
emptyText | String | "No rows" | — |
reorderable | unknown | — |