Table

Product	Status	Amount
Galaxy S25	Delivered	42,500,000 Toman
AirSound Pro	Shipping	1,890,000 Toman

<flux:table>
    <flux:table.columns>
        <flux:table.column>Product</flux:table.column>
        <flux:table.column>Status</flux:table.column>
        <flux:table.column align="end">Amount</flux:table.column>
    </flux:table.columns>

    <flux:table.rows>
        <flux:table.row>
            <flux:table.cell>Galaxy S25</flux:table.cell>
            <flux:table.cell><flux:badge size="sm" color="green">Delivered</flux:badge></flux:table.cell>
            <flux:table.cell align="end"><mds:price :amount="42500000" size="sm" /></flux:table.cell>
        </flux:table.row>

        <flux:table.row>
            <flux:table.cell>AirSound Pro</flux:table.cell>
            <flux:table.cell><flux:badge size="sm" color="blue">Shipping</flux:badge></flux:table.cell>
            <flux:table.cell align="end"><mds:price :amount="1890000" size="sm" /></flux:table.cell>
        </flux:table.row>
    </flux:table.rows>
</flux:table>

align="end" is logical, so amounts hug the correct edge in both directions. Prices come from mds:price.

Sortable columns

sortable adds the affordance; sorted and direction show the current state.

Product
Galaxy S25	2 days ago	42,500,000

<flux:table>
    <flux:table.columns>
        <flux:table.column>Product</flux:table.column>
        <flux:table.column sortable sorted direction="desc">Placed</flux:table.column>
        <flux:table.column sortable align="end">Amount</flux:table.column>
    </flux:table.columns>

    <flux:table.rows>
        <flux:table.row>
            <flux:table.cell>Galaxy S25</flux:table.cell>
            <flux:table.cell>2 days ago</flux:table.cell>
            <flux:table.cell align="end">42,500,000</flux:table.cell>
        </flux:table.row>
    </flux:table.rows>
</flux:table>

With components in cells

Product	Rating	Quantity
Galaxy S25	4.6	2

<flux:table>
    <flux:table.columns>
        <flux:table.column>Product</flux:table.column>
        <flux:table.column>Rating</flux:table.column>
        <flux:table.column align="end">Quantity</flux:table.column>
    </flux:table.columns>

    <flux:table.rows>
        <flux:table.row>
            <flux:table.cell class="flex items-center gap-3">
                <flux:avatar size="sm" src="https://picsum.photos/seed/phone/48/48" />
                Galaxy S25
            </flux:table.cell>
            <flux:table.cell><mds:rating :value="4.6" size="sm" :fa="false" /></flux:table.cell>
            <flux:table.cell align="end"><mds:quantity :value="2" :min="1" size="sm" :fa="false" /></flux:table.cell>
        </flux:table.row>
    </flux:table.rows>
</flux:table>

Reference

flux:table

Prop	Description
paginate	A paginator to render pagination links under the table.

flux:table.columns

The header row.

flux:table.column

Prop	Description
sortable	Makes the column sortable. Default: `false`.
sorted	Marks this column as the current sort.
direction	Options: `asc`, `desc`.
align	Options: `start`, `center`, `end`. Default: `start`.
sticky	Pins the column while the table scrolls sideways.

flux:table.rows

The table body.

flux:table.row

One row.

flux:table.cell

Prop	Description
align	Options: `start`, `center`, `end`. Default: `start`.
variant	Visual variant, e.g. a strong first cell.
sticky	Pins the cell while the table scrolls sideways.