PageWeave/Design
llms.txt Contribute
Menu
Styles Themes Components Skills Prompts Guides Collections Changelog About

Components / Data Table

6 Component tabledatadashboarddense .md

Data Table

Dense, readable, mono headers

Live preview — rendered in this site's theme Data Table
Region Site Views Status
EUacme.com48,201live
EUstudio.at12,847draft
UStools.io96,033live

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 Copy-paste source

<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>