basecoat/docs/src/components/table.md

templateEngineOverride, layout, title, description, toc

templateEngineOverride	layout	title	description	toc
njk	layouts/page.njk	Table	A responsive table component.	label id Usage usage label id children Examples examples label id Footer example-footer label id Actions example-actions label id RTL example-rtl

{% from "macros/code_preview.njk" import code_preview %} {% from "macros/code_block.njk" import code_block %}

{% set code %}

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

{% endset %} {{ code_preview("table", code, "w-full") }}

Usage

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

{% set code %}

{% endset %} {{ code_block(code) }}

Examples

Footer

{% set code_footer %}

Invoice	Amount
INV001	$250.00
Total	$250.00

{% endset %} {{ code_preview("table-footer", code_footer, "w-full") }}

Actions

{% set code_actions %}

Name	Actions
Project Alpha	Open

{% endset %} {{ code_preview("table-actions", code_actions, "w-full") }}

RTL

Tables support right-to-left layouts through native table direction and logical alignment utilities such as text-end.

{% set code_rtl %}

قائمة الفواتير الأخيرة.

الفاتورة	الحالة	المبلغ
INV001	مدفوعة	$250.00

{% endset %} {{ code_preview("table-rtl", code_rtl, "w-full") }}