# Component overview

## Overview

Table component is the most standard way to present your data. Table columns support [these data types](/concepts/components/work-with-components/field-types-and-types-recognition.md) in UI Bakery.

<figure><img src="/files/nk2cmhR7n8c98N1kJv4R" alt=""><figcaption></figcaption></figure>

### Properties

<table><thead><tr><th width="167.87109375">Name</th><th width="242.4921875">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>name</code></td><td><code>string</code></td><td>Component name</td></tr><tr><td><code>afterCursor</code></td><td><code>string</code></td><td>Cursor for paginated data fetching</td></tr><tr><td><code>value</code></td><td><code>row[]</code></td><td>Data source of the table component</td></tr><tr><td><code>selectedRow</code></td><td><p><code>{ index: number;</code> </p><p><code>data: Row;</code> </p><p><code>isSelected: boolean; }</code></p></td><td>Selected row data object</td></tr><tr><td><code>selectedRows</code></td><td><p><code>{ data: Row[];</code> </p><p><code>indexes: number[]; }</code></p></td><td>Array of selected rows</td></tr><tr><td><code>clickedRow</code></td><td><p><code>{ index: number;</code> </p><p><code>data: Row;</code> </p><p><code>isSelected: boolean; }</code></p></td><td>Data of the clicked row</td></tr><tr><td><code>editedRow</code></td><td><p><code>{ index: number;</code> </p><p><code>data: Row;</code> </p><p><code>prevData: Row;</code> </p><p><code>isSelected: boolean; }</code></p></td><td>Data of the edited row</td></tr><tr><td><code>bulkEditedRows</code></td><td><p><code>{ index: number;</code> </p><p><code>data: Row;</code> </p><p><code>prevData: Row;</code> </p><p><code>isSelected: boolean; }[]</code></p></td><td>Array of bulk-edited rows</td></tr><tr><td><code>deletedRow</code></td><td><p><code>{ index: number;</code> </p><p><code>data: Row;</code> </p><p><code>isSelected: boolean; }</code></p></td><td>Data of the deleted row</td></tr><tr><td><code>newRow</code></td><td><p><code>{ data: Row;</code> </p><p><code>isSelected: boolean; }</code></p></td><td>Data of the newly added row</td></tr><tr><td><code>filteredValue</code></td><td><code>row[]</code></td><td>Array of filtered rows</td></tr><tr><td><code>pageSize</code></td><td><code>number</code></td><td>Page size of the table</td></tr><tr><td><code>pageCount</code></td><td><code>number</code></td><td>Total number of pages</td></tr><tr><td><code>activePageIndex</code></td><td><code>number</code></td><td>Active page index</td></tr><tr><td><code>paginationOffset</code></td><td><code>number</code></td><td>Offset for pagination</td></tr><tr><td><code>filters</code></td><td><code>object</code></td><td>Filters applied to the table</td></tr><tr><td><code>sortColumn</code></td><td><code>string | string[]</code></td><td>Name of the column used for sorting</td></tr><tr><td><code>sortDirection</code></td><td><code>SmartTableSortDirection | SmartTableSortDirection[]</code></td><td>Direction of sorting (<code>asc</code>, <code>desc</code>, or <code>null</code>).</td></tr><tr><td><code>sortable</code></td><td><code>boolean</code></td><td>Indicates if sorting is enabled</td></tr><tr><td><code>isBulkEditingOpen</code></td><td><code>boolean</code></td><td>Indicates if bulk editing is open</td></tr><tr><td><code>isAddRowOpen</code></td><td><code>boolean</code></td><td>Indicates if row addition is open</td></tr><tr><td><code>editingRowIndexes</code></td><td><code>number[]</code></td><td>Indices of rows currently being edited</td></tr></tbody></table>

### Methods

