DataTable

Lightweight data table with sorting, row selection, and custom rendering.

Basic Usage

Demo will load when visible.

<script setup lang="ts">
const columns = [
  { key: 'name', title: 'Name' },
  { key: 'role', title: 'Role' },
  { key: 'score', title: 'Score', sortable: true },
]

const data = [
  { id: 1, name: 'Ava', role: 'Designer', score: 92 },
  { id: 2, name: 'Noah', role: 'Engineer', score: 88 },
  { id: 3, name: 'Mia', role: 'PM', score: 95 },
]
</script>

<template>
  <TxDataTable :columns="columns" :data="data" striped bordered />
</template>

Row Selection

Demo will load when visible.

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

const selectedKeys = ref([])
</script>

<template>
  <TxDataTable
    v-model:selected-keys="selectedKeys"
    :columns="columns"
    :data="data"
    row-key="id"
    selectable
  />
</template>

Sortable headers expose aria-sort and support pointer click, Enter, and Space to cycle through ascending, descending, and unsorted states. When sortOnClient=false, the table still emits sortChange without reordering local rows.

API

TxDataTable Props

Name	Type	Default	Description
`columns`	`DataTableColumn[]`	`[]`	Column config
`data`	`any[]`	`[]`	Data source
`rowKey`	`string \| (row, index) => string \| number`	`index`	Unique row key
`loading`	`boolean`	`false`	Loading state
`emptyText`	`string`	`'No data'`	Empty text
`striped`	`boolean`	`false`	Zebra rows
`bordered`	`boolean`	`false`	Show borders
`hover`	`boolean`	`true`	Hover highlight
`selectable`	`boolean`	`false`	Selectable rows
`selectedKeys`	`Array<string \| number>`	`[]`	Selected keys
`defaultSort`	`{ key: string; order: 'asc' \| 'desc' \| null }`	`null`	Default sort
`sortOnClient`	`boolean`	`true`	Client-side sort

DataTableColumn

Field	Type	Description
`key`	`string`	Column key
`title`	`string`	Header title
`dataIndex`	`string`	Data field
`width`	`string \| number`	Column width
`align`	`'left' \| 'center' \| 'right'`	Alignment
`sortable`	`boolean`	Sortable
`sorter`	`(a, b) => number`	Custom sorter
`format`	`(value, row, index) => string`	Cell formatter
`headerClass`	`string`	Header class
`cellClass`	`string`	Cell class

Events

Event	Payload	Description
`update:selectedKeys`	`(keys)`	Selection update
`selectionChange`	`(keys)`	Selection change
`sortChange`	`(sort)`	Sort change
`rowClick`	`({ row, index })`	Row click

Slots

Name	Description
`header-<columnKey>`	Custom header
`cell-<columnKey>`	Custom cell
`empty`	Empty slot