> For the complete documentation index, see [llms.txt](https://docs.appfarm.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.appfarm.io/library/ui-components/table.md).

# Table

A **Table** is an iterating component that displays structured data from a data source containing multiple objects (cardinality *Many*). Each row represents one object, which acts as the *object in context* for that row. This lets you add adornments whose events run in the context of the row object, for example to open the details of a single record.

The table is read-only by default and supports sorting, filtering, search, row selection, inline editing, and data export, all configured through the settings described below.

{% hint style="info" %}
An example setup of a table is available in our [Showroom](https://showroom.appfarm.app/ui-components/table). You can view a demo and open the setup in Appfarm Create. If you do not have access, you can register [here](https://showroom.appfarm.app/sign-up).
{% endhint %}

## Usage

Tables are suited to data overview, search, filtering, and structured display. They work well in administrative applications, where users browse data with various filters and the data has many columns. When the priority is a highly customized interface, for example a consumer-facing app, a custom layout may be a better fit than a table.

## Data

Set the data to display in the setting **Data Source**. This can be a data source or a [multi-reference property](/reference/data-model/object-class-properties.md#general-properties). By default the table shows all objects in the data source.

To show a subset, apply a **Filter** on the table. You can also add **Conditional Filters**, which are enabled or disabled at runtime. Each conditional filter has a *condition* that determines whether it applies and a *filter* that is added on top of the top-level filter. All conditional filters evaluated as enabled apply together.

{% tabs %}
{% tab title="Example" %}
A solution displays projects in a table, with a radio button above the table for selecting the project state. When the user selects a state, a conditional filter is enabled that filters the projects to the selected state.
{% endtab %}
{% endtabs %}

Use **Sorting** to set the initial sort order. Users can re-sort by clicking a column header. To control how many objects are shown, use **Skip** to skip the first *n* objects and **Limit** to set the maximum number displayed.

If the data source is large, the table can take time to render. Enable **Pagination** to render a set number of rows per page and page through the data. This is especially useful when the table uses many adornments or property conditions.

## Columns

Each column shows a **Value** in its cell, typically a property from the data source, though a static value or a function can also be used (for example, `return firstname + " " + lastname`). Setting a value is not required, for example when a column contains only a button added as an adornment.

The following settings are available per column:

| Property                                      | Description                                                                                                      |
| --------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
| **Value**                                     | The property, static value, or function shown in the cell.                                                       |
| **Column Title**                              | The header shown for the column.                                                                                 |
| **Tooltip**                                   | A tooltip shown for the column.                                                                                  |
| **Visibility Condition**                      | Shows or hides the column based on a condition, for example to hide a column from certain user groups.           |
| **Multiline**                                 | Renders line breaks in read mode and supports entering them in edit mode.                                        |
| **Sortable**                                  | Allows users to sort by the column from its header. Enabled by default.                                          |
| **Initially Hidden**                          | Hides the column until the user adds it. Available when **Show/Hide Columns** is enabled on the toolbar.         |
| **Exclude from Search / Exclude from Filter** | Excludes the column from search or filtering. Available when **Search** or **Filter** is enabled on the toolbar. |

For columns that reference other objects (enumerated types or object classes), you can set which options are available. When edit mode is enabled, you can also set a column to be read-only or disabled.

### Conditional properties

**Conditional Column Properties** set a column to **Initially Hidden** based on a condition, without requiring **Show/Hide Columns** to be enabled on the table.

**Conditional Cell Properties** change the text and background color of a cell based on a condition. Conditions are evaluated in the context of the current row, so you can style a cell using any property stored on the row object.

### Add all properties as columns

The **Add all Properties as columns** button adds every object class property and runtime property of the data source as columns. A reference property is added only if its referenced object class has a [Display Property](/reference/data-model/object-classes.md#general-properties) set. For example, adding all columns for a `Contacts` data source with a `Contact.Company` reference adds `Contact.Company.Name` as a column when the `Company` object class has `Name` as its display property.

## Row selection

Turn on **Enable Row Selection** to let users select rows. The setting is data-bound, so selection can be toggled at runtime. Selecting rows flags the corresponding objects in the data source as *selected*, and deselecting clears the flag.

Selection is *multiple* by default and adds a checkbox at the start of each row. Enable **Single Select** to allow only one selection at a time. To show how many rows are selected, enable **Selection Count** on the toolbar.

## Edit mode

The table is read-only by default. Enable **Edit mode**, a data-bound setting, to render the cells as input fields. Per column, you can set whether the column is *read-only* or *disabled* in edit mode. Reference properties are shown as selects, with their own settings for which options are available. You can also run an action **On value change**.

{% tabs %}
{% tab title="Example" %}
An inventory table lists products with their details and a column for stock. The product details are read-only, while the stock column can be edited to adjust inventory levels.
{% endtab %}
{% endtabs %}

{% hint style="info" %}
When displaying a lot of data, consider using an adornment button that opens a dialog to change the row object, rather than making the whole table editable. This can perform better and is often clearer for the user.
{% endhint %}

## Toolbar

Enable the **Toolbar** to show a toolbar above the table. You can set a data-bound title, which supports the `{{totalRowCount}}` parameter to display the total number of rows. If row selection is enabled, you can also show the **Selection Count**.

The toolbar has several built-in actions you can enable:

| Action                | Description                                                                                    |
| --------------------- | ---------------------------------------------------------------------------------------------- |
| **Search**            | An inline search field that searches across all columns.                                       |
| **Filter**            | A popover with filters for each column.                                                        |
| **Show/Hide Columns** | Lets users add or remove columns. Columns can be set **Initially Hidden** at the column level. |
| **Data export**       | Lets users export the table content to a file.                                                 |

To exclude a column from search or filtering, enable **Exclude from Search** or **Exclude from Filter** at the column level.

### Data export

Turn on **Enable data export** to let users export the table content to a file, then set **Format** to either **CSV** or **Excel (.xlsx)**. Enable **Exclude Column Headers** if the exported file should omit the header row. For CSV, set the **CSV Value Delimiter** to `;` for European users, where CSV files use a semicolon as the column separator, as opposed to US users, where `,` is used.

### Custom toolbar actions

Besides the built-in actions, you can add your own toolbar actions, either as single actions or grouped in a dropdown menu. An action can be limited so that it is available only when one or more rows are selected.

## Footer

Turn on **Enable Footer** to show aggregated values for the columns. Once enabled, use the per-column setting **Footer Type** to choose which columns have a footer and which aggregate function each one uses.

## Header

The header can be **fixed**, so it sticks to the top of the page when scrolling, or **hidden** entirely.

{% hint style="warning" %}
For a fixed header to work, you may need to set the height of the table to 100%.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.appfarm.io/library/ui-components/table.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.