<table><thead><tr><th width="166.984375">Name</th><th width="203.2890625">Parameters</th><th width="100.1796875">Returns</th><th>Description</th></tr></thead><tbody><tr><td><code>setData</code></td><td><code>data: object[]</code></td><td><code>void</code></td><td>Set component data. Data is an array of objects with arbitrary structure.</td></tr><tr><td><code>selectRow</code></td><td><p><code>index: number |</code></p><p> <code>number[]</code></p></td><td><code>void</code></td><td>Select a row or multiple rows</td></tr><tr><td><code>setFilters</code></td><td><code>filters: object</code></td><td><code>void</code></td><td><p>Set filter values. Filters is an object with the following structure:<br><code>{</code><br><code>[column]: string |</code></p><p> <code>number|</code> </p><p><code>boolean | array;</code><br><code>}</code></p></td></tr><tr><td><code>resetFilters</code></td><td><code>columns?: string[]</code></td><td><code>void</code></td><td>Clear table filters</td></tr><tr><td><code>setSort</code></td><td><code>column: string | string[],</code> <br><code>direction: ('asc' | 'desc') | ('asc' | 'desc')[]</code></td><td><code>void</code></td><td>Sort table values. Arrays with the same length should be passed if multi-column sort is enabled.</td></tr><tr><td><code>setSortable</code></td><td><code>enable: boolean</code></td><td><code>void</code></td><td>Enable or disable sorting for the table</td></tr><tr><td><code>setPage</code></td><td><code>index: number</code></td><td><code>void</code></td><td>Navigate to a specific page</td></tr><tr><td><code>setPageSize</code></td><td><code>size: number</code></td><td><code>void</code></td><td>Set the number of items per page</td></tr><tr><td><code>openRowEditing</code></td><td><code>index: number</code></td><td><code>void</code></td><td>Enable editing mode on a row. Page with that row will open.</td></tr><tr><td><code>submitRowEditing</code></td><td><code>index: number</code></td><td><code>void</code></td><td>Submit edited row and close editing mode. Page with that row will open.</td></tr><tr><td><code>cancelRowEditing</code></td><td><code>index: number</code></td><td><code>void</code></td><td>Dismiss edited row and close editing mode</td></tr><tr><td><code>openBulkEditing</code></td><td>–</td><td><code>void</code></td><td>Enable bulk editing mode</td></tr><tr><td><code>submitBulkEditing</code></td><td>–</td><td><code>void</code></td><td>Submit edited rows and close bulk editing mode</td></tr><tr><td><code>cancelBulkEditing</code></td><td>–</td><td><code>void</code></td><td>Dismiss edited row and close bulk editing mode</td></tr><tr><td><code>openRowAddition</code></td><td>–</td><td><code>void</code></td><td>Enable row adding mode</td></tr><tr><td><code>submitRowAddition</code></td><td>–</td><td><code>void</code></td><td>Submit new row and closes row adding mode</td></tr><tr><td><code>cancelRowAddition</code></td><td>–</td><td><code>void</code></td><td>Dismiss added row and close row adding mode</td></tr></tbody></table>

### Triggers

<table><thead><tr><th width="225.62890625">Name</th><th>Description</th></tr></thead><tbody><tr><td><strong>On Init</strong></td><td>Triggered when the component is initialized</td></tr><tr><td><strong>On Create</strong></td><td>Triggered when a new row is created</td></tr><tr><td><strong>On Edit</strong></td><td>Triggered when a row is edited</td></tr><tr><td><strong>On Bulk Edit</strong></td><td>Triggered when multiple rows are edited in bulk</td></tr><tr><td><strong>On Delete</strong></td><td>Triggered when a row is deleted</td></tr><tr><td><strong>On Row Select</strong></td><td>Triggered when a row is selected</td></tr><tr><td><strong>On Row Click</strong></td><td>Triggered when a row is clicked</td></tr><tr><td><strong>On Row Double Click</strong></td><td>Triggered when a row is double-clicked</td></tr><tr><td><strong>On Page Change</strong></td><td>Triggered when the active page changes</td></tr><tr><td><strong>On Items Per Page Change</strong></td><td>Triggered when the number of items per page changes</td></tr><tr><td><strong>On Filters Change</strong></td><td>Triggered when filters are applied or modified</td></tr><tr><td><strong>On Sort Change</strong></td><td>Triggered when the sort order or column changes</td></tr><tr><td><strong>On Reload</strong></td><td>Triggered when the table data is reloaded</td></tr><tr><td><strong>On Cell Change</strong></td><td>Triggered when a table cell value changes</td></tr></tbody></table>

## Dynamic structure configuration

It's possible to use the JS mode for dynamic configuration of the Table's columns. To enable the mode, you just need to click the button next to component's *Columns* property in the right side panel.

<figure><img src="/files/B7cB3Xf6BtMV4Gbc9iJC" alt=""><figcaption></figcaption></figure>

You can specify Table columns using an array of objects or strings. If an object is used, it can define the following properties:

* *prop* - data property to display
* *type* - one of the available types: 'number', 'string', 'text', 'image', 'link', 'button', 'contextMenuButton', 'boolean', 'currency', 'date', 'datetime', 'file', 'jsoneditor', 'time', 'select', 'multiselect'
* primaryKey, color, text, and others.

{% hint style="info" %}
Refer to [this article](/reference/working-with-components/dynamic-structure-properties.md) for a full list of all supported properties.
{% endhint %}

This is an example of a dynamic structure configuration:

```javascript
[
  'full_name',
  { prop: 'id', type: 'number', primaryKey: true, color: 'danger' }, 
  { prop: 'full_name' },
  { prop: 'avatar', type: 'image' },
  { prop: 'email', type: 'link' },
  { 
    prop: 'email',
    type: 'button',
    text: '\{\{value\}\}',
    triggers: {
        buttonClick: [ "console.log('Button click', \{\{value\}\})" ],
    },
  },
];
```

{% hint style="success" %}
If the type is not specified, *string* is used by default. The required keys are *prop, primaryKey* (at least one column must be a primary key).
{% endhint %}


---

# Agent Instructions: 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:

```
GET https://docs.uibakery.io/reference/working-with-components/table/component-overview.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.