Table

A quick guide to using and working with a table component

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.

Columns

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

Methods

Method	Description
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

Triggers allow you to launch certain actions upon 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 Page Change	Calls for an action as you change 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 to the table reload button.

Displaying the data

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:

[
  {
    "id": 1,
    "full_name": "Susan Williamson",
    "first_name": "Susan",
    "last_name": "Williamson",
    "username": "sWilliamson",
    "avatar": "https://sauibakeryprod.blob.core.windows.net/mock-database-assets/users-avatars/user-00.png",
    "email": "[e-mail]",
    "email_verified": true,
    "phone": "808.797.1741",
    "twitter_handle": "sWilliamson",
    "bio": "Friendly music geek. Organizer. Twitter scholar. Creator. General food nerd. Future teen idol. Thinker."
  },
  {
    "id": 2,
    "full_name": "Henrietta Wagner",
    "first_name": "Henrietta",
    "last_name": "Wagner",
    "username": "hWagner",
    "avatar": "https://sauibakeryprod.blob.core.windows.net/mock-database-assets/users-avatars/user-01.png",
    "email": "[e-mail]",
    "email_verified": true,
    "phone": "903-894-7300",
    "twitter_handle": "hWagner",
    "bio": "Travel lover. Explorer. Analyst. Subtly charming pop culture aficionado. Friendly creator."
  } 
  ]

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.

Adding a search bar to the table

The guide to adding a search bar is available here:

pageSearch table based on input value

Adding table filters

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

Setting up filter type

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 the Filter Settings section;

• From there, choose the required filter type in the dropdown.

Adding filters programmatically

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:

Case 1. Setting up a date and a number filter.

1. 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:

const startDate = moment().startOf('month');
const endDate = moment().endOf('month');
const itemsAmount = 100;
const filters = {	
    created_at: [startDate, endDate],	
    amount: itemsAmount,
}
{{ui.table.setFilters(filters)}};

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]}

Case 2. Adding more filters to the existing ones

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:

const extraFilters = { condition: 'great'};
{{ui.table.setFilters(extraFilters)}};

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'}

Case 3. Change a column-specific filter

To change one of the set filters, add a Code action with the code (for the example, we will remove the start date filter):

const resetCreatedAtStartDateFilter = { created_at: [null, endDate] };
{{ui.table.setFilters(resetCreatedAtStartDateFilter)}};

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'}

Case 4. Remove an entire column filter

Option 1.

To remove the filter by a certain field, add a Code action with the code (we will remove the date filter):

const resetDateFilter = { created_at: null };
{{ui.table.setFilters(resetDateFilter)}};

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'}

Option 2

Add a Code action that will define an array of column names we need to remove from the filter:

const columnsToReset = ['created_at'];
{{ui.table.resetFilters(columnsToReset)}};

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'}

Case 5. Remove all filters

To remove all the previously set filters, add a Code action with the code:

{{ui.table.resetFilters()}}

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: {}

Sorting table columns

To sort the data in your columns, just click on a column, by which you would like to apply the sorting.

Dynamic columns

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:

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

Default type if not specified - string. Required keys - prop, primaryKey (at least one column must be a primary key).

Reloading data in the table

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.

Edit table records

Let's see how to make edits right from the table.

1. Set the Edit action checkbox in the component settings sidebar. This should bring the edit button for each table row.

2. Scroll down to the Triggers section. Find the On Edit trigger and click Add a new action.

3. For the example, we'll be using the Update Row action type. Select the corresponding data source and the table.

4. 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}}.

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

Bulk edit

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:

1. Enable the Bulk Edit option in the table.

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

3. 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}}.

4. Next, select an action that will be called in a loop. Click Create new action.

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

6. Specify the identifier for the records that will be updated following the pattern: {{params.data.record_id}}

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

Formatting table cells based on a condition

If you need to apply table/ cell formatting based on a certain condition, check out this guide:

pageConditional formatting based on cell value

Refreshing the data in a table on an interval

In case the data in your data source is dynamic and constantly changing, you can set up data refresh on a certain interval:

pageInterval action

Adding an action button to the table

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

Displaying a confirmation dialog for the Delete action

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 }}?"

Hiding a button based on a condition

To hide a button on a certain condition, follow these steps:

1. Open the column's settings - View settings

2. Find the Disable option, click Yes and open the JS code field

3. Specify the required condition, e.g. in our example: {{row.status}} == 'Resolved'

Hiding CSV export button

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'}}.

Using data mapper

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:

1. Open the settings of the passwords' column - View settings.

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

Referencing row context

If you need to add references between table variables, you can use the row context option:

pageRow context referencing

Table server-side pagination

pageTable server side pagination