Table

The table presents tabular data on native table elements, with styled headers, footers, captions, and hoverable rows.

<div class="table-container">
  <table class="table">
    <caption>A list of your recent invoices.</caption>
    <thead class="table-header">
      <tr class="table-row">
        <th class="table-head w-[100px]">Invoice</th>
        <th class="table-head">Status</th>
        <th class="table-head">Method</th>
        <th class="table-head text-right">Amount</th>
      </tr>
    </thead>
    <tbody class="table-body">
      <tr class="table-row">
        <td class="table-cell font-medium">INV001</td>
        <td class="table-cell">Paid</td>
        <td class="table-cell">Credit Card</td>
        <td class="table-cell text-right">$250.00</td>
      </tr>
      <tr class="table-row">
        <td class="table-cell font-medium">INV002</td>
        <td class="table-cell">Pending</td>
        <td class="table-cell">PayPal</td>
        <td class="table-cell text-right">$150.00</td>
      </tr>
      <tr class="table-row">
        <td class="table-cell font-medium">INV003</td>
        <td class="table-cell">Unpaid</td>
        <td class="table-cell">Bank Transfer</td>
        <td class="table-cell text-right">$350.00</td>
      </tr>
      <tr class="table-row">
        <td class="table-cell font-medium">INV004</td>
        <td class="table-cell">Paid</td>
        <td class="table-cell">Credit Card</td>
        <td class="table-cell text-right">$450.00</td>
      </tr>
      <tr class="table-row">
        <td class="table-cell font-medium">INV005</td>
        <td class="table-cell">Paid</td>
        <td class="table-cell">PayPal</td>
        <td class="table-cell text-right">$550.00</td>
      </tr>
      <tr class="table-row">
        <td class="table-cell font-medium">INV006</td>
        <td class="table-cell">Pending</td>
        <td class="table-cell">Bank Transfer</td>
        <td class="table-cell text-right">$200.00</td>
      </tr>
      <tr class="table-row">
        <td class="table-cell font-medium">INV007</td>
        <td class="table-cell">Unpaid</td>
        <td class="table-cell">Credit Card</td>
        <td class="table-cell text-right">$300.00</td>
      </tr>
    </tbody>
    <tfoot class="table-footer">
      <tr class="table-row">
        <td class="table-cell" colspan="3">Total</td>
        <td class="table-cell text-right">$2,500.00</td>
      </tr>
    </tfoot>
  </table>
</div>

Usage

Add the classes to their native table elements, and wrap the table in a table-container so wide tables scroll horizontally instead of breaking the layout. A <caption> needs no class.

Class	Description
`table-container`	Add to a wrapper `<div>` for horizontal scrolling
`table`	Add to the `<table>`
`table-header`	Add to the `<thead>`
`table-body`	Add to the `<tbody>`
`table-footer`	Add to the `<tfoot>`
`table-row`	Add to each `<tr>`
`table-head`	Add to each `<th>`
`table-cell`	Add to each `<td>`

<div class="table-container">
  <table class="table">
    <thead class="table-header">
      <tr class="table-row">
        <th class="table-head">Name</th>
      </tr>
    </thead>
    <tbody class="table-body">
      <tr class="table-row">
        <td class="table-cell">Leila Navarro</td>
      </tr>
    </tbody>
  </table>
</div>

Examples

Footer

Summarize columns in a table-footer.

<div class="table-container">
  <table class="table">
    <caption>A list of your recent invoices.</caption>
    <thead class="table-header">
      <tr class="table-row">
        <th class="table-head w-[100px]">Invoice</th>
        <th class="table-head">Status</th>
        <th class="table-head">Method</th>
        <th class="table-head text-right">Amount</th>
      </tr>
    </thead>
    <tbody class="table-body">
      <tr class="table-row">
        <td class="table-cell font-medium">INV001</td>
        <td class="table-cell">Paid</td>
        <td class="table-cell">Credit Card</td>
        <td class="table-cell text-right">$250.00</td>
      </tr>
      <tr class="table-row">
        <td class="table-cell font-medium">INV002</td>
        <td class="table-cell">Pending</td>
        <td class="table-cell">PayPal</td>
        <td class="table-cell text-right">$150.00</td>
      </tr>
      <tr class="table-row">
        <td class="table-cell font-medium">INV003</td>
        <td class="table-cell">Unpaid</td>
        <td class="table-cell">Bank Transfer</td>
        <td class="table-cell text-right">$350.00</td>
      </tr>
    </tbody>
    <tfoot class="table-footer">
      <tr class="table-row">
        <td class="table-cell" colspan="3">Total</td>
        <td class="table-cell text-right">$2,500.00</td>
      </tr>
    </tfoot>
  </table>
</div>

Actions

End rows with a dropdown of row actions.

