II. Displaying and filtering data in a Table

Load, display and filter your data inside the Table

In this section, we will display Customers' data in the Table, customize Table's look by hiding some columns and add a filtering option by Customer Name. Let's go!

Loading the data

Let’s start with loading the data from the first table, Customers.

1. Add a new Action - Load Table.

2. Specify the Data Source and select the Customers table from the Tables list

3. Click Run Action and check the Result section for the outcome.

If the request is successful, the Result section will be highlighted in green. In case of any errors, the section will be highlighted in red, and you will be able to troubleshoot right there.

Loading data from the Customers table

Customizing the Table with options

Let’s display the Customers data. Find a Table component and drag it to the canvas. The Table will already have the data inside, as the Action is automatically tied to the Component.

We won’t need all the data in the Table, that’s why we can groom it a little. Start with hiding the unnecessary columns in the right Columns menu by clicking on the eye icon. To unhide the column, just click on the eye icon again.

Hiding Columns from the Table

Edit option

Next, let’s make sure we can make edits to the records directly from the Table. To do that, first, navigate the Appearance&Style section in the right menu and check the Edit option. You’ll notice an Edit label appears on each row of the table.

To ensure the updated data is sent back to the data source, we’ll need to add a corresponding action:

1. Add a new Action and rename it to UpdateCustomerRecord - select action step Update Row

2. Specify how to identify the updated record and how to map the changes: {{ ui.customersTable.editedRow.data }}

3. Next, identify the record that will be updated, e.g. by a customer number by {{ ui.customersTable.editedRow.prevData.customerNumber }}

4. Lastly, since the Table needs to be updated with the new data, switch to the Triggers section, and assign the loadCustomers action on Success.

Creating an Update action

Once done, we can bind the Update action to the Trigger that should actually call for this Action. To do that, open the Triggers section and select the update action in the list for On Edit trigger.

Setting an action on a trigger

Great! Let’s add some filtering options now.

Filtering the data

1. Find an Input component and drag it onto the canvas.

2. On the Appearance&Style section, set a placeholder for the Input - Enter Customer Name.

3. Next, go to the Triggers section and on the On Change trigger, find the loadCustomers action in the list.

4. Lastly, add a filter to the Action to return the values corresponding to the Customer Name filter. We will apply a strict condition, so the filter should be Customer name = {{ ui.customerName.value }}

Configuring Input

Nice job! You’ve completed the first milestone and have added a Table and applied filters to it for easier navigation through the records. Let’s add some Customer statistics to our dashboard as a next step.