Table

One template holds Table, TableHeader, TableRow, TableHead and TableCell. Columns takes Grid widths for every row; use star and fixed widths, since each row is its own grid.

Installation

bash

shellui-native add table

Platforms: MAUI · Avalonia.

Usage

Basic

Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00

Shewart's recent invoices.

<ui:Table Columns="*,*,1.4*,90" MinimumContentWidth="440" Caption="Shewart's recent invoices.">
    <ui:TableHeader>
        <ui:TableHead Text="Invoice" />
        <ui:TableHead Text="Status" />
        <ui:TableHead Text="Method" />
        <ui:TableHead Text="Amount" HorizontalTextAlignment="End" />
    </ui:TableHeader>
    <ui:TableRow Tapped="OnRowTapped">
        <ui:TableCell Text="INV001" IsBold="True" />
        <ui:TableCell><ui:Badge Text="Paid" Variant="Success" HorizontalOptions="Start" VerticalOptions="Center" /></ui:TableCell>
        <ui:TableCell Text="Credit Card" />
        <ui:TableCell Text="$250.00" HorizontalTextAlignment="End" />
    </ui:TableRow>
    <ui:TableRow Tapped="OnRowTapped">
        <ui:TableCell Text="INV002" IsBold="True" />
        <ui:TableCell><ui:Badge Text="Pending" Variant="Warning" HorizontalOptions="Start" VerticalOptions="Center" /></ui:TableCell>
        <ui:TableCell Text="PayPal" />
        <ui:TableCell Text="$150.00" HorizontalTextAlignment="End" />
    </ui:TableRow>
    <ui:TableRow Tapped="OnRowTapped">
        <ui:TableCell Text="INV003" IsBold="True" />
        <ui:TableCell><ui:Badge Text="Unpaid" Variant="Destructive" HorizontalOptions="Start" VerticalOptions="Center" /></ui:TableCell>
        <ui:TableCell Text="Bank Transfer" />
        <ui:TableCell Text="$350.00" HorizontalTextAlignment="End" />
    </ui:TableRow>
</ui:Table>

<ui:Table Columns="*,*,1.4*,90" MinimumContentWidth="440" Caption="Shewart's recent invoices.">
    <ui:TableHeader>
        <ui:TableHead Text="Invoice" />
        <ui:TableHead Text="Status" />
        <ui:TableHead Text="Method" />
        <ui:TableHead Text="Amount" HorizontalTextAlignment="End" />
    </ui:TableHeader>
    <ui:TableRow Tapped="OnRowTapped">
        <ui:TableCell Text="INV001" IsBold="True" />
        <ui:TableCell><ui:Badge Text="Paid" Variant="Success" HorizontalAlignment="Left" VerticalAlignment="Center" /></ui:TableCell>
        <ui:TableCell Text="Credit Card" />
        <ui:TableCell Text="$250.00" HorizontalTextAlignment="End" />
    </ui:TableRow>
    <ui:TableRow Tapped="OnRowTapped">
        <ui:TableCell Text="INV002" IsBold="True" />
        <ui:TableCell><ui:Badge Text="Pending" Variant="Warning" HorizontalAlignment="Left" VerticalAlignment="Center" /></ui:TableCell>
        <ui:TableCell Text="PayPal" />
        <ui:TableCell Text="$150.00" HorizontalTextAlignment="End" />
    </ui:TableRow>
    <ui:TableRow Tapped="OnRowTapped">
        <ui:TableCell Text="INV003" IsBold="True" />
        <ui:TableCell><ui:Badge Text="Unpaid" Variant="Destructive" HorizontalAlignment="Left" VerticalAlignment="Center" /></ui:TableCell>
        <ui:TableCell Text="Bank Transfer" />
        <ui:TableCell Text="$350.00" HorizontalTextAlignment="End" />
    </ui:TableRow>
</ui:Table>

MAUI and Avalonia

Rows raise Tapped on both; on Avalonia it's Avalonia's own Tapped event, so the handler takes TappedEventArgs.
Set IsSelected on a row to highlight it.

API

XAML children go to Rows.

Property	Type	Default	Description
`Columns`	`string`	—	Column widths for every row, as Grid lengths (`2,,100`). Use star and fixed widths: each row is its own grid.
`Caption`	`string`	—	Muted caption under the table.
`Bordered`	`bool`	`true`	Draws the outline.
`MinimumContentWidth`	`double`	`0`	Narrower than this, the table scrolls horizontally instead of squeezing its columns.

TableHeader

Property	Type	Default	Description
`Columns`	`string`	—	Column widths for a header used outside a Table.
`IsSelected`	`bool`	`false`	Highlights the row as selected.

Event	Arguments	Description
`Tapped`	—	The row was clicked or tapped. MAUI only.

TableRow

Property	Type	Default	Description
`Columns`	`string`	—	Column widths for a row used outside a Table.
`IsSelected`	`bool`	`false`	Highlights the row as selected.

Event	Arguments	Description
`Tapped`	—	The row was clicked or tapped. MAUI only.

TableHead

Property	Type	Default	Description
`Text`	`string`	—	Text shown by the component.
`HorizontalTextAlignment`	`TextAlignment`	`Start`	Text alignment in the cell.

TableCell

Property	Type	Default	Description
`Text`	`string`	—	Text shown by the component.
`HorizontalTextAlignment`	`TextAlignment`	`Start`	Text alignment in the cell.
`IsBold`	`bool`	`false`	Medium-weight text, for the row's key column.