Skip to main content

Table

Structured data grid with headers and rows.

Selectors

table
Auto-styled data table within .cider scope. Includes rounded corners, hover rows, and ring shadow.
.table-striped
Alternating row background modifier.

Default

Invoice Status Method Amount
INV-001 Paid Credit Card $250.00
INV-002 Pending PayPal $150.00
INV-003 Unpaid Bank Transfer $350.00
INV-004 Paid Credit Card $450.00
INV-005 Paid Apple Pay $550.00
Total $1,750.00
HTML 
<table>
  <thead>
    <tr>
      <th scope="col">Invoice</th>
      <th scope="col">Status</th>
      <th scope="col">Method</th>
      <th scope="col" class="text-right">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="font-medium">INV-001</td>
      <td>Paid</td>
      <td>Credit Card</td>
      <td class="text-right">$250.00</td>
    </tr>
    <tr>
      <td class="font-medium">INV-002</td>
      <td>Pending</td>
      <td>PayPal</td>
      <td class="text-right">$150.00</td>
    </tr>
    <tr>
      <td class="font-medium">INV-003</td>
      <td>Unpaid</td>
      <td>Bank Transfer</td>
      <td class="text-right">$350.00</td>
    </tr>
    <tr>
      <td class="font-medium">INV-004</td>
      <td>Paid</td>
      <td>Credit Card</td>
      <td class="text-right">$450.00</td>
    </tr>
    <tr>
      <td class="font-medium">INV-005</td>
      <td>Paid</td>
      <td>Apple Pay</td>
      <td class="text-right">$550.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3" class="font-medium">Total</td>
      <td class="text-right font-semibold">$1,750.00</td>
    </tr>
  </tfoot>
</table>

With Actions

Product Category Price Actions
Wireless Mouse Peripherals $49.99
Mechanical Keyboard Peripherals $129.99
USB-C Hub Accessories $79.99
HTML 
<table>
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Category</th>
      <th scope="col" class="text-right">Price</th>
      <th scope="col" class="text-right">Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="font-medium">Wireless Mouse</td>
      <td class="text-tertiary-foreground">Peripherals</td>
      <td class="text-right">$49.99</td>
      <td class="text-right">
        <div class="popover popover-menu popover-end">
          <button aria-label="Actions" class="inline-flex size-8 items-center justify-center rounded-lg text-tertiary-foreground transition-colors hover:bg-secondary hover:text-foreground cursor-pointer">
            <svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="5" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="12" cy="19" r="1"/></svg>
          </button>
          <div popover>
            <button>Edit</button>
            <button>Duplicate</button>
            <hr />
            <button class="text-destructive">Delete</button>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td class="font-medium">Mechanical Keyboard</td>
      <td class="text-tertiary-foreground">Peripherals</td>
      <td class="text-right">$129.99</td>
      <td class="text-right">
        <div class="popover popover-menu popover-end">
          <button aria-label="Actions" class="inline-flex size-8 items-center justify-center rounded-lg text-tertiary-foreground transition-colors hover:bg-secondary hover:text-foreground cursor-pointer">
            <svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="5" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="12" cy="19" r="1"/></svg>
          </button>
          <div popover>
            <button>Edit</button>
            <button>Duplicate</button>
            <hr />
            <button class="text-destructive">Delete</button>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td class="font-medium">USB-C Hub</td>
      <td class="text-tertiary-foreground">Accessories</td>
      <td class="text-right">$79.99</td>
      <td class="text-right">
        <div class="popover popover-menu popover-end">
          <button aria-label="Actions" class="inline-flex size-8 items-center justify-center rounded-lg text-tertiary-foreground transition-colors hover:bg-secondary hover:text-foreground cursor-pointer">
            <svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="5" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="12" cy="19" r="1"/></svg>
          </button>
          <div popover>
            <button>Edit</button>
            <button>Duplicate</button>
            <hr />
            <button class="text-destructive">Delete</button>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

With Checkboxes

Task Priority
Update landing page High
Review pull requests Medium
Fix authentication bug High
Write API documentation Low
Set up CI/CD pipeline Medium
HTML 
<table>
  <thead>
    <tr>
      <th scope="col" class="w-10"><input type="checkbox" aria-label="Select all" /></th>
      <th scope="col">Task</th>
      <th scope="col">Priority</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" checked aria-label="Update landing page" /></td>
      <td><span class="font-medium line-through text-tertiary-foreground">Update landing page</span></td>
      <td class="text-tertiary-foreground">High</td>
    </tr>
    <tr>
      <td><input type="checkbox" checked aria-label="Review pull requests" /></td>
      <td><span class="font-medium line-through text-tertiary-foreground">Review pull requests</span></td>
      <td class="text-tertiary-foreground">Medium</td>
    </tr>
    <tr>
      <td><input type="checkbox" aria-label="Fix authentication bug" /></td>
      <td class="font-medium">Fix authentication bug</td>
      <td class="text-tertiary-foreground">High</td>
    </tr>
    <tr>
      <td><input type="checkbox" aria-label="Write API documentation" /></td>
      <td class="font-medium">Write API documentation</td>
      <td class="text-tertiary-foreground">Low</td>
    </tr>
    <tr>
      <td><input type="checkbox" aria-label="Set up CI/CD pipeline" /></td>
      <td class="font-medium">Set up CI/CD pipeline</td>
      <td class="text-tertiary-foreground">Medium</td>
    </tr>
  </tbody>
</table>

Striped

Date Description Amount
Mar 1, 2026 Subscription renewal $9.99
Feb 15, 2026 One-time purchase $49.00
Feb 1, 2026 Subscription renewal $9.99
Jan 15, 2026 Storage upgrade $2.99
Jan 1, 2026 Subscription renewal $9.99
HTML 
<table class="table-striped">
  <thead>
    <tr>
      <th scope="col">Date</th>
      <th scope="col">Description</th>
      <th scope="col" class="text-right">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="text-tertiary-foreground">Mar 1, 2026</td>
      <td class="font-medium">Subscription renewal</td>
      <td class="text-right">$9.99</td>
    </tr>
    <tr>
      <td class="text-tertiary-foreground">Feb 15, 2026</td>
      <td class="font-medium">One-time purchase</td>
      <td class="text-right">$49.00</td>
    </tr>
    <tr>
      <td class="text-tertiary-foreground">Feb 1, 2026</td>
      <td class="font-medium">Subscription renewal</td>
      <td class="text-right">$9.99</td>
    </tr>
    <tr>
      <td class="text-tertiary-foreground">Jan 15, 2026</td>
      <td class="font-medium">Storage upgrade</td>
      <td class="text-right">$2.99</td>
    </tr>
    <tr>
      <td class="text-tertiary-foreground">Jan 1, 2026</td>
      <td class="font-medium">Subscription renewal</td>
      <td class="text-right">$9.99</td>
    </tr>
  </tbody>
</table>