basecoat/site/src/docs/components/table.mdx

# Table

<Preview class="w-full">
<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>
</Preview>

## Usage

<Steps>
  <Step title="Include CSS">

Import Tailwind and one full Basecoat style bundle.

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

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

```css
@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](/installation).

  </Step>
  <Step title="Add your table HTML">

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

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

  </Step>
</Steps>

<Callout type="warning" title="Scrollable tables clip overlays" icon="triangle-alert">
  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.
</Callout>

## Examples

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

### With Footer

<Preview class="w-full">
<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>
</Preview>

### With Actions

<Preview class="w-full">
<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>
</Preview>

### RTL

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

<Preview class="w-full">
<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>
</Preview>