Component overview

Overview

Table component is the most standard way to present your data. Table columns support these data types in UI Bakery.

Properties

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

Methods

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

Triggers

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

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.

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.

Refer to this article for a full list of all supported properties.

This is an example of a dynamic structure configuration:

[
  '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\}\})" ],
    },
  },
];

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