Table

A list of your recent invoices.
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
INV004	Paid	Paypal	$450.00
INV005	Paid	Credit Card	$550.00
INV006	Pending	Bank Transfer	$200.00
INV007	Unpaid	Credit Card	$300.00
Total			$2,500.00

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

Usage

Include CSS

Import Tailwind and one full Basecoat style bundle.

@import "tailwindcss";
@import "basecoat-css/vega.css";

Or import only the base CSS, Table component CSS, and one style pack.

@import "tailwindcss";
@import "basecoat-css/base.css";
@import "basecoat-css/components/table.css";
@import "basecoat-css/styles/vega.css";

Using CDN or bundler imports? See the Installation page.

Add your table HTML

Add class="table" to your table element. Wrap it in class="table-container" when horizontal scrolling is needed.

<div class="table-container">
<table class="table">
  <!-- Content of your table -->
</table>
</div>

Scrollable tables clip overlays

Do not place inline popovers, dropdown menus, selects, or tooltips inside .table-container. The table container uses horizontal overflow for wide tables, so absolutely positioned overlays can be clipped or create scrollbars. Keep overlay actions outside scrollable table regions, or omit .table-container when the table does not need horizontal scrolling.

Examples

Examples below follow upstream table patterns where they map cleanly to Basecoat’s non-portalled HTML model.

A list of your recent invoices.
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
Total			$2,500.00

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

With Actions

Product	Price	Actions
Wireless Mouse	$29.99
Mechanical Keyboard	$129.99
USB-C Hub	$49.99

<div class="table-container">
<table class="table">
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th class="text-end">Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="font-medium">Wireless Mouse</td>
      <td>$29.99</td>
      <td class="text-end">
        <div class="inline-flex gap-2">
          <button type="button" class="btn" data-variant="outline" data-size="sm">Edit</button>
          <button type="button" class="btn" data-variant="destructive" data-size="sm">Delete</button>
        </div>
      </td>
    </tr>
    <tr>
      <td class="font-medium">Mechanical Keyboard</td>
      <td>$129.99</td>
      <td class="text-end">
        <div class="inline-flex gap-2">
          <button type="button" class="btn" data-variant="outline" data-size="sm">Edit</button>
          <button type="button" class="btn" data-variant="destructive" data-size="sm">Delete</button>
        </div>
      </td>
    </tr>
    <tr>
      <td class="font-medium">USB-C Hub</td>
      <td>$49.99</td>
      <td class="text-end">
        <div class="inline-flex gap-2">
          <button type="button" class="btn" data-variant="outline" data-size="sm">Edit</button>
          <button type="button" class="btn" data-variant="destructive" data-size="sm">Delete</button>
        </div>
      </td>
    </tr>
  </tbody>
</table>
</div>

RTL

Set dir="rtl" on the table container when needed. Use logical alignment utilities such as text-end.

قائمة الفواتير الأخيرة.
الفاتورة	الحالة	المبلغ
INV001	مدفوعة	$250.00

<div class="table-container" dir="rtl">
  <table class="table">
    <caption>قائمة الفواتير الأخيرة.</caption>
    <thead>
      <tr>
        <th>الفاتورة</th>
        <th>الحالة</th>
        <th class="text-end">المبلغ</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="font-medium">INV001</td>
        <td>مدفوعة</td>
        <td class="text-end">$250.00</td>
      </tr>
    </tbody>
  </table>
</div>