<div class="table-container">
  <table class="table">
    <thead class="table-header">
      <tr class="table-row">
        <th class="table-head">Product</th>
        <th class="table-head">Price</th>
        <th class="table-head text-right">Actions</th>
      </tr>
    </thead>
    <tbody class="table-body">
      <tr class="table-row">
        <td class="table-cell font-medium">Wireless Mouse</td>
        <td class="table-cell">$29.99</td>
        <td class="table-cell text-right">
          <button
            id="table-action-1"
            class="btn btn-ghost btn-sm btn-icon"
            aria-label="Open menu"
          >
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
          </button>
        </td>
      </tr>
      <tr class="table-row">
        <td class="table-cell font-medium">Mechanical Keyboard</td>
        <td class="table-cell">$129.99</td>
        <td class="table-cell text-right">
          <button
            id="table-action-2"
            class="btn btn-ghost btn-sm btn-icon"
            aria-label="Open menu"
          >
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
          </button>
        </td>
      </tr>
      <tr class="table-row">
        <td class="table-cell font-medium">USB-C Hub</td>
        <td class="table-cell">$49.99</td>
        <td class="table-cell text-right">
          <button
            id="table-action-3"
            class="btn btn-ghost btn-sm btn-icon"
            aria-label="Open menu"
          >
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</div>
 
<div
  class="dropdown"
  data-sp-toggle="#table-action-1"
  data-sp-placement="bottom-end"
>
  <button class="dropdown-item">Edit</button>
  <button class="dropdown-item">Duplicate</button>
  <div class="dropdown-separator"></div>
  <button class="dropdown-item dropdown-item-destructive">Delete</button>
</div>
 
<div
  class="dropdown"
  data-sp-toggle="#table-action-2"
  data-sp-placement="bottom-end"
>
  <button class="dropdown-item">Edit</button>
  <button class="dropdown-item">Duplicate</button>
  <div class="dropdown-separator"></div>
  <button class="dropdown-item dropdown-item-destructive">Delete</button>
</div>
 
<div
  class="dropdown"
  data-sp-toggle="#table-action-3"
  data-sp-placement="bottom-end"
>
  <button class="dropdown-item">Edit</button>
  <button class="dropdown-item">Duplicate</button>
  <div class="dropdown-separator"></div>
  <button class="dropdown-item dropdown-item-destructive">Delete</button>
</div>

Striped

Stripe alternating rows with an odd: utility.

<div class="table-container">
  <table class="table">
    <thead class="table-header">
      <tr class="table-row">
        <th class="table-head w-[100px]">Invoice</th>
        <th class="table-head">Status</th>
        <th class="table-head">Method</th>
        <th class="table-head text-right">Amount</th>
      </tr>
    </thead>
    <tbody class="table-body">
      <tr class="table-row odd:bg-muted/50">
        <td class="table-cell font-medium">INV001</td>
        <td class="table-cell">Paid</td>
        <td class="table-cell">Credit Card</td>
        <td class="table-cell text-right">$250.00</td>
      </tr>
      <tr class="table-row odd:bg-muted/50">
        <td class="table-cell font-medium">INV002</td>
        <td class="table-cell">Pending</td>
        <td class="table-cell">PayPal</td>
        <td class="table-cell text-right">$150.00</td>
      </tr>
      <tr class="table-row odd:bg-muted/50">
        <td class="table-cell font-medium">INV003</td>
        <td class="table-cell">Unpaid</td>
        <td class="table-cell">Bank Transfer</td>
        <td class="table-cell text-right">$350.00</td>
      </tr>
      <tr class="table-row odd:bg-muted/50">
        <td class="table-cell font-medium">INV004</td>
        <td class="table-cell">Paid</td>
        <td class="table-cell">Credit Card</td>
        <td class="table-cell text-right">$450.00</td>
      </tr>
      <tr class="table-row odd:bg-muted/50">
        <td class="table-cell font-medium">INV005</td>
        <td class="table-cell">Paid</td>
        <td class="table-cell">PayPal</td>
        <td class="table-cell text-right">$550.00</td>
      </tr>
    </tbody>
  </table>
</div>

Selected rows

A row containing a checked checkbox tints itself; see the checkbox page for the full row-selection pattern.

<div class="table-container">
  <table class="table">
    <thead class="table-header">
      <tr class="table-row">
        <th class="table-head w-10">
          <input type="checkbox" class="checkbox" aria-label="Select all" />
        </th>
        <th class="table-head">Invoice</th>
        <th class="table-head text-right">Amount</th>
      </tr>
    </thead>
    <tbody class="table-body">
      <tr class="table-row">
        <td class="table-cell">
          <input
            type="checkbox"
            class="checkbox"
            aria-label="Select INV001"
            checked
          />
        </td>
        <td class="table-cell font-medium">INV001</td>
        <td class="table-cell text-right">$250.00</td>
      </tr>
      <tr class="table-row">
        <td class="table-cell">
          <input type="checkbox" class="checkbox" aria-label="Select INV002" />
        </td>
        <td class="table-cell font-medium">INV002</td>
        <td class="table-cell text-right">$150.00</td>
      </tr>
    </tbody>
  </table>
</div>