Tables

Wrap a .ziom-table in .ziom-table-container (and optionally .ziom-table-responsive for horizontal scroll on small screens). Variants are additive classes on the <table>.

Basic Table

Name	Email	Status
John Doe	john@example.com	Active
Jane Smith	jane@example.com	Pending

HTML

<div class="ziom-table-container">
  <table class="ziom-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>john@example.com</td>
        <td><span class="ziom-badge ziom-badge-success">Active</span></td>
      </tr>
      <tr>
        <td>Jane Smith</td>
        <td>jane@example.com</td>
        <td><span class="ziom-badge ziom-badge-warning">Pending</span></td>
      </tr>
    </tbody>
  </table>
</div>

Compact & Striped

Building	Units	Leads
The Aspen	48	12
Maple Court	120	37
Riverside	76	21

HTML

<div class="ziom-table-container">
  <table class="ziom-table ziom-table-compact ziom-table-striped">
    <thead>
      <tr><th>Building</th><th class="numeric">Units</th><th class="numeric">Leads</th></tr>
    </thead>
    <tbody>
      <tr><td>The Aspen</td><td class="numeric">48</td><td class="numeric">12</td></tr>
      <tr><td>Maple Court</td><td class="numeric">120</td><td class="numeric">37</td></tr>
      <tr><td>Riverside</td><td class="numeric">76</td><td class="numeric">21</td></tr>
    </tbody>
  </table>
</div>

Actions Column

Name	Actions
Lease Agreement

HTML

<div class="ziom-table-container">
  <table class="ziom-table">
    <thead>
      <tr><th>Name</th><th class="actions">Actions</th></tr>
    </thead>
    <tbody>
      <tr>
        <td>Lease Agreement</td>
        <td class="actions">
          <div class="ziom-table-actions">
            <button class="ziom-btn ziom-btn-icon ziom-btn-ghost ziom-btn-xs" aria-label="Edit"><i class="ph ph-pencil-simple"></i></button>
            <button class="ziom-btn ziom-btn-icon ziom-btn-ghost ziom-btn-xs" aria-label="Delete"><i class="ph ph-trash"></i></button>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>