View as Markdown
Table
A responsive table component.
Loading...
{%- set invoices = [
{invoice: 'INV001', paymentStatus: 'Paid', totalAmount: '$250.00', paymentMethod: 'Credit Card'},
{invoice: 'INV002', paymentStatus: 'Pending', totalAmount: '$150.00', paymentMethod: 'PayPal'},
{invoice: 'INV003', paymentStatus: 'Unpaid', totalAmount: '$350.00', paymentMethod: 'Bank Transfer'},
{invoice: 'INV004', paymentStatus: 'Paid', totalAmount: '$450.00', paymentMethod: 'Credit Card'},
{invoice: 'INV005', paymentStatus: 'Paid', totalAmount: '$550.00', paymentMethod: 'PayPal'},
{invoice: 'INV006', paymentStatus: 'Pending', totalAmount: '$200.00', paymentMethod: 'Bank Transfer'},
{invoice: 'INV007', paymentStatus: 'Unpaid', totalAmount: '$300.00', paymentMethod: 'Credit Card'},
] -%}
<twig:Table>
<twig:Table:Caption>A list of your recent invoices.</twig:Table:Caption>
<twig:Table:Header>
<twig:Table:Row>
<twig:Table:Head class="w-[100px]">Invoice</twig:Table:Head>
<twig:Table:Head>Status</twig:Table:Head>
<twig:Table:Head>Method</twig:Table:Head>
<twig:Table:Head class="text-right">Amount</twig:Table:Head>
</twig:Table:Row>
</twig:Table:Header>
<twig:Table:Body>
{% for invoice in invoices %}
<twig:Table:Row>
<twig:Table:Cell class="font-medium">{{ invoice.invoice }}</twig:Table:Cell>
<twig:Table:Cell>{{ invoice.paymentStatus }}</twig:Table:Cell>
<twig:Table:Cell>{{ invoice.paymentMethod }}</twig:Table:Cell>
<twig:Table:Cell class="text-right">{{ invoice.totalAmount }}</twig:Table:Cell>
</twig:Table:Row>
{% endfor %}
</twig:Table:Body>
<twig:Table:Footer>
<twig:Table:Row>
<twig:Table:Cell colspan="3">Total</twig:Table:Cell>
<twig:Table:Cell class="text-right">$2,500.00</twig:Table:Cell>
</twig:Table:Row>
</twig:Table:Footer>
</twig:Table>
Installation
php bin/console ux:install table --kit shadcn
Install the following Composer dependencies:
composer require tales-from-a-dev/twig-tailwind-extra:^1.0.0
Copy the following file(s) into your app:
{# @block content The table structure, typically includes `Table:Header`, `Table:Body`, and optionally `Table:Footer`. #}
<div class="relative w-full overflow-x-auto" data-slot="table-container">
<table
class="{{ ('w-full caption-bottom text-sm ' ~ attributes.render('class'))|tailwind_merge }}"
{{ attributes }}
>
{%- block content %}{% endblock -%}
</table>
</div>
{# @block content The table body rows, typically `Table:Row` components. #}
<tbody
class="{{ ('[&_tr:last-child]:border-0 ' ~ attributes.render('class'))|tailwind_merge }}"
data-slot="table-body"
{{ attributes }}
>
{%- block content %}{% endblock -%}
</tbody>
{# @block content The table caption text. #}
<caption
class="{{ ('text-muted-foreground mt-4 text-sm ' ~ attributes.render('class'))|tailwind_merge }}"
data-slot="table-caption"
{{ attributes }}
>
{%- block content %}{% endblock -%}
</caption>
{# @block content The cell content. #}
<td
class="{{ ('p-2 align-middle whitespace-nowrap ltr:[&:has([role=checkbox])]:pr-0 rtl:[&:has([role=checkbox])]:pe-0 ' ~ attributes.render('class'))|tailwind_merge }}"
data-slot="table-cell"
{{ attributes }}
>
{%- block content %}{% endblock -%}
</td>
{# @block content The table footer rows, typically `Table:Row` components. #}
<tfoot
class="{{ ('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0 ' ~ attributes.render('class'))|tailwind_merge }}"
data-slot="table-footer"
{{ attributes }}
>
{%- block content %}{% endblock -%}
</tfoot>
{# @block content The header cell content. #}
<th
class="{{ ('h-10 px-2 text-left rtl:text-start align-middle font-medium whitespace-nowrap text-foreground ltr:[&:has([role=checkbox])]:pr-0 rtl:[&:has([role=checkbox])]:pe-0 ' ~ attributes.render('class'))|tailwind_merge }}"
data-slot="table-head"
{{ attributes }}
>
{%- block content %}{% endblock -%}
</th>
{# @block content The header row(s), typically a `Table:Row` with `Table:Head` cells. #}
<thead
class="{{ ('[&_tr]:border-b ' ~ attributes.render('class'))|tailwind_merge }}"
data-slot="table-header"
{{ attributes }}
>
{%- block content %}{% endblock -%}
</thead>
{# @block content The row cells, typically `Table:Cell` or `Table:Head` components. #}
<tr
class="{{ ('border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted ' ~ attributes.render('class'))|tailwind_merge }}"
data-slot="table-row"
{{ attributes }}
>
{%- block content %}{% endblock -%}
</tr>
Usage
<twig:Table>
<twig:Table:Caption>A list of your recent invoices.</twig:Table:Caption>
<twig:Table:Header>
<twig:Table:Row>
<twig:Table:Head class="w-[100px]">Invoice</twig:Table:Head>
<twig:Table:Head>Status</twig:Table:Head>
<twig:Table:Head>Method</twig:Table:Head>
<twig:Table:Head class="text-right">Amount</twig:Table:Head>
</twig:Table:Row>
</twig:Table:Header>
<twig:Table:Body>
<twig:Table:Row>
<twig:Table:Cell class="font-medium">INV001</twig:Table:Cell>
<twig:Table:Cell>Paid</twig:Table:Cell>
<twig:Table:Cell>Credit Card</twig:Table:Cell>
<twig:Table:Cell class="text-right">$250.00</twig:Table:Cell>
</twig:Table:Row>
</twig:Table:Body>
</twig:Table>
Examples
Footer
Use the TableFooter component to add a footer to the table.
Loading...
{%- set invoices = [
{invoice: 'INV001', paymentStatus: 'Paid', totalAmount: '$250.00', paymentMethod: 'Credit Card'},
{invoice: 'INV002', paymentStatus: 'Pending', totalAmount: '$150.00', paymentMethod: 'PayPal'},
{invoice: 'INV003', paymentStatus: 'Unpaid', totalAmount: '$350.00', paymentMethod: 'Bank Transfer'},
] -%}
<twig:Table>
<twig:Table:Caption>A list of your recent invoices.</twig:Table:Caption>
<twig:Table:Header>
<twig:Table:Row>
<twig:Table:Head class="w-[100px]">Invoice</twig:Table:Head>
<twig:Table:Head>Status</twig:Table:Head>
<twig:Table:Head>Method</twig:Table:Head>
<twig:Table:Head class="text-right">Amount</twig:Table:Head>
</twig:Table:Row>
</twig:Table:Header>
<twig:Table:Body>
{% for invoice in invoices %}
<twig:Table:Row>
<twig:Table:Cell class="font-medium">{{ invoice.invoice }}</twig:Table:Cell>
<twig:Table:Cell>{{ invoice.paymentStatus }}</twig:Table:Cell>
<twig:Table:Cell>{{ invoice.paymentMethod }}</twig:Table:Cell>
<twig:Table:Cell class="text-right">{{ invoice.totalAmount }}</twig:Table:Cell>
</twig:Table:Row>
{% endfor %}
</twig:Table:Body>
<twig:Table:Footer>
<twig:Table:Row>
<twig:Table:Cell colspan="3">Total</twig:Table:Cell>
<twig:Table:Cell class="text-right">$2,500.00</twig:Table:Cell>
</twig:Table:Row>
</twig:Table:Footer>
</twig:Table>
RTL
To enable RTL support, set the dir="rtl" attribute on the root element.
Loading...
<div class="flex flex-col gap-8 w-full items-center">
{# Arabic #}
<twig:Table dir="rtl">
<twig:Table:Caption>قائمة بفواتيرك الأخيرة.</twig:Table:Caption>
<twig:Table:Header>
<twig:Table:Row>
<twig:Table:Head class="w-[100px]">الفاتورة</twig:Table:Head>
<twig:Table:Head>الحالة</twig:Table:Head>
<twig:Table:Head>الطريقة</twig:Table:Head>
<twig:Table:Head class="text-right">المبلغ</twig:Table:Head>
</twig:Table:Row>
</twig:Table:Header>
<twig:Table:Body>
<twig:Table:Row>
<twig:Table:Cell class="font-medium">INV001</twig:Table:Cell>
<twig:Table:Cell>مدفوع</twig:Table:Cell>
<twig:Table:Cell>بطاقة ائتمانية</twig:Table:Cell>
<twig:Table:Cell class="text-right">$250.00</twig:Table:Cell>
</twig:Table:Row>
<twig:Table:Row>
<twig:Table:Cell class="font-medium">INV002</twig:Table:Cell>
<twig:Table:Cell>قيد الانتظار</twig:Table:Cell>
<twig:Table:Cell>PayPal</twig:Table:Cell>
<twig:Table:Cell class="text-right">$150.00</twig:Table:Cell>
</twig:Table:Row>
<twig:Table:Row>
<twig:Table:Cell class="font-medium">INV003</twig:Table:Cell>
<twig:Table:Cell>غير مدفوع</twig:Table:Cell>
<twig:Table:Cell>تحويل بنكي</twig:Table:Cell>
<twig:Table:Cell class="text-right">$350.00</twig:Table:Cell>
</twig:Table:Row>
</twig:Table:Body>
<twig:Table:Footer>
<twig:Table:Row>
<twig:Table:Cell colspan="3">المجموع</twig:Table:Cell>
<twig:Table:Cell class="text-right">$2,500.00</twig:Table:Cell>
</twig:Table:Row>
</twig:Table:Footer>
</twig:Table>
{# Hebrew #}
<twig:Table dir="rtl">
<twig:Table:Caption>רשימת החשבוניות האחרונות שלך.</twig:Table:Caption>
<twig:Table:Header>
<twig:Table:Row>
<twig:Table:Head class="w-[100px]">חשבונית</twig:Table:Head>
<twig:Table:Head>סטטוס</twig:Table:Head>
<twig:Table:Head>שיטה</twig:Table:Head>
<twig:Table:Head class="text-right">סכום</twig:Table:Head>
</twig:Table:Row>
</twig:Table:Header>
<twig:Table:Body>
<twig:Table:Row>
<twig:Table:Cell class="font-medium">INV001</twig:Table:Cell>
<twig:Table:Cell>שולם</twig:Table:Cell>
<twig:Table:Cell>כרטיס אשראי</twig:Table:Cell>
<twig:Table:Cell class="text-right">$250.00</twig:Table:Cell>
</twig:Table:Row>
<twig:Table:Row>
<twig:Table:Cell class="font-medium">INV002</twig:Table:Cell>
<twig:Table:Cell>ממתין</twig:Table:Cell>
<twig:Table:Cell>PayPal</twig:Table:Cell>
<twig:Table:Cell class="text-right">$150.00</twig:Table:Cell>
</twig:Table:Row>
<twig:Table:Row>
<twig:Table:Cell class="font-medium">INV003</twig:Table:Cell>
<twig:Table:Cell>לא שולם</twig:Table:Cell>
<twig:Table:Cell>העברה בנקאית</twig:Table:Cell>
<twig:Table:Cell class="text-right">$350.00</twig:Table:Cell>
</twig:Table:Row>
</twig:Table:Body>
<twig:Table:Footer>
<twig:Table:Row>
<twig:Table:Cell colspan="3">סה"כ</twig:Table:Cell>
<twig:Table:Cell class="text-right">$2,500.00</twig:Table:Cell>
</twig:Table:Row>
</twig:Table:Footer>
</twig:Table>
</div>
API Reference
<twig:Table>
| Block | Description |
|---|---|
content |
The table structure, typically includes Table:Header, Table:Body, and optionally Table:Footer. |
<twig:Table:Body>
| Block | Description |
|---|---|
content |
The table body rows, typically Table:Row components. |
<twig:Table:Caption>
| Block | Description |
|---|---|
content |
The table caption text. |
<twig:Table:Cell>
| Block | Description |
|---|---|
content |
The cell content. |
<twig:Table:Footer>
| Block | Description |
|---|---|
content |
The table footer rows, typically Table:Row components. |
<twig:Table:Head>
| Block | Description |
|---|---|
content |
The header cell content. |
<twig:Table:Header>
| Block | Description |
|---|---|
content |
The header row(s), typically a Table:Row with Table:Head cells. |
<twig:Table:Row>
| Block | Description |
|---|---|
content |
The row cells, typically Table:Cell or Table:Head components. |