Components

Table

A semantic table, without a data-grid framework.

Preview

Team members
Name	Role
Ada Lovelace	Developer
Grace Hopper	Engineer

Usage

import { Table, TableCaption, TableHeader, TableBody,
  TableRow, TableHead, TableCell, TableContainer } from '@fwenthehunter/friendly-ui';

<TableContainer>
  <Table>
    <TableCaption>Team members</TableCaption>
    <TableHeader><TableRow>
      <TableHead>Name</TableHead><TableHead>Role</TableHead>
    </TableRow></TableHeader>
    <TableBody><TableRow>
      <TableCell>Ada Lovelace</TableCell><TableCell>Developer</TableCell>
    </TableRow></TableBody>
  </Table>
</TableContainer>

Compose native table elements with TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, and TableCaption. TableHead defaults to scope="col"; set scope="row" for row headers.

TableContainer adds horizontal overflow on smaller screens. Give the table a caption or accessible name. Sorting, selection, filtering, and pagination stay in your application, so a plain table requires no client JavaScript.

Props

Components accept native HTML props, className, and style. Server-compatible primitives also forward React 19 refs; Modal manages its own dialog ref.