Table

A table written out row by row, with column spans, a footer and a caption, as uikit:Table.

ExampleInteractive

Table — Avalonia UIKit

Live demo unavailable

<uikit:Table Width="560" HorizontalAlignment="Left">
  <uikit:TableHeader>
    <uikit:TableRow>
      <uikit:TableHead PreferredWidth="150">Invoice</uikit:TableHead>
      <uikit:TableHead ColSpan="2">Status</uikit:TableHead>
      <uikit:TableHead HorizontalContentAlignment="Right">Amount</uikit:TableHead>
      <uikit:TableHead HorizontalContentAlignment="Right">Date</uikit:TableHead>
    </uikit:TableRow>
  </uikit:TableHeader>
  <uikit:TableBody>
    <uikit:TableRow>
      <uikit:TableCell PreferredWidth="150">INV001</uikit:TableCell>
      <uikit:TableCell><uikit:TagLabel Classes="success outline xsmall" Content="Paid" /></uikit:TableCell>
      <uikit:TableCell>Credit Card</uikit:TableCell>
      <uikit:TableCell HorizontalContentAlignment="Right">$250.00</uikit:TableCell>
      <uikit:TableCell HorizontalContentAlignment="Right">2024-01-15</uikit:TableCell>
    </uikit:TableRow>
    <uikit:TableRow>
      <uikit:TableCell PreferredWidth="150">INV002</uikit:TableCell>
      <uikit:TableCell><uikit:TagLabel Classes="warning outline xsmall" Content="Pending" /></uikit:TableCell>
      <uikit:TableCell>PayPal</uikit:TableCell>
      <uikit:TableCell HorizontalContentAlignment="Right">$150.00</uikit:TableCell>
      <uikit:TableCell HorizontalContentAlignment="Right">2024-02-01</uikit:TableCell>
    </uikit:TableRow>
    <uikit:TableRow>
      <uikit:TableCell PreferredWidth="150">INV003</uikit:TableCell>
      <uikit:TableCell><uikit:TagLabel Classes="danger outline xsmall" Content="Unpaid" /></uikit:TableCell>
      <uikit:TableCell>Bank Transfer</uikit:TableCell>
      <uikit:TableCell HorizontalContentAlignment="Right">$350.00</uikit:TableCell>
      <uikit:TableCell HorizontalContentAlignment="Right">2024-02-15</uikit:TableCell>
    </uikit:TableRow>
    <uikit:TableRow>
      <uikit:TableCell PreferredWidth="150">INV004</uikit:TableCell>
      <uikit:TableCell><uikit:TagLabel Classes="success outline xsmall" Content="Paid" /></uikit:TableCell>
      <uikit:TableCell>Credit Card</uikit:TableCell>
      <uikit:TableCell HorizontalContentAlignment="Right">$450.00</uikit:TableCell>
      <uikit:TableCell HorizontalContentAlignment="Right">2024-03-01</uikit:TableCell>
    </uikit:TableRow>
  </uikit:TableBody>
  <uikit:TableFooter>
    <uikit:TableRow>
      <uikit:TableCell ColSpan="3">Total</uikit:TableCell>
      <uikit:TableCell ColSpan="2" HorizontalContentAlignment="Right">$1,200.00</uikit:TableCell>
    </uikit:TableRow>
  </uikit:TableFooter>
  <uikit:TableCaption>A list of your recent invoices.</uikit:TableCaption>
</uikit:Table>

Usage

uikit:Table has the look of the Table and is written out row by row instead of bound to items: a uikit:TableHeader, uikit:TableBody and uikit:TableFooter of uikit:TableRows, and a uikit:TableCaption, stacked in the order given. A header row holds uikit:TableHeads and the other rows uikit:TableCells. The footer is on the foot color under a rule, and the caption is muted, centered text in the cells' padding.

Every row lays out its cells on its own: a cell's share of the row is its ColSpan (1 by default), cells never get narrower than 100px per column (or their MinWidth), and PreferredWidth asks for a width that shrinks with the other cells when the row is too narrow, while Width keeps one. Rows whose spans add up the same line up. Cell text stays on one line, and HorizontalContentAlignment places a cell's content. The table is not virtualized.

The Table's classes apply: xsmall, small, large and stripe, and BorderThickness="1" CornerRadius="5.5" for the bordered table.

The demo has a header cell over two columns, tags in the cells, a footer whose total spans three columns, and a caption.

Examples

Bordered, striped and small.

StripedInteractive

Live demo unavailable

<uikit:Table Classes="small stripe" BorderThickness="1" CornerRadius="5.5" Width="440" HorizontalAlignment="Left">
  <uikit:TableHeader>
    <uikit:TableRow>
      <uikit:TableHead>Invoice</uikit:TableHead>
      <uikit:TableHead>Method</uikit:TableHead>
      <uikit:TableHead HorizontalContentAlignment="Right">Amount</uikit:TableHead>
      <uikit:TableHead HorizontalContentAlignment="Right">Date</uikit:TableHead>
    </uikit:TableRow>
  </uikit:TableHeader>
  <uikit:TableBody>
    <uikit:TableRow>
      <uikit:TableCell>INV001</uikit:TableCell>
      <uikit:TableCell>Credit Card</uikit:TableCell>
      <uikit:TableCell HorizontalContentAlignment="Right">$250.00</uikit:TableCell>
      <uikit:TableCell HorizontalContentAlignment="Right">2024-01-15</uikit:TableCell>
    </uikit:TableRow>
    <uikit:TableRow>
      <uikit:TableCell>INV002</uikit:TableCell>
      <uikit:TableCell>PayPal</uikit:TableCell>
      <uikit:TableCell HorizontalContentAlignment="Right">$150.00</uikit:TableCell>
      <uikit:TableCell HorizontalContentAlignment="Right">2024-02-01</uikit:TableCell>
    </uikit:TableRow>
    <uikit:TableRow>
      <uikit:TableCell>INV003</uikit:TableCell>
      <uikit:TableCell>Bank Transfer</uikit:TableCell>
      <uikit:TableCell HorizontalContentAlignment="Right">$350.00</uikit:TableCell>
      <uikit:TableCell HorizontalContentAlignment="Right">2024-02-15</uikit:TableCell>
    </uikit:TableRow>
    <uikit:TableRow>
      <uikit:TableCell>INV004</uikit:TableCell>
      <uikit:TableCell>Credit Card</uikit:TableCell>
      <uikit:TableCell HorizontalContentAlignment="Right">$450.00</uikit:TableCell>
      <uikit:TableCell HorizontalContentAlignment="Right">2024-03-01</uikit:TableCell>
    </uikit:TableRow>
  </uikit:TableBody>
</uikit:Table>

Table

#Usage

#Examples

Usage

Examples