data

Table

Rows and columns of data, such as lessons or invoices, that scroll sideways when wide.

CSS onlyPlain classes; no JavaScript in any stack.

Usage

Put a native <table> inside ca-table. Align numbers to the end with Tailwind's text-end and tabular-nums.

Lessons this week
Student	Day	Time	Minutes
Sam de Vries	Tuesday	09:00	90
Noor Bakker	Wednesday	14:30	60
Lucas Jansen	Friday	11:00	120

<div class="ca-table w-full" role="region" aria-labelledby="lessons-caption" tabindex="0">
  <table>
    <caption class="ca-table__caption" id="lessons-caption">Lessons this week</caption>
    <thead>
      <tr>
        <th scope="col">Student</th>
        <th scope="col">Day</th>
        <th scope="col">Time</th>
        <th scope="col" class="text-end">Minutes</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Sam de Vries</td>
        <td>Tuesday</td>
        <td>09:00</td>
        <td class="text-end tabular-nums">90</td>
      </tr>
      <tr>
        <td>Noor Bakker</td>
        <td>Wednesday</td>
        <td>14:30</td>
        <td class="text-end tabular-nums">60</td>
      </tr>
      <tr>
        <td>Lucas Jansen</td>
        <td>Friday</td>
        <td>11:00</td>
        <td class="text-end tabular-nums">120</td>
      </tr>
    </tbody>
  </table>
</div>

Examples

Guidance and accessibility

When to use

Use a table for data people compare across rows and columns.
For a list of items with one or two details each, a list of cards reads better on small screens.

Accessibility

Name the table with a <caption>, and give header cells scope="col" or scope="row".
When the table can scroll sideways, give ca-table tabindex="0", role="region" and aria-labelledby pointing at the caption, so keyboard users can scroll it and screen readers announce it.
Keep numbers in columns aligned to the end so digits line up.

Classes

Generated from the component contract. Parts use __, modifiers use --.

Classes of the table component
Class	Kind	Use it for
`ca-table`	Component	Scroll container that styles the `<table>` inside it.
`ca-table__caption`	Part	The `<caption>` that names the table.

Skins

The same markup, dressed by each skin. Structure and behavior stay the same; only the look changes.

Base skin

Neutral grayscale starting point; product skins extend it and change what differs.

Lessons this week
Student	Day	Time	Minutes
Sam de Vries	Tuesday	09:00	90
Noor Bakker	Wednesday	14:30	60
Lucas Jansen	Friday	11:00	120

Calaca skin

The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.

Lessons this week
Student	Day	Time	Minutes
Sam de Vries	Tuesday	09:00	90
Noor Bakker	Wednesday	14:30	60
Lucas Jansen	Friday	11:00	120

Proof skin

Pilot skin pushed far from base: square, heavy, offset shadows, larger targets.

Lessons this week
Student	Day	Time	Minutes
Sam de Vries	Tuesday	09:00	90
Noor Bakker	Wednesday	14:30	60
Lucas Jansen	Friday	11:00	120

Crossview skin

The CrossView proofing table: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.

Lessons this week
Student	Day	Time	Minutes
Sam de Vries	Tuesday	09:00	90
Noor Bakker	Wednesday	14:30	60
Lucas Jansen	Friday	11:00	120

Framework notes

Link the prebuilt stylesheet of your skin next to your brand theme. No build step.

<link rel="stylesheet" href="theme.css" />
<link rel="stylesheet" href="ca-base.css" />

In Astro, Vite and other Tailwind projects, import Calaca after Tailwind and your theme in your main stylesheet.

@import "tailwindcss";
@import "./theme.css";
@import "@calaca/ui/core.css";
@import "@calaca/ui/skins/base.css";

Same stylesheet as above; write the classes in className.

<button className="ca-button ca-button--primary ca-button--md" type="button">Save changes</button>

Search

Documentation