Column

Column defines the structure and behavior of individual table columns within a Table component. Each Column controls data binding, header display, sorting capabilities, sizing, and can contain any XMLUI components for rich cell content.

Key features:

• Data binding: Use bindTo to automatically display object properties
• Component embedding: Place any component inside Column: Button, Text, Icon, etc.
• Interactive behavior: Enable/disable sorting and column resizing
• Layout control: Set width using pixels, star sizing (*, 2*), or proportional values
• Column pinning: Pin columns to left or right edges for sticky behavior

You can pass layout properties to a Column:

<App>
  <Table data='{[...]}'>
    <Column bindTo="name" />
    <Column
      bindTo="quantity"
      horizontalAlignment="right"
      backgroundColor="lightyellow"
    />
    <Column bindTo="unit" />
  </Table>
</App>

Context variables available during execution:

• $cell: The specific cell value for this column
• $colIndex: Zero-based column index
• $item: The complete data row object being rendered
• $itemIndex: Zero-based row index
• $row: The complete data row object being rendered (the same as $item).
• $rowIndex: Zero-based row index (the same as $itemIndex).

Behaviors

This component supports the following behaviors:

Properties

bindTo

Indicates the name of the current row item's property, the value of which to lay out in the column. If this property is not defined, the column is not sortable.

<App>
  <Table data='{[...]}'>
    <Column bindTo="name" />
  </Table>
</App>

canResize

default: true

This property indicates whether the user can resize the column. If set to true, the column can be resized by dragging the column border. If set to false, the column cannot be resized. Double-clicking the column border resets to the original size.

canSort

default: true

This property sets whether the user can sort by a column by clicking on its header (true) or not (false). If the bindTo property is not defined, the column is not sortable.

Columns with bindTo are sortable by default. Click on the Name or Quantity column headers to order the data. The Unit column has sorting explicitly disabled with canSort="false".

<App>
  <Table data='{[...]}'>
    <Column bindTo="name" />
    <Column bindTo="quantity" />
    <Column canSort="false" bindTo="unit" />
  </Table>
</App>

To change the default for all columns in your app, set columnCanSortDefault in config.json:

{
  "appGlobals": {
    "columnCanSortDefault": false
  }
}

header

This property defines a label for a particular column. If not set, the bindTo property value is used for the label.

<App>
  <Table data='{[...]}'>
    <Column header="Food Name" bindTo="name" />
    <Column header="Food Quantity" bindTo="quantity" />
    <Column bindTo="unit" />
  </Table>
</App>

maxWidth

Indicates the maximum width a particular column can have. Same rules apply as with width.

minWidth

Indicates the minimum width a particular column can have. Same rules apply as with width.

pinTo

This property allows the column to be pinned to the left (left-to-right writing style) or right (left-to-right writing style) edge of the table. If the writing style is right-to-left, the locations are switched. If this property is not set, the column is not pinned to any edge.

Available values: left, right

By default, the background color of table rows is transparent. When using the pinTo property, you should set the background to an explicit (non-transparent) color; otherwise, the scrolled cells will be visible under the pinned columns.

<App>
  <Theme backgroundColor-row-Table="$color-surface-0">
    <Table data='{[...]}' height="100%">
      <Column bindTo="id" width="50px" pinTo="left" />
      <Column bindTo="name" width="500px" />
      <Column bindTo="quantity" width="300px" />
      <Column bindTo="unit" width="300px"/>
      <Column bindTo="category" width="100px" pinTo="right"/>
    </Table>
  </Theme>
</App>

Scroll the table contents horizontally to see how the pinned columns are displayed.

width

This property defines the width of the column. You can use a numeric value, a pixel value (such as 100px), or a star size value (such as *, 2*, etc.). You will get an error if you use any other unit (or value).If not defined, the component will use a width according to the column values and the available space.

The following example sets the second column to an absolute size (size pixels), while the first and third columns have star sizes:

<App>
  <Table data='{[...]}'>
    <Column bindTo="name" canResize="true" width="3*" />
    <Column bindTo="quantity" width="100px" minWidth="50px" maxWidth="500px" />
    <Column bindTo="unit" width="*" />
  </Table>
</App>

Check what happens when you resize table columns:

Events

This component does not have any events.

Exposed Methods

This component does not expose any methods.

Styling

Styling is done via the Table component.