Getting started with the component

In this article, we will cover the basics of working with the table such as how to display your data, configure filtering and sorting, edit table records, and others.

Displaying data

Adding a search bar

Configuring Table filtering & sorting

Sorting the table is easy, you simply need to click on the column which you'd like to apply sorting to.

As for filtering, tables in UI Bakery come with predefined filters. To activate them, you just need to select the Show inline table filter checkbox in the Filtering section.

If you don't need a filter for a specific column, you can disable it: click on the column to open its settings, navigate to the Filter settings, and deselect the Enable filtering checkbox.

Setting up filter type

You can set specific filter types for the table columns - Includes or Equal. The setting is under the Filter settings tab in the column's settings.

For the Select/Multiselect field types, 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're values in the array that completely match, they are checked using OR (at least one of the selected values should be present).

Adding filters programmatically

You can also set filters programmatically. Below are a few examples of how you can do that👇

Setting up a Date & Number filter

In our example, we will be setting date and amount filters that will compare cell values. Here, you need to create a JavaScript Code action and specify the following code to add a filter object:

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 executing this action, the filters will be set in the table and will be available in the code. The {{ui.table.filters}} variable will contain the following values: {created_at: [startDate, endDate], amount: [itemsAmount, null]}.

Adding more filters to the existing ones

To add more filters to the one you've already configured, you need to create a JavaScript Code action and specify the code you need, for example:

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

This code snippet adds a filter to the Condition column to search for the word "great" in the cell values.

After executing this action, the filters will be set in the table and will be available in the code. The {{ui.table.filters}} variable will contain the following values: {created_at: [startDate, endDate], amount: [itemsAmount, null], condition: 'great'}.

Changing a column-specific filter

To change one of the set filters, create a JavaScript Code action and specify the code you need, for example:

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

This code snippet removes the Start date filter.

After executing this action, the filters will be set in the table and will be available in the code. The {{ui.table.filters}} variable will contain the following values: {created_at: [null, endDate], amount: [itemsAmount, null], condition: 'great'}

Removing the entire column filter

There're two options how you can remove the entire column filter:

• Remove the filter by a certain field

Here, you need to add the following code to the JavaScript Code action:

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

In this example, the code removes the Date filter.

After executing this action, the filters will be set in the table and will be available in the code. The {{ui.table.filters}} variable will contain the following values: {amount: itemsAmount, condition: 'great'}.

• Define an array of column names to remove from the filter

Here, you need to add the following code to the JavaScript Code action:

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

After executing this action, the filters will be set in the table and will be available in the code. The {{ui.table.filters}} variable will contain the following values: {amount: itemsAmount, condition: 'great'}

Removing all filters

To remove all previously set filters, create a JavaScript Code action and specify the following code:

{{ui.table.resetFilters()}}

After executing this action, the filters will be removed from the table, and the variable {{ui.table.filters}} will contain the following value: {}.

Additional info on how you can configure server-side filtering and sorting👇

Configuring server-side pagination | UI Bakery Docsdocs.uibakery.io

Editing records in the Table

Let's see how you can modify records right from the table:

1. Firstly, select the Enable edit button checkbox in the Actions section in the right side panel. The pencil icon will appear next to each table row.

1. Next, navigate to the Triggers section, select the On Edit trigger, and click + Create action.

2. Select your data source and action type (we'll be using the Update Row action).

3. In the Filters section, specify the unique record identifier. For example, in our case, it will be the product code: code = {{ui.tableName.selectedRow.data.code}}.

1. In the Configure row section, specify which columns will be updated and how they will be mapped.

1. (Optional) As a second step to the update action, add the Execute Action step and select your load data action. This will ensure the table is updated with new data each time a record is edited.

That's it! Now, when you edit a row, the update action will be executed and the table will be updated with new values.

Bulk editing

Let's see how you can enable bulk editing table records:

1. Start by selecting the Enable bulk edit checkbox in the Actions section in the right side panel. The Edit button will appear in the top right corner of the table.

2. Next, create a new action of the Loop Action type to handle bulk records update:

   1. In the Loop settings section, specify the {{ui.table.bulkEditedRows}} array in the Return an array for iteration field.

   2. In the Action to execute in loop dropdown, select + Create action.

3. For this action, select your data source and action type (we'll be using the Update Row action as an example):

   1. In the Filters section, specify the unique record identifier following this pattern: {{params.data.code}}.

   2. In the Configure row section, specify which columns will be updated and how they will be mapped. To update all the fields, you can switch to the JS mode and specify {{params.data}}.

4. Finally, assign the bulk update action to the table's On Bulk Edit trigger.

Done! Now, when you bulk edit table rows, the bulk update action will be executed and the table will be updated with new values.

Adding an action button to the table

Another useful thing that you can do with the Table component in UI Bakery is add an action button to it that will, for example, direct users to a website. To do so, you need to add a new table column and set its type as Button. You can also adjust its text and appearance in the View settings section.

If you scroll down to the Actions section and expand it, you can assign a URL or action that will be launched on the button's On Click event.

Using data mapper

You can use the Mapper field in the column's View settings section to modify and format your data. Let's say you store some sensitive information in the table, for example, user passwords, and you would like to hide them in the View mode. To do so, you need to open the password columns' settings and scroll down to the View settings section. There, in the Mapper field, you need to specify the value you want to be displayed, for example, ****.

This way, the passwords won't be displayed in the View mode but will be visible when updating records.

Check out this article for another example of using field mapping👇