Skip to content Skip to footer navigation
Light theme Dark theme
You are reading the Statamic 6 Alpha docs. 👀

Table

A responsive table component for displaying structured data in rows and columns.

Product Stock Price Mechanical Keyboard In Stock $159.00 Ergonomic Mouse Out of Stock $89.00 4K Monitor Low Stock $349.00 
<ui-table>

    <ui-table-columns>

        <ui-table-column>Product</ui-table-column>

        <ui-table-column>Stock</ui-table-column>

        <ui-table-column class="text-right">Price</ui-table-column>

    </ui-table-columns>

    <ui-table-rows>

        <ui-table-row>

            <ui-table-cell>Mechanical Keyboard</ui-table-cell>

            <ui-table-cell>

                <ui-badge color="green" pill>In Stock</ui-badge>

            </ui-table-cell>

            <ui-table-cell class="text-right font-semibold text-black">$159.00</ui-table-cell>

        </ui-table-row>

        <ui-table-row>

            <ui-table-cell>Ergonomic Mouse</ui-table-cell>

            <ui-table-cell>

                <ui-badge color="red" pill>Out of Stock</ui-badge>

            </ui-table-cell>

            <ui-table-cell class="text-right font-semibold text-black">$89.00</ui-table-cell>

        </ui-table-row>

        <ui-table-row>

            <ui-table-cell>4K Monitor</ui-table-cell>

            <ui-table-cell>

                <ui-badge color="yellow" pill>Low Stock</ui-badge>

            </ui-table-cell>

            <ui-table-cell class="text-right font-semibold text-black">$349.00</ui-table-cell>

        </ui-table-row>

    </ui-table-rows>

</ui-table>

Structure#

The table component uses a simplified structure where ui-table-columns automatically creates the header row, eliminating the need for a separate row component in the header, and ui-table-rows automatically creates the body rows.