Table

Styled data table. CSS-only — no Web Component needed.

Basic

Preview Code

<div class="ac-table-wrapper">
<table class="ac-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Status</th>
      <th>Role</th>
      <th>Joined</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Juan Panozzo</td>
      <td><ac-badge variant="success">Active</ac-badge></td>
      <td>Admin</td>
      <td>Jan 2024</td>
    </tr>
    <tr>
      <td>María García</td>
      <td><ac-badge variant="success">Active</ac-badge></td>
      <td>Editor</td>
      <td>Mar 2024</td>
    </tr>
    <tr>
      <td>Carlos López</td>
      <td><ac-badge variant="warning">Invited</ac-badge></td>
      <td>Viewer</td>
      <td>—</td>
    </tr>
  </tbody>
</table>
</div>

Copy

Striped

Preview Code

<table class="ac-table ac-table--striped">...</table>

Copy

Compact

Preview Code

<table class="ac-table ac-table--compact">...</table>

Copy

CSS modifiers

Class	Description
ac-table--striped	Alternating row background
ac-table--compact	Tighter padding
ac-table--sticky-head	Sticky <thead> on scroll
ac-table-wrapper	Scrollable container
ac-table-wrapper--fixed-height	Fixed height with vertical scroll