Table

A responsive table component.

100%

{%- 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 twig/html-extra:^3.24.0 symfony/ux-twig-component:^3.5 tales-from-a-dev/twig-tailwind-extra:^1.3.0

Copy the following file(s) into your app:

templates/components/Table.html.twig

{# @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
        {{ attributes.defaults({
            class: 'w-full caption-bottom text-sm'|tailwind_classes,
        }) }}
    >
        {%- block content %}{% endblock -%}
    </table>
</div>

templates/components/Table/Body.html.twig

{# @block content The table body rows, typically `Table:Row` components. #}
<tbody
    data-slot="table-body"
    {{ attributes.defaults({
        class: '[&_tr:last-child]:border-0'|tailwind_classes,
    }) }}
>
    {%- block content %}{% endblock -%}
</tbody>

templates/components/Table/Caption.html.twig

{# @block content The table caption text. #}
<caption
    data-slot="table-caption"
    {{ attributes.defaults({
        class: 'text-muted-foreground mt-4 text-sm'|tailwind_classes,
    }) }}
>
    {%- block content %}{% endblock -%}
</caption>

templates/components/Table/Cell.html.twig

{# @block content The cell content. #}
<td
    data-slot="table-cell"
    {{ attributes.defaults({
        class: 'p-2 align-middle whitespace-nowrap ltr:[&:has([role=checkbox])]:pr-0 rtl:[&:has([role=checkbox])]:pe-0'|tailwind_classes,
    }) }}
>
    {%- block content %}{% endblock -%}
</td>

templates/components/Table/Footer.html.twig

{# @block content The table footer rows, typically `Table:Row` components. #}
<tfoot
    data-slot="table-footer"
    {{ attributes.defaults({
        class: 'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0'|tailwind_classes,
    }) }}
>
    {%- block content %}{% endblock -%}
</tfoot>

templates/components/Table/Head.html.twig

{# @block content The header cell content. #}
<th
    data-slot="table-head"
    {{ attributes.defaults({
        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'|tailwind_classes,
    }) }}
>
    {%- block content %}{% endblock -%}
</th>

templates/components/Table/Header.html.twig

{# @block content The header row(s), typically a `Table:Row` with `Table:Head` cells. #}
<thead
    data-slot="table-header"
    {{ attributes.defaults({
        class: '[&_tr]:border-b'|tailwind_classes,
    }) }}
>
    {%- block content %}{% endblock -%}
</thead>

templates/components/Table/Row.html.twig

{# @block content The row cells, typically `Table:Cell` or `Table:Head` components. #}
<tr
    data-slot="table-row"
    {{ attributes.defaults({
        class: 'border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted'|tailwind_classes,
    }) }}
>
    {%- 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.

100%

{%- 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.

100%

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