@agala-labs/ui

Table

Displays sortable, selectable tabular records with loading and empty states.

Examples

Default

Select all rows		Role	Status
Select row 1	Ada Lovelace	Owner	Active
Select row 2	Grace Hopper	Maintainer	Active
Select row 3	Edsger Dijkstra	Reviewer	Invited

<AgalaTable :columns="columns" :rows="members" row-key="id" />

Import

import { AgalaTable } from '@agala-labs/ui'

API

Prop	Type	Default	Description
columns	TableColumn[]	—	Definitions support width, minWidth, alignment, and sorting.
rows	Record<string, unknown>[]	—	Required records.
rowKey	string	—	Unique record key.
variant	'default' | 'clean' | 'minimal'	—	Border and surface treatment.
density	'comfortable' | 'compact'	'comfortable'	Row spacing.
selectable	boolean	false	Enables row selection.
selectedRows	string[]	—	Selected keys.
sortKey / sortDir	string / 'asc' | 'desc'	—	Controlled sorting.
interactiveRows	boolean	false	Adds keyboard row activation.
stickyHeader / stickyFirstColumn	boolean	false	Pins context inside the table scroller.
loading / loadingRows	boolean / number	false / 5	Shows a deterministic loading layout.
emptyMessage	string	—	Empty collection copy.

Events

• update:selectedRows
• update:sortKey
• update:sortDir
• row-click(row)

Slots

• cell-<key>
• empty
• footer

Accessibility

Uses semantic table markup, announces sorting and selection, and makes rows keyboard-operable only when interactiveRows is enabled.