Table Component

Reference: Elevate Lookbook | Specs: DESIGN.md § Data Tables

Basic Table

Static data table with proper styling, alternating rows, and hover states

Product Category Rating Reviews Price
HubSpot CRM CRM Software 4.5 12,345 Free
Salesforce CRM Software 4.3 18,567 $25/user/mo
Slack Team Chat 4.6 23,891 $8/user/mo
Zoom Video Conferencing 4.5 15,234 $15/user/mo
Asana Project Management 4.4 11,890 $11/user/mo

Sortable Table

Click column headers to sort ascending/descending. Supports text, number, and mixed data types.

Product Category Rating Reviews Price
HubSpot CRM CRM Software 4.5 12,345 Free
Salesforce CRM Software 4.3 18,567 $25/user/mo
Slack Team Chat 4.6 23,891 $8/user/mo
Zoom Video Conferencing 4.5 15,234 $15/user/mo
Asana Project Management 4.4 11,890 $11/user/mo
Monday.com Project Management 4.7 9,234 $10/user/mo

Compact Table

Denser spacing for data-heavy views

Name Email Role Status
Jane Doe jane@example.com Admin Active
John Smith john@example.com User Active
Alice Johnson alice@example.com User Inactive

With Product Avatars

Include product logos using the product_avatar component

Logo Product Category Rating Reviews
HubSpot CRM
HubSpot CRM CRM Software 4.5 12,345
Salesforce
Salesforce CRM Software 4.3 18,567
Slack
Slack Team Chat 4.6 23,891
Product placeholder
Example Product Business Software 4.2 8,432

With Product Details

Combine avatar, name, rating, and category in a single cell using product_details component

Product Reviews Price Status
HubSpot CRM
HubSpot CRM
4.5 (12,345)
12,345 Free Active
Salesforce
Salesforce
4.3 (18,567)
18,567 $25/user/mo Active
Slack
Slack
4.6 (23,891)
23,891 $8/user/mo Active
Product placeholder
Example Product
4.2 (8,432)
8,432 Free Active

Usage

<div class="elv-table-container">
  <table class="elv-table">
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
    </tbody>
  </table>
</div>

<!-- Sortable variant -->
<table class="elv-table elv-table--sortable">
  <thead>
    <tr>
      <th data-sortable data-type="text">Name</th>
      <th data-sortable data-type="number">Count</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Item</td>
      <td data-value="100">100</td>
    </tr>
  </tbody>
</table>

Design Notes