Table

component

Use the table component to show text, images, links, and other elements inside a structured set of data made up of rows and columns of table cells

Install

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

README Source

What it installs

Copies: templates/ → templates/
Composer: twig/extra-bundle
twig/html-extra:^3.24.0
symfony/ux-twig-component:^3.5
tales-from-a-dev/twig-tailwind-extra:^1.3.0

Examples (3)

Default

Light

Dark

Code

{%- set products = [
    {name: 'Apple MacBook Pro 17"', color: 'Silver', category: 'Laptop', price: '$2999', stock: 231},
    {name: 'Microsoft Surface Pro', color: 'White', category: 'Laptop PC', price: '$1999', stock: 423},
    {name: 'Magic Mouse 2', color: 'Black', category: 'Accessories', price: '$99', stock: 121},
] -%}
<div class="w-full relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
    <twig:Table>
        <twig:Table:Caption>
            Our products
            <p class="mt-1.5 text-sm font-normal text-body">Browse a list of Flowbite products designed to help you work and play, stay organized, get answers, keep in touch, grow your business, and more.</p>
        </twig:Table:Caption>
        <twig:Table:Header class="border-t">
            <twig:Table:Row>
                <twig:Table:Head>Product name</twig:Table:Head>
                <twig:Table:Head>Color</twig:Table:Head>
                <twig:Table:Head>Category</twig:Table:Head>
                <twig:Table:Head>Price</twig:Table:Head>
                <twig:Table:Head>Stock</twig:Table:Head>
            </twig:Table:Row>
        </twig:Table:Header>
        <twig:Table:Body>
            {% for product in products %}
                <twig:Table:Row>
                    <twig:Table:Head scope="row" class="font-medium text-heading whitespace-nowrap">{{ product.name }}</twig:Table:Head>
                    <twig:Table:Cell>{{ product.color }}</twig:Table:Cell>
                    <twig:Table:Cell>{{ product.category }}</twig:Table:Cell>
                    <twig:Table:Cell>{{ product.price }}</twig:Table:Cell>
                    <twig:Table:Cell>{{ product.stock }}</twig:Table:Cell>
                </twig:Table:Row>
            {% endfor %}
        </twig:Table:Body>
        <twig:Table:Footer>
            <twig:Table:Row>
                <twig:Table:Head scope="row" class="text-base" colspan="3">Total</twig:Table:Head>
                <twig:Table:Cell>$5997</twig:Table:Cell>
                <twig:Table:Cell>775</twig:Table:Cell>
            </twig:Table:Row>
        </twig:Table:Footer>
    </twig:Table>
</div>

Highlight striped

Light

Dark

Code

{%- set products = [
    {name: 'Apple MacBook Pro 17"', color: 'Silver', category: 'Laptop', price: '$2999', stock: 231},
    {name: 'Microsoft Surface Pro', color: 'White', category: 'Laptop PC', price: '$1999', stock: 423},
    {name: 'Magic Mouse 2', color: 'Black', category: 'Accessories', price: '$99', stock: 121},
] -%}
<div class="w-full relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
    <twig:Table>
        <twig:Table:Header>
            <twig:Table:Row>
                <twig:Table:Head>Product name</twig:Table:Head>
                <twig:Table:Head>Color</twig:Table:Head>
                <twig:Table:Head>Category</twig:Table:Head>
                <twig:Table:Head>Price</twig:Table:Head>
                <twig:Table:Head>Stock</twig:Table:Head>
            </twig:Table:Row>
        </twig:Table:Header>
        <twig:Table:Body highlight="striped">
            {% for product in products %}
                <twig:Table:Row>
                    <twig:Table:Head scope="row" class="font-medium text-heading whitespace-nowrap">{{ product.name }}</twig:Table:Head>
                    <twig:Table:Cell>{{ product.color }}</twig:Table:Cell>
                    <twig:Table:Cell>{{ product.category }}</twig:Table:Cell>
                    <twig:Table:Cell>{{ product.price }}</twig:Table:Cell>
                    <twig:Table:Cell>{{ product.stock }}</twig:Table:Cell>
                </twig:Table:Row>
            {% endfor %}
        </twig:Table:Body>
        <twig:Table:Footer>
            <twig:Table:Row>
                <twig:Table:Head scope="row" class="text-base" colspan="3">Total</twig:Table:Head>
                <twig:Table:Cell>$5997</twig:Table:Cell>
                <twig:Table:Cell>775</twig:Table:Cell>
            </twig:Table:Row>
        </twig:Table:Footer>
    </twig:Table>
</div>

Without border

Light

Dark

Code

{%- set products = [
    {name: 'Apple MacBook Pro 17"', color: 'Silver', category: 'Laptop', price: '$2999', stock: 231},
    {name: 'Microsoft Surface Pro', color: 'White', category: 'Laptop PC', price: '$1999', stock: 423},
    {name: 'Magic Mouse 2', color: 'Black', category: 'Accessories', price: '$99', stock: 121},
] -%}
<div class="relative w-full overflow-x-auto">
    <twig:Table borderless>
        <twig:Table:Header>
            <twig:Table:Row>
                <twig:Table:Head>Product name</twig:Table:Head>
                <twig:Table:Head>Color</twig:Table:Head>
                <twig:Table:Head>Category</twig:Table:Head>
                <twig:Table:Head>Price</twig:Table:Head>
                <twig:Table:Head>Stock</twig:Table:Head>
            </twig:Table:Row>
        </twig:Table:Header>
        <twig:Table:Body>
            {% for product in products %}
                <twig:Table:Row>
                    <twig:Table:Head scope="row" class="font-medium text-heading whitespace-nowrap">{{ product.name }}</twig:Table:Head>
                    <twig:Table:Cell>{{ product.color }}</twig:Table:Cell>
                    <twig:Table:Cell>{{ product.category }}</twig:Table:Cell>
                    <twig:Table:Cell>{{ product.price }}</twig:Table:Cell>
                    <twig:Table:Cell>{{ product.stock }}</twig:Table:Cell>
                </twig:Table:Row>
            {% endfor %}
        </twig:Table:Body>
        <twig:Table:Footer>
            <twig:Table:Row>
                <twig:Table:Head scope="row" class="text-base" colspan="3">Total</twig:Table:Head>
                <twig:Table:Cell>$5997</twig:Table:Cell>
                <twig:Table:Cell>775</twig:Table:Cell>
            </twig:Table:Row>
        </twig:Table:Footer>
    </twig:Table>
</div>