DataTable

component

A server-driven table: search, filters, sortable columns, a page size and pages, in a Turbo Frame that keeps Back and Forward working.

In this static copy, the search, the sort links and the pages ask the server for the rows, so they do not change them. Run the full demo to try it.

Install

php bin/console ux:install data-table \
    --kit=https://github.com/xormania/uxor:0.3.0

README Source

What it installs

Copies: assets/ → assets/
src/ → src/
templates/ → templates/
Recipes: table pagination input select button empty-state turbo
Composer: symfony/http-foundation
symfony/ux-icons
symfony/ux-turbo:^3.5
twig/html-extra:^3.24.0
symfony/ux-twig-component:^3.5
tales-from-a-dev/twig-tailwind-extra:^1.3.0

Examples (1)

Default

Light

Dark

Code

<twig:DataTable :table="table" id="orders" label="Orders">
    <twig:block name="cell_status">
        <twig:Badge variant="{{ {paid: 'success', pending: 'warning', refunded: 'gray'}[row.status] }}">{{ row.status|capitalize }}</twig:Badge>
    </twig:block>
    <twig:block name="cell_total">${{ row.total }}</twig:block>
</twig:DataTable>