How to Use Table

Displaying Data in a Table

1. Click [Create] next to [Dataflows].
2. Select [Onboarding DB] in [Select resource].
3. Change the name of the dataflow next to the [Run] button to listUsers.
4. Write the following query in [SQL]:

SELECT * FROM users LIMIT 20;

5. Press [Run] to run.
6. Place a [Table] element.
7. Enter {{ listUsers.data }} in [Data] of the [Table].

Note: If values retrieved from a REST API or other sources are nested, you can access nested data by writing something like {{ listUsers.data.users }}.

Modifying the Display of Columns in the Table

Set the display name of the columns in [Display name].

Select the type of data display in [Type].

You can hide columns by turning on [Hidden].

You can also change the order of columns by dragging and dropping each column in the column list.

Changing the Height of the Table

Select the table and edit the [Height] field to change the height of the table.

If you want to dynamically change the height based on the retrieved data, you can set a dynamic height by entering {{ dataflow1.data.length }}.

Note: The maximum height is 20.

Setting Pagination

You can set pagination from the table component. Currently, it supports Limit-Offset based and Cursor based pagination.

Setting Limit-Offset Based Pagination

Displaying User Information in the Table

1. Click [Create] on the right side of [Dataflows].
2. Change the dataflow name next to the [Run] button to listUsers.
3. Select [Onboarding DB] in [Select resource] and check [Run automatically on inputs change].
4. Enter the following SQL in [SQL]:

```sql SELECT * FROM users LIMIT 10 OFFSET 0; ```

5. Click [Run] to run.
6. Drag & drop a [Table] onto the canvas and enter {{ listUsers.data }} in [Data].

Reflecting Total Data Count in the Table

7. Click [Create] on the right side of [Dataflows].
8. Change the dataflow name next to the [Run] button to countUsers.
9. Select [Onboarding DB] in [Select resource].
10. Enter the following SQL in [SQL]:

SELECT COUNT(*) as count FROM users;

11. Click the placed [Table] and check [Pagination > Server-side pagination] in [Inspect].
12. Select Offset-based in [Type].
13. Write {{ countUsers.data[0].count }} in [Total count].

Setting Limit/Offset in dataflow

14. Click listUsers from the dataflow list and modify the SQL as follows:

SELECT * FROM users
LIMIT 10
OFFSET {{ table1.paginationOffset }};

15. Verify the pagination functionality.

Setting Cursor Based Pagination

Displaying User Information in the Table

1. Click [Create] on the right side of [Dataflows].
2. Change the dataflow name next to the [Run] button to listUsers.
3. Select [Onboarding Firebase] in [Select resource] and check [Run automatically on inputs change].
4. Select List documents in [Action].
5. Enter users in [Collection] and 10 in [Limit].
6. Enter id in [Order by].
7. Press [Execute] to run.
8. Drag & drop a [Table] onto the canvas and enter {{ listUsers.data }} in [Data].

Preparing the Table Component for Cursor Based Pagination

9. Click the placed [Table] and check [Pagination > Server-side pagination] in [Inspect].
10. Select Cursor-based in [Type].
11. Enter the following in [Next Page Cursor]:

{{ dataflow1.data[dataflow1.data.length - 1].id }}

12. Enter the following in [Previous Page Cursor]:

{{ dataflow1.data[0].id }}

13. Enter the following in [Has More]:

{{ dataflow1.data.length >= 10 }}

Setting Cursors in dataflow

14. Click listUsers from the dataflow list and enter {{ table1.nextPageCursorValue }} in [Start after] and {{ table1.previousPageCursorValue }} in [End at].
15. Verify the pagination functionality.