.svg?alt=media&token=22229f15-f796-4c11-a928-049c59e13a36)
Table
Last updated
Last updated
© 2024 UI Bakery
Table is the most standard way to present your data. Let's explore all the possibilities of a table component in the below guide. We will cover the basics such as adding a table and displaying the data, as well as go through some additional options, such as filtering and sorting the values, adding, editing and deleting the values directly from the table.
UI Bakery columns support the below data types:
String
Long Text
Number
Currency
Link
Percent
Boolean
Date & Time
Date
Time
JSON
Select/ Tag
Multi-select/ Tags
Button
Image
File
setData(data: Array)
sets data in the table
selectRow(rowNumber: number)
selects row in a table by row number
setFilters({[column]: string | number | boolean | array;})
sets filters in the table by a certain column
resetFilters()
resets the filters
setSort(column:string, direction:string)
sets table sorting (asc, desc)
setPage(index: number)
sets navigation to a specific page in the table
setPageSize(size: number)
sets the amount of items per page in the table
openRowEditing(index: number)
enables editing mode on row, the page with that row will open
submitRowEditing(index: number)
submits an edited row and closes editing mode, the page with that row will open
cancelRowEditing(index: number)
dismisses edited row and closes editing mode
openBulkEditing()
enables bulk editing mode on table
submitBulkEditing()
submits edited rows and closes bulk editing mode
cancelBulkEditing()
dismisses edited rows and closes bulk editing mode
openRowAddition()
enables row adding mode on table
submitRowAddition()
submits new row and closes row adding mode
cancelRowAddition()
dismisses added row and closes row adding mode
Triggers allow you to launch certain actions based on different events.
On Init
Calls for an action on component initialization, e.g., page refresh.
On Create
Calls for a create action as you create a record from the table.
On Edit
Calls for an update action as you update a selected record.
On Bulk Edit
Calls for an action on your click to Save button of the bulk edit buttons.
On Delete
Calls for a delete action as you delete a record.
On Row Select
Allows you to call an action as you select a row in a table, e.g., to load the record's details inside a connected component.
On Row Click
Allows you to call an action as you click a row in a table.
On Row Double Click
Allows you to call an action as you double-click a row in a table.
On Page Change
Calls for an action as you change the table page.
On Items Per Page Change
Calls for an action as you change the number of records displayed per table page.
On Filters Change
Calls for an action as you change the table inline filters.
On Sort Change
Calls for an action as you change the table column sort order.
On Reload
Calls for an action as you click on the table reload button.
On Cell Change
Calls for an action as you make changes to the table cell.
Let's start by dragging the table onto the working area. By default, the table contains some test data so if you don't have any actions yet, you'll see some pre-populated data:
Now, you might notice a green button Connect my data in the Data field of the table. Let's click the button to create your first action to load the data.
As soon as you click the button, you'll be sent to the action panel. Choose an action to load your data, depending on your data source. It can either be an HTTP request, an SQL query, or a predefined Load Table action.
For example, we are using the sample UI Bakery MySQL data source and the Load Table action to get the data. As you run the action, you can notice that the sample data inside the table is replaced with the new data.
You will also notice that the reference in the Data field has changed from the sample code into the action result as {{actions.loadEmployees.data}}. Action results need to be referenced inside the curly double brackets {{}}.
Now that we have the data inside the table, let's add a search bar.
The guide to adding a search bar is available here:
Search table based on input valueThe tables in UI Bakery come with predefined filters. To activate the filters, tick the Show inline table filter option.
If you don't need a filter for a specific column, you can disable it. Click on the column to open its' settings and untick the Show filter option.
The filter type can be also set. You can set either an Includes or Equal type. To set a filter type, follow these steps:
Start with toggling the Show inline table filter option;
After that, select the column for which you would like to set up a filter type, open its settings, and navigate to the Filter Settings section;
From there, choose the required filter type in the dropdown.
For the select/ multi-select field types, the filters work in the following way:
Includes searches for the occurrence of the entered string in the value (when the entered string is present in at least one of the elements of the row).
Intersection - when there are values in the array that completely match, they are checked using OR (i.e., at least one of the selected values should be present).
The filters can also be set programmatically. To make them visible, make sure that the Show inline table filter is on and the necessary field's Show filter option is also activated:
To add a filter object, create a Code action. In the example, we are setting a date filter and an amount filter that will compare the cell value:
After the code action is executed, the filters will be set in the table and available in the code, and the variable {{ui.table.filters}} will contain the following values: {created_at: [startDate, endDate], amount: [itemsAmount, null]}
To add more filters to those already set up, add a Code action with the code. In the example, we will add a filter to the condition column to look for a word ‘great' in the cells values:
After the code action is executed, the filters will be set in the table and available in the code, and the variable {{ui.table.filters}} will contain the following values: {created_at: [startDate, endDate], amount: [itemsAmount, null], condition: 'great'}
To change one of the set filters, add a Code action with the code (for the example, we will remove the start date filter):
After the code action is executed, the filters will be set in the table and available in the code, and the variable {{ui.table.filters}} will contain the following values: {created_at: [null, endDate], amount: [itemsAmount, null], condition: 'great'}
To remove the filter by a certain field, add a Code action with the code (we will remove the date filter):
After the code action is executed, the filters will be set in the table and available in the code, and the variable {{ui.table.filters}} will contain the following values: {amount: itemsAmount, condition: 'great'}
Add a Code action that will define an array of column names we need to remove from the filter:
After the code action is executed, the filters will be set in the table and available in the code, and the variable {{ui.table.filters}} will contain the following values: {amount: itemsAmount, condition: 'great'}
To remove all the previously set filters, add a Code action with the code:
After the code action is executed, the filters will be removed from the table, and the variable {{ui.table.filters}} will contain the following value: {}
To sort the data in your columns, just click on a column, by which you would like to apply the sorting.
The Table component allows dynamic configuration of its columns through the use of JavaScript mode.
Click a JS button next to the columns section to turn the dynamic mode.
Columns can be specified using an array of objects or strings. If an object is used, it can define properties such as
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, and text, among others.
A list of all supported properties can be found here.
The following is an example of how to use the component:
Default type if not specified - string. Required keys - prop, primaryKey (at least one column must be a primary key).
If you need to reload the data in the table, you can use the Reload button. Find the On Reload Button Click trigger and assign the load data action on it. When required, the button can be hidden or shown on a certain condition.
Let's see how to make edits right from the table.
Set the Edit action checkbox in the component settings sidebar. This should bring the edit button for each table row.
Scroll down to the Triggers section. Find the On Edit trigger and click Add a new action.
For the example, we'll be using the Update Row action type. Select the corresponding data source and the table.
In the Configure record fields field**,** you can set up, which columns will be updated and how these will be mapped. If you would like to update all of the columns, switch to JS mode and refer to the updated values in the table like {{ui.tableName.editedRow.data}}.
In the Configure which record(s) will be updated field, specify the unique record identifier. For the example case, this is a product code: product code = {{ui.tableName.selectedRow.data.productCode}}.
This action updates the record with the new data. What's left to do is to assign the data load action on the success trigger of the action, so that the table is updated with new data every time a record is edited.
Open the Triggers tab and On Success trigger, specify the load data action. Done!
Be cautious when using the ui.table.selectedRow.data or ui.table.clickedRow.data, variables as they may not always represent the value of the edited row and could lead to misleading results.
You can enable the bulk edit option in a table. To do that, find the Bulk edit option in the table's settings:
If you need to manage the visibility of the option, you can activate the JS mode and specify the required condition.
You can also control which fields should be editable. In the column's settings, find the Edit settings - tick the checkbox Do not allow editing this field.
To configure a bulk edit action, follow the below steps:
Enable the Bulk Edit option in the table.
Create a new action - Loop. Since we are bulk editing, we'll need a loop action to handle the update for several records at once.
Activate the Custom array to iterate option. In the appeared window, specify an array to which the loop action will be applied: {{ui.yourTable.bulkEditedRows}}.
Next, select an action that will be called in a loop. Click Create new action.
We will use an Update Row action type for the example, you can use an SQL query or a Code step depending on your data source.
Specify the identifier for the records that will be updated following the pattern: {{params.data.record_id}}
Then, specify the fields that will be updated. If you would like to update all the fields, you can switch to JS mode and specify {{params.data}}.
8. Finally, assign the bulk update action On Bulk Edit trigger of the table. Update the records to check the update in action.
If you need to apply table/ cell formatting based on a certain condition, check out this guide:
Conditional formatting based on cell valueIn case the data in your data source is dynamic and constantly changing, you can set up data refresh on a certain interval:
Interval stepYou can add an action button to your table in UI Bakery. Add a new column and change its type into a button. Adjust its text and appearance, assign a URL or an action that should be launched on a button On Click event:
Within the action, you can access the table row where the button is located using the {{ui.table.selectedRow.data}} variable. Make sure to enable the "Select row on click" checkbox for this feature to work.
It's common to ask for confirmation before deleting a table row. This feature is built-in on the action level and available as a configuration for any UI Bakery action:
Open up your On Delete action and go to the Config tab;
Check the Show confirmation dialog setting to enable the dialog:
Additionally, you can change the confirmation text to reference a table row that the user is trying to delete: "Are you sure you want to delete user #{{ ui.table.deletedRow.data.id }}?"
To hide a button on a certain condition, follow these steps:
Open the column's settings - View settings
Find the Disable option, click Yes and open the JS code field
Specify the required condition, e.g. in our example: {{row.status}} == 'Resolved'
The default CSV export button can be removed or hidden from the table under a certain condition. If you need to remove it for everyone, just select No on the Show export button setting. If you would like to show it based on a condition, switch to JS mode and specify the condition, e.g. {{user.role == 'admin'}}.
You can use the mapper to make certain data modifications and formatting.
Let's say you have a table that stores some sensitive information, e.g. passwords, and you would like to hide them under *** in a view mode. Here's how to do that using the mapper:
Open the settings of the passwords' column - View settings.
In the mapper field, specify *** or any desired values.
Now, the passwords in the table will be hidden in the view mode, but visible when the user will update it.
If you need to add references between table variables, you can use the row context option:
Row context referencingIf you have a large dataset, you might want to use server-side pagination with a list view component. Please refer to the guide below for setup:
Server-side pagination
