Table

Tables display data in rows and columns. They support sorting, selection, and custom rendering.

Import

import {
  Table,
  TableHeader,
  TableColumn,
  TableBody,
  TableRow,
  TableCell
} from '@proyecto-viviana/solid-spectrum';

Basic Table

A simple table displaying data in rows and columns.

Loading table...

<Table items={rows} columns={columns} aria-label="Users table">
  <TableHeader>
    <TableColumn id="name">Name</TableColumn>
    <TableColumn id="email">Email</TableColumn>
    <TableColumn id="role">Role</TableColumn>
  </TableHeader>
  <TableBody>
    {(user) => (
      <TableRow id={user.id}>
        <TableCell>{user.name}</TableCell>
        <TableCell>{user.email}</TableCell>
        <TableCell>{user.role}</TableCell>
      </TableRow>
    )}
  </TableBody>
</Table>

Selectable Rows

Enable row selection with checkboxes.

Loading table...

<Table
  items={rows}
  columns={selectableColumns}
  selectionMode="multiple"
  selectedKeys={selectedKeys()}
  onSelectionChange={setSelectedKeys}
>
  <TableHeader>
    <TableColumn id="selection"><TableSelectAllCheckbox /></TableColumn>
    ...
  </TableHeader>
  <TableBody>
    {(user) => (
      <TableRow id={user.id}>
        <TableSelectionCheckbox rowKey={user.id} />
        ...
      </TableRow>
    )}
  </TableBody>
</Table>

Sortable Columns

Enable sorting by clicking column headers.

Loading table...

<Table items={rows} columns={sortableColumns} aria-label="Sortable users table">
  <TableHeader>
    <TableColumn id="name" allowsSorting>Name</TableColumn>
    <TableColumn id="email" allowsSorting>Email</TableColumn>
    <TableColumn id="role" allowsSorting>Role</TableColumn>
  </TableHeader>
  ...
</Table>

Table Props

Props

Prop	Type	Default	Description
`items`	T[]	—	Data rows rendered by the table
`columns`	ColumnDefinition<T>[]	—	Column metadata used for collection/sorting
`aria-label`	string	—	Accessible label for the table
`selectionMode`	'none' \| 'single' \| 'multiple'	`'none'`	How rows can be selected
`selectedKeys`	Set<string> \| 'all'	—	Currently selected row keys
`onSelectionChange`	(keys: Set<string> \| 'all') => void	—	Handler for selection changes
`sortDescriptor`	{ column: string, direction: 'ascending' \| 'descending' }	—	Current sort state
`onSortChange`	(descriptor: SortDescriptor) => void	—	Handler for sort changes

TableColumn Props

Props

Prop	Type	Default	Description
`id`	string	—	Unique column identifier
`allowsSorting`	boolean	`false`	Whether column is sortable
`width`	string \| number	—	Column width
`children`	JSX.Element	—	Column header content

TableRow Props

Props

Prop	Type	Default	Description
`id`	string	—	Unique row identifier
`children`	JSX.Element	—	TableCell components

Accessibility

Uses native <table> elements with proper ARIA roles
Keyboard navigation: Arrow keys to move between cells
Row selection announced to screen readers
Sort state announced when columns are sorted
Focus indicator clearly shows current cell
Supports both single and multiple selection modes