Table.

Information that lines up.

In practice

Compose TableCaption, TableHeader, TableBody, TableRow, TableHead and TableCell. Horizontal overflow stays inside its container.

Installation

Install Coal once. Components and TypeScript declarations are included. React 19 and React DOM 19 are peer dependencies.

npm install http://localhost:3100/downloads/chlohal-coal-ui-0.5.0.tgz

This installs the local package. It is not yet published on npm. See installation for stylesheet setup and integration.

Usage

"use client";
import * as React from "react";
import "@chlohal/coal-ui/styles.css";
import { Badge, Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption } from "@chlohal/coal-ui";
export default function Example() {
    return (<Table>
          <TableCaption>Recent projects</TableCaption>
          <TableHeader>
            <TableRow>
              <TableHead>Project</TableHead>
              <TableHead>Status</TableHead>
              <TableHead>Updated</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {[
            ["Studio website", "Published", "Today"],
            ["Brand guidelines", "Draft", "Yesterday"],
            ["Component library", "In review", "Sep 10"],
        ].map(([n, s, d]) => (<TableRow key={n}>
                <TableCell>{n}</TableCell>
                <TableCell>
                  <Badge variant={s === "Published" ? "success" : "secondary"}>
                    {s}
                  </Badge>
                </TableCell>
                <TableCell>
                  {d}
                </TableCell>
              </TableRow>))}
          </TableBody>
        </Table>);
}

Source

The original Coal implementation. Use the package export to integrate it.

import * as React from "react";
import { cn } from "./internal.js";
export function Table({
  className,
  ...props
}: React.ComponentPropsWithRef<"table">) {
  return (
    <div className="coal-table-scroll">
      <table className={cn("coal-table", className)} {...props} />
    </div>
  );
}
export function TableHeader({
  className,
  ...props
}: React.ComponentPropsWithRef<"thead">) {
  return <thead className={cn("coal-table-header", className)} {...props} />;
}
export function TableBody({
  className,
  ...props
}: React.ComponentPropsWithRef<"tbody">) {
  return <tbody className={cn("coal-table-body", className)} {...props} />;
}
export function TableHead({
  className,
  ...props
}: React.ComponentPropsWithRef<"th">) {
  return (
    <th scope="col" className={cn("coal-table-head", className)} {...props} />
  );
}
export function TableRow({
  className,
  ...props
}: React.ComponentPropsWithRef<"tr">) {
  return <tr className={cn("coal-table-row", className)} {...props} />;
}
export function TableCell({
  className,
  ...props
}: React.ComponentPropsWithRef<"td">) {
  return <td className={cn("coal-table-cell", className)} {...props} />;
}
export function TableCaption({
  className,
  ...props
}: React.ComponentPropsWithRef<"caption">) {
  return <caption className={cn("coal-table-caption", className)} {...props} />;
}

Accessibility checklist

• Provide an accessible name for controls, including icon-only buttons.
• Check keyboard navigation, visible focus and disabled states in your application.
• Do not rely on color alone to communicate status.