Column

The Column component can be used within a Table to define a particular table column's visual properties and data bindings.

The component provides context values with which you can access some internal properties:

$cell: The value of the cell being rendered.
$colIndex: The index of the column being rendered.
$item: The data item being rendered.
$itemIndex: The index of the data item being rendered.
$row: The data item being rendered (the same as $item).
$rowIndex: The index of the data item being rendered (the same as $itemIndex).

Throught this documentation page the data used is the same that is found in the Table component documentation.

Properties

`bindTo`

Indicates what part of the data to lay out in the column.

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

`canResize`

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`

This property sets whether the user can sort by a column by clicking on its header (true) or not (false).

Click on either the Name or the Quantity column headers to order the data by that attribute.

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

`header`

Adds a label for a particular column.

<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.

Available values: left, right

<App>
  <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>
</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).

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.

ColorPicker ContentSeparator