Tuimorphic

Table

Data table with MS-DOS terminal aesthetics and TUI-style borders.

Import

import {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableRow,
  TableHead,
  TableCell,
  TableCaption,
} from 'tuimorphic';

Usage

The Table component provides a declarative grid structure for organizing data with monospace alignment.

NameStatusRole
AliceActiveAdmin
BobPendingUser
CharlieActiveUser
<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>System A</TableCell>
      <TableCell>Online</TableCell>
    </TableRow>
  </TableBody>
</Table>

Props

Table

PropTypeDefaultDescription
childrenReact.ReactNode-Table content (required)
borderedbooleanfalseWhether to show borders between cells
stripedbooleanfalseWhether to show striped rows
size'compact' | 'default''default'Row height
classNamestring-Additional CSS class name

TableRow

PropTypeDefaultDescription
childrenReact.ReactNode-TableHead or TableCell elements
selectedbooleanfalseWhether this row is highlighted
classNamestring-Additional CSS class name

TableHead / TableCell

PropTypeDefaultDescription
childrenReact.ReactNode-Cell content
align'left' | 'center' | 'right''left'Text alignment
classNamestring-Additional CSS class name

TableCell (additional)

PropTypeDefaultDescription
numericbooleanfalseEnable monospace number alignment
truncatebooleanfalseTruncate overflowing text

TableCaption

PropTypeDefaultDescription
childrenReact.ReactNode-Caption text
position'top' | 'bottom''top'Position relative to table

Variants

Basic

NameStatusRole
AliceActiveAdmin
BobPendingUser
CharlieActiveUser
<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Server A</TableCell>
      <TableCell>Online</TableCell>
    </TableRow>
  </TableBody>
</Table>

Bordered

Server Status Report
ServerCPUMemoryStatus
web-0145%2.1GBOnline
web-0262%3.4GBOnline
db-0178%8.2GBWarning
<Table bordered>
  <TableHeader>
    <TableRow>
      <TableHead>Server</TableHead>
      <TableHead align="right">CPU</TableHead>
      <TableHead align="right">Memory</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>web-01</TableCell>
      <TableCell align="right">45%</TableCell>
      <TableCell align="right">2.1GB</TableCell>
    </TableRow>
  </TableBody>
</Table>

Striped

CommandDescription
lsList directory contents
cdChange directory
pwdPrint working directory
mkdirCreate a directory
rmRemove files or directories
<Table bordered striped>
  <TableHeader>
    <TableRow>
      <TableHead>Server</TableHead>
      <TableHead align="right">CPU</TableHead>
      <TableHead align="right">Memory</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>web-01</TableCell>
      <TableCell align="right">45%</TableCell>
      <TableCell align="right">2.1GB</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>web-02</TableCell>
      <TableCell align="right">32%</TableCell>
      <TableCell align="right">1.8GB</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>web-03</TableCell>
      <TableCell align="right">67%</TableCell>
      <TableCell align="right">3.2GB</TableCell>
    </TableRow>
  </TableBody>
</Table>

With Selection

FileSizeModified
document.txt12KB2024-01-10
image.png256KB2024-01-12
script.sh4KB2024-01-14
<Table>
  <TableBody>
    <TableRow>
      <TableCell>Regular row</TableCell>
    </TableRow>
    <TableRow selected>
      <TableCell>Selected row</TableCell>
    </TableRow>
  </TableBody>
</Table>

With Caption

<Table bordered>
  <TableCaption>Server Status Report</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Server</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>web-01</TableCell>
      <TableCell>Online</TableCell>
    </TableRow>
  </TableBody>
</Table>

Compact Size

<Table bordered striped size="compact">
  {/* ... */}
</Table>
<Table bordered>
  <TableHeader>
    <TableRow>
      <TableHead>Item</TableHead>
      <TableHead align="right">Price</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Widget A</TableCell>
      <TableCell align="right" numeric>$10.00</TableCell>
    </TableRow>
  </TableBody>
  <TableFooter>
    <TableRow>
      <TableCell>Total</TableCell>
      <TableCell align="right" numeric>$10.00</TableCell>
    </TableRow>
  </TableFooter>
</Table>

Previous

Loader

Next

CodeBlock

On this page