How to implement pagination in Tables in UI Bakery

Learn how to implement pagination in a Table component in UI Bakery.

First of all, let's create a set of variables. To create a variable, open the Data tool, and go to the App State Manager.

Guide on how to implement pagination

The variables must be the following:

  • allData – array, initial value – empty.
  • currentData – array, initial value – empty.
  • offSet – number, initial value – 0.
  • limit – number, initial value – 3 (change this value for any number you want to display in the table).

Add a few actions:

Implementing pagination in Tables

The first action is "pagination". It must consist of 2 steps:

1. Code. Put the following code snippet there:

2. Save Data to App State. Here, select the "currentData" variable you created earlier.

Implement pagination with the Data connection tool

The second action is "for_back_button". It must consist of 3 steps:

1. Code:

2. Save Data to App State. Here, select the "offSet" variable.

Implement pagination with the Data tool in UI Bakery

3. Execute action. Select the "pagination" action here.

How-to guide on implementing pagination in UI Bakery

And the third action is "loaddata". You need it to load real data into the Table (here's an article on how to load data into a Smart table).

You need 3 steps to implement this action:

1. HTTP request with GET method and the URL you need to use.

Implement pagination with the Data tool in UI Bakery


2. Save Data to App State. Select the "allData" variable here.

Guide on how to implement pagination in UI Bakery


3. Execute action. Select the "pagination" action here.

How to enable pagination in the Data tool in UI Bakery

Let's now work with our UI.

Add a Table, select TableRow, and put the sequence variable as {{state.currentData}} here.

Implement pagination in Tables in your web app UI


Display your data with the {{item.name}} and {{item.password}} syntaxis in a Table. Learn more about sequences here.

Assign the created actions to the UI elements:

  • "loaddata" – to the root space “On init”.
Implement pagination in the Data tool in UI Bakery
  • "pagination" – to the table “On init”.
How to implement pagination in the data connection tool

After that, create "back" and "forward" buttons to move between the data components. At the example below, the buttons with the "only icon" appearance are used.

Set the “for_back_button” action on Click for the buttons.

Implementing pagination in the data connection tool
Guide on how to implement pagination in UI Bakery

Now, enable action arguments, and put "1" in the “forward” button settings like in the picture.


Put "-1" in the "back" button settings.

The table is ready, enjoy!

To see how it works:

  1. Register, or log in UI Bakery.
  2. Create a new project, or open the existing one.
  3. Follow the steps in the guide above to get the result.