# column

## Overview

A `column` is a fundamental element of an `object-table`. All data displayed in an `object-table` is arranged in columns. Columns define the field or value to display, and the table's rows define the objects containing the field or value.

### Basic Example

An `object-table` with 2 columns:

{% code title="main.view\.xml" %}

```xml
<var name="users" type="query:user" />

<object-table label="Users" query="users">
    <column heading="First Name">{first_name}</column>
    <column heading="Last Name">{last_name}</column>
</object-table>
```

{% endcode %}

{% code title="main.js" %}

```javascript
function init() {
    view.users = DB.user.all();
}
```

{% endcode %}

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-afd47c1c48bc2b8400567a3a3d94d9c2979a66da%2Fobject-table-example.png?alt=media)

## Standard Attributes

### `heading`

**Optional**

**Type**: `string` (static text, a [format string](https://docs.journeyapps.com/reference/app-features/xml-format-strings) or the return value of a [JS/TS function](https://docs.journeyapps.com/reference/app-features/calling-js-functions-from-xml))

**Default**: unset

The text that is displayed as a `column` header in the `object-table`.

## Advanced Attributes

### `display`

**Optional**

**Type**: `string` (static text, a [format string](https://docs.journeyapps.com/reference/app-features/xml-format-strings) or the return value of a [JS/TS function](https://docs.journeyapps.com/reference/app-features/calling-js-functions-from-xml))

**Default value:** The cell's value

Override the value that is being displayed in the cell. See the guide on [editing cells](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/object-table/object-table-guides/edit-cells) for more information.

### `filter`

**Optional**

**Default value**: `true`

When set to `false`, the column can no longer be filtered by the user. See [`default-filter`](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/object-table/..#default-filter) on `object-table` to specify the default value for all columns on a table.

### `fit`

**Optional**

**Type:** `auto` | `shrink` | `no-wrap`

**Default value:** `auto`

Configure the width of `object-table` columns based on their content. See the [column](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/object-table/object-table-guides/columns) guide for more information.

### `freeze`

**Optional**

**Type:** `left` | `right` | `none`

**Default value:** `none`

Shows the column statically either on the left or the right of the table. See the guide on [frozen columns](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/object-table/object-table-guides/frozen-columns) for more information.

### `icon`

**Optional**

**Type**: `string`

**Default value:** unset

Adds an icon to the left side of a cell. The icon can be a [Font Awesome](https://docs.journeyapps.com/reference/build/ui-components/icons#font-awesome-icons) icon or an [Ionicons](https://docs.journeyapps.com/reference/build/ui-components/icons#ionicons-icons) icon.

### `search`

**Optional**

**Type**: `boolean`

**Default value:** When no columns specify `search="true"`, **all columns** are included when searching. When any column is set to `search="true"`, columns without it are **not** included in when searching.

Whether the `column` should be included when searching the table.

### `show-if` and `hide-if`

{% content-ref url="../../xml-fields/show-if" %}
[show-if](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/show-if)
{% endcontent-ref %}

{% content-ref url="../../xml-fields/hide-if" %}
[hide-if](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/hide-if)
{% endcontent-ref %}

### `sort`

**Optional**

**Type**: `asc` | `desc`

**Default value:** unset

Puts the column into a default sort mode regardless of the underlying query. (Useful to indicate which column is being sorted when cells are editable).

### `sort-value`

**Optional**

**Type**: `string` (static text, a [format string](https://docs.journeyapps.com/reference/app-features/xml-format-strings) or the return value of a [JS/TS function](https://docs.journeyapps.com/reference/app-features/calling-js-functions-from-xml))

**Default value:** unset

The value to sort the column on instead of the display value. Useful when the display value would be something like: `{cost}` but the column should sort only on `cost`. In that case, the attribute would be: `sort-value="$object.cost"`.&#x20;

### `sorting`

**Optional**

**Type**: `boolean`

**Default value:** `true`

When set to `false`, the column is no longer sortable by the user. See [`default-sorting`](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/object-table/..#default-sorting) on `object-table` to specify the default value for all columns on a table.

### `style`

See [`object-table` > `style`](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/object-table/..#style)

### `style-align`

See [`object-table` > `style-align`](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/object-table/..#style-align)

### `style-background-color`

See [`object-table` > `style-background-color`](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/object-table/..#style-background-color)

### `style-bold`

See [`object-table` > `style-bold`](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/object-table/..#style-bold)

### `style-color`

See [`object-table` > `style-color`](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/object-table/..#style-color)

### `style-icon-color`

See [`object-table` > `style-icon-color`](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/object-table/..#style-icon-color)

### `style-italics`

See [`object-table` > `style-italics`](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/object-table/..#style-italics)

### `style-strikethrough`

See [`object-table` > `style-strikethrough`](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/object-table/..#style-strikethrough)

### `style-underline`

See [`object-table` > `style-underline`](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/object-table/..#style-underline)