Summary
Data table with sorting, filtering, selection, and pagination built-in.
Usage
<StxTable :data="users()" :columns="columns" searchable sortable selectable>
<template #empty>
<p>No users found</p>
</template>
<template #cell-actions="{ row }">
<button @click="editUser(row)">Edit</button>
</template>
</StxTable>
<script client>
const users = state([])
const columns = [
{ key: 'name', label: 'Name', sortable: true },
{ key: 'email', label: 'Email', sortable: true },
{ key: 'role', label: 'Role', filterable: true },
{ key: 'actions', label: '' },
]
onMount(async () => {
users.set(await fetch('/api/users').then(r => r.json()))
})
</script>Props
:data — array of row objects (signal-reactive):columns — column definitionssearchable — show search inputsortable — enable column sortingselectable — row checkboxes with @select eventstriped — alternating row colorshoverable — row hover highlightstickyHeader — fixed header on scrollloading — show skeleton rowsemptyText — text when no data
Column definition
interface TableColumn {
key: string
label: string
sortable?: boolean
filterable?: boolean
width?: string
align?: 'left' | 'center' | 'right'
render?: (value: any, row: any) => string // custom cell renderer
}Features
- Client-side sort/filter/search (for small datasets)
- Server-side mode (emits events, doesn't filter internally)
- Responsive: horizontal scroll or stacked cards on mobile
- Keyboard navigation
- Slot per column for custom cell rendering
Summary
Data table with sorting, filtering, selection, and pagination built-in.
Usage
Props
:data— array of row objects (signal-reactive):columns— column definitionssearchable— show search inputsortable— enable column sortingselectable— row checkboxes with@selecteventstriped— alternating row colorshoverable— row hover highlightstickyHeader— fixed header on scrollloading— show skeleton rowsemptyText— text when no dataColumn definition
Features