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

Usage

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 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 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

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

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