Table

Table composes semantic table elements inside a sunken Windows 98 frame.

Props

Export	Key props	Description
`Table`	`containerClassName`, table props	Root table with a framed scroll container.
`TableRow`	`selected`	Row styling with optional highlight state.
`TableHead`, `TableCell`, `TableHeader`, `TableBody`, `TableFooter`, `TableCaption`	native element props	Semantic table slots.

Examples

Process table

Task	Memory	Status
Explorer	14,280 K	Running
Winamp	8,512 K	Idle
Docs	21,024 K	Running

import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@murasaki/react98'
 
const processes = [
  { name: 'Explorer', memory: '14,280 K', status: 'Running' },
  { name: 'Winamp', memory: '8,512 K', status: 'Idle' },
  { name: 'Docs', memory: '21,024 K', status: 'Running' },
]
 
export function TableBasicDemo(): React.ReactElement {
  return (
    <Table containerClassName="w-80 max-h-40 overflow-auto">
      <TableHeader>
        <TableRow>
          <TableHead>Task</TableHead>
          <TableHead>Memory</TableHead>
          <TableHead>Status</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {processes.map((process, index) => (
          <TableRow key={process.name} selected={index === 1}>
            <TableCell>{process.name}</TableCell>
            <TableCell>{process.memory}</TableCell>
            <TableCell>{process.status}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}

ARIA

Table keeps native table, thead, tbody, tr, th, and td semantics. Use captions and scopes where your data needs them.

Keyboard

Table does not add grid-style keyboard navigation. Native focus behavior applies to any interactive descendants inside cells.

SSR

Table is presentational. Keep row selection deterministic during hydration.