Table

A real table in composable parts — no data layer, no column definitions.

Installation

bun add elia

@import "tailwindcss";
@import "@aile.sh/elia/styles/elia.css";
@source "../node_modules/@aile.sh/elia";

Usage

import {
  Badge,
  Table,
  TableBody,
  TableCell,
  TableFoot,
  TableHead,
  TableHeader,
  TableRow,
  useTableSort,
} from "@aile.sh/elia";

const RUNS = [
  { id: "r-8821", model: "aile-pro", status: "passed", tokens: 184320, cost: 4.61 },
  { id: "r-8820", model: "aile-core", status: "passed", tokens: 96140, cost: 1.92 },
  { id: "r-8819", model: "aile-nano", status: "failed", tokens: 12008, cost: 0.14 },
];

export function Example() {
  const { rows, headerProps } = useTableSort(RUNS);

  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableHeader {...headerProps("id")}>Run</TableHeader>
          <TableHeader {...headerProps("model")}>Model</TableHeader>
          <TableHeader>Status</TableHeader>
          <TableHeader align="right" {...headerProps("tokens")}>Tokens</TableHeader>
          <TableHeader align="right" {...headerProps("cost")}>Cost</TableHeader>
        </TableRow>
      </TableHead>
      <TableBody>
        {rows.map((run) => (
          <TableRow key={run.id}>
            <TableCell mono muted>{run.id}</TableCell>
            <TableCell>{run.model}</TableCell>
            <TableCell>
              <Badge tone={run.status === "passed" ? "green" : "red"}>
                {run.status}
              </Badge>
            </TableCell>
            <TableCell align="right" mono>
              {run.tokens.toLocaleString()}
            </TableCell>
            <TableCell align="right" mono>${run.cost.toFixed(2)}</TableCell>
          </TableRow>
        ))}
      </TableBody>
      <TableFoot>
        <TableRow>
          <TableCell colSpan={4} muted>3 runs</TableCell>
          <TableCell align="right" mono>$6.67</TableCell>
        </TableRow>
      </TableFoot>
    </Table>
  );
}

— elia design system · MIT · base · https://github.com/aile-sh/elia