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>

RTL

Add dir="rtl" to any parent element, typically <html>, to render right-to-left. Use text-end instead of text-right on numeric columns. See the RTL guide for details.

<div id="table-rtl-demo" class="table-container" dir="rtl">
  <table class="table">
    <caption data-i18n="caption">قائمة بفواتيرك الأخيرة.</caption>
    <thead class="table-header">
      <tr class="table-row">
        <th class="table-head w-[100px]" data-i18n="invoice">الفاتورة</th>
        <th class="table-head" data-i18n="status">الحالة</th>
        <th class="table-head" data-i18n="method">الطريقة</th>
        <th class="table-head text-end" data-i18n="amount">المبلغ</th>
      </tr>
    </thead>
    <tbody class="table-body">
      <tr class="table-row">
        <td class="table-cell font-medium">INV001</td>
        <td class="table-cell" data-i18n="paid">مدفوع</td>
        <td class="table-cell" data-i18n="creditCard">بطاقة ائتمانية</td>
        <td class="table-cell text-end">$250.00</td>
      </tr>
      <tr class="table-row">
        <td class="table-cell font-medium">INV002</td>
        <td class="table-cell" data-i18n="pending">قيد الانتظار</td>
        <td class="table-cell" data-i18n="paypal">PayPal</td>
        <td class="table-cell text-end">$150.00</td>
      </tr>
      <tr class="table-row">
        <td class="table-cell font-medium">INV003</td>
        <td class="table-cell" data-i18n="unpaid">غير مدفوع</td>
        <td class="table-cell" data-i18n="bankTransfer">تحويل بنكي</td>
        <td class="table-cell text-end">$350.00</td>
      </tr>
      <tr class="table-row">
        <td class="table-cell font-medium">INV004</td>
        <td class="table-cell" data-i18n="paid">مدفوع</td>
        <td class="table-cell" data-i18n="creditCard">بطاقة ائتمانية</td>
        <td class="table-cell text-end">$450.00</td>
      </tr>
      <tr class="table-row">
        <td class="table-cell font-medium">INV005</td>
        <td class="table-cell" data-i18n="paid">مدفوع</td>
        <td class="table-cell" data-i18n="paypal">PayPal</td>
        <td class="table-cell text-end">$550.00</td>
      </tr>
      <tr class="table-row">
        <td class="table-cell font-medium">INV006</td>
        <td class="table-cell" data-i18n="pending">قيد الانتظار</td>
        <td class="table-cell" data-i18n="bankTransfer">تحويل بنكي</td>
        <td class="table-cell text-end">$200.00</td>
      </tr>
      <tr class="table-row">
        <td class="table-cell font-medium">INV007</td>
        <td class="table-cell" data-i18n="unpaid">غير مدفوع</td>
        <td class="table-cell" data-i18n="creditCard">بطاقة ائتمانية</td>
        <td class="table-cell text-end">$300.00</td>
      </tr>
    </tbody>
    <tfoot class="table-footer">
      <tr class="table-row">
        <td class="table-cell" colspan="3" data-i18n="total">المجموع</td>
        <td class="table-cell text-end">$2,500.00</td>
      </tr>
    </tfoot>
  </table>
</div>
 
<script>
  const translations = {
    ar: {
      dir: "rtl",
      caption: "قائمة بفواتيرك الأخيرة.",
      invoice: "الفاتورة", status: "الحالة", method: "الطريقة", amount: "المبلغ",
      paid: "مدفوع", pending: "قيد الانتظار", unpaid: "غير مدفوع",
      creditCard: "بطاقة ائتمانية", paypal: "PayPal", bankTransfer: "تحويل بنكي",
      total: "المجموع",
    },
    he: {
      dir: "rtl",
      caption: "רשימת החשבוניות האחרונות שלך.",
      invoice: "חשבונית", status: "סטטוס", method: "שיטה", amount: "סכום",
      paid: "שולם", pending: "ממתין", unpaid: "לא שולם",
      creditCard: "כרטיס אשראי", paypal: "PayPal", bankTransfer: "העברה בנקאית",
      total: 'סה"כ',
    },
    en: {
      dir: "ltr",
      caption: "A list of your recent invoices.",
      invoice: "Invoice", status: "Status", method: "Method", amount: "Amount",
      paid: "Paid", pending: "Pending", unpaid: "Unpaid",
      creditCard: "Credit Card", paypal: "PayPal", bankTransfer: "Bank Transfer",
      total: "Total",
    },
  };
  window.addEventListener("message", (e) => {
    const t = translations[e.data?.lang];
    if (e.data?.type !== "sp-language" || !t) return;
    document.getElementById("table-rtl-demo").dir = t.dir;
    document.querySelectorAll("[data-i18n]").forEach((el) => {
      el.textContent = t[el.dataset.i18n];
    });
  });
</script>