Table

Generic typed table from @cassa/ui-data. Client-side sort, search, and pagination built in. Column keys are type-safe against your data shape.

Import

import { Table, type Column } from '@cassa/ui-data'

Basic usage

Name	Email	Role
Alice Johnson	alice@example.com	Admin
Bob Smith	bob@example.com	Developer
Carol White	carol@example.com	Designer
Dave Brown	dave@example.com	Developer
Eve Davis	eve@example.com	Manager

Searchable with custom render

Name	Email	Role	Status
Alice Johnson	alice@example.com	Admin	active
Bob Smith	bob@example.com	Developer	active
Carol White	carol@example.com	Designer	pending
Dave Brown	dave@example.com	Developer	inactive

1–4 of 5

Loading skeleton

Name	Email	Role	Status

Full example

import { Table, type Column } from '@cassa/ui-data'
import { Badge } from '@cassa/ui'

type User = { id: number; name: string; email: string; status: string }

const columns: Column<User>[] = [
  { key: 'name', header: 'Name', sortable: true },
  { key: 'email', header: 'Email', sortable: true },
  {
    key: 'status',
    header: 'Status',
    render: (row) => (
      <Badge colorScheme={row.status === 'active' ? 'success' : 'neutral'}>
        {row.status}
      </Badge>
    ),
  },
]

export const UsersTable = ({ users }: { users: User[] }) => (
  <Table columns={columns} data={users} searchable pageSize={10} />
)

Table props

Prop	Type	Default	Description
columns*	Column<T>[]	—	Column definitions — key, header, sortable, render, width.
data*	T[]	—	Array of row objects. T must extend Record<string, unknown>.
loading	boolean	false	Shows animated skeleton rows while data is loading.
searchable	boolean	false	Adds a search input that filters across all string columns.
pageSize	number	5	Rows per page.
emptyMessage	string	"No results found."	Message shown when data is empty or no rows match.

Column definition

Prop	Type	Default	Description
key*	keyof T	—	Property key on the row object — type-safe against your data shape.
header*	string	—	Column header label.
sortable	boolean	—	Click header to sort: asc → desc → unsorted.
render	(row: T, index: number) => ReactNode	—	Custom cell renderer. Defaults to String(row[key]).
width	string	—	Tailwind width class, e.g. "w-32".