> From [PageWeave Design](https://pageweave-design.pageweave.site) — a working library for agentic web development. Full index: [llms.txt](https://pageweave-design.pageweave.site/llms.txt)

# Data Table

Dense, readable, mono headers

- Category: Components
- Tags: table data dashboard dense

## Usage

Tables are a feature, not a fallback — especially in industrial/editorial registers. Mono headers, tabular numerals, hairline row borders.

## Rules

- Numbers: `font-mono tabular-nums text-right` — digits must align vertically.
- Row hover lifts to base-200; keep padding tight (`table-sm`) for density.
- Status badges use semantic colors at `badge-sm`; never raw colored text alone.
- Wrap in `overflow-x-auto` — horizontal scroll beats squashed columns on mobile.
- Cap columns at 5–6; push detail to a row-detail page instead.

## HTML source

```html
<div class="overflow-x-auto border border-base-content/10">
  <table class="table table-sm">
    <thead>
      <tr class="border-base-content/15">
        <th class="font-mono text-[0.68rem] uppercase tracking-[0.1em] text-base-content/50 font-medium">Region</th>
        <th class="font-mono text-[0.68rem] uppercase tracking-[0.1em] text-base-content/50 font-medium">Site</th>
        <th class="font-mono text-[0.68rem] uppercase tracking-[0.1em] text-base-content/50 font-medium text-right">Views</th>
        <th class="font-mono text-[0.68rem] uppercase tracking-[0.1em] text-base-content/50 font-medium text-right">Status</th>
      </tr>
    </thead>
    <tbody class="text-sm">
      <tr class="border-base-content/10 hover:bg-base-200">
        <td>EU</td><td>acme.com</td>
        <td class="text-right font-mono tabular-nums">48,201</td>
        <td class="text-right"><span class="badge badge-success badge-sm border-0">live</span></td>
      </tr>
      <tr class="border-base-content/10 hover:bg-base-200">
        <td>EU</td><td>studio.at</td>
        <td class="text-right font-mono tabular-nums">12,847</td>
        <td class="text-right"><span class="badge badge-warning badge-sm border-0">draft</span></td>
      </tr>
      <tr class="border-base-content/10 hover:bg-base-200">
        <td>US</td><td>tools.io</td>
        <td class="text-right font-mono tabular-nums">96,033</td>
        <td class="text-right"><span class="badge badge-success badge-sm border-0">live</span></td>
      </tr>
    </tbody>
  </table>
</div>
```