Table

Table presents comparable structured data through row and column relationships with clear semantics for headings, sorting, and dense scanning.

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

InstallTerminal

npm install @a3s-lab/ui@0.4.0

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

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

Usage

Include CSS

Import Tailwind and one full A3S UI style bundle.

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

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

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/table.css";
@import "@a3s-lab/ui/styles/a3s.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>

Examples

Examples below follow upstream table patterns where they map cleanly to A3S UI'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>

#Table

#Usage

Include CSS

Add your table HTML

#Examples

#With Footer

#With Actions

#RTL

Table

Usage

Examples

With Footer

With Actions

RTL