Tables

How to add and style tables to display information.

Tables are structured layouts that organize data into rows and columns, forming a grid. They are used to display information in a clear, concise, and easily understandable manner. Tables are particularly useful for presenting datasets, comparisons, and detailed information in a way that allows users to quickly scan and interpret the data.

Location in the Parts Library: Base Parts > Data Display > Table

An Example Table from the Parts Library

Adding a Table - Two Methods

There are two ways to add a table to a page.

1. Add a table from the Parts Library, and then edit the table as needed. Choose this sort of table if you have limited data, and are using the table to display only a few pieces of information.

2. Create a database table, either by setting one up using the database table wizard, or uploading an .xlsx file. Then, display the data on the page as a table. You would add a table based on this approach if you have more complex data, data that might need to be sorted, and/or data that you already have in a spreadsheet format.

Let's start with adding a table from the Parts Library.

1. Adding a Table from the Parts Library

Choose the table most closely aligned with what you need from the Parts Library.

Choose your preferred table variation, select the part where you’d like to add your table and click ‘+ add to page’. This method will require you to edit the table to replace the placeholder data with your own data.

The Structure of a Table

The table (parent) houses some key parts (children). Table Rows contain table row headers and table row data.

Table Header

Table Row

Table Row Header

Table Row Header

Table Row Data

The following example shows how the parts are related:

The Relationship of Table Components

Styling the Table

Like many other parts, fonts, borders, shadow, rounding, opacity, colors, and color gradients can be adjusted using the property editor on the right, once the table has been selected.

Editing Text Within a Table

To edit the text within a table, select it to activate the property editing panel on the right, and edit the text to replace it with your own.

Zebra Stripe Rows

To make every alternate line of the table shaded in a neutral color, select the table and choose the 'zebra' property in the right property editor panel. The zebra style can help the readability of the table, particularly with larger amounts of data.

Zebra Property

Here is an example of the zebra property in action:

Applying the Zebra Property

The shading will remain on every alternate row, even if rows are moved up or down.

How to Edit A Comparison Table from the Parts Library

Choose the comparison table most closely aligned with what you need from the Parts Library. The tables that say 'Coming from data' indicate that the table's data is stored in a database. When you add the table, the database will be copied into your app, and you can edit the database table to reflect your preferred contents.

The process to update the table is as follows:

1. Adjust the names of the columns using the text editor

2. Click on the database icon in the Top Toolbar to see the name of the database housing the data

3. Open the database by clicking on the database icon in the Left Toolbar

4. Edit that data and icons as needed

5. Remove any rows of data that aren't needed, or add extra rows.

Press play to watch the short video:

Editing a Comparison Table from the Parts Library

Adjusting the Size of the Table

Tables come with preset sizes, as well as the ability to set the exact size for height and width. The preset sizes, height, and width, can all be made responsive.

To adjust the table size, select the table part to activate the property editing menu on the right, and select 'Size'. You'll see the preset sizes tab and the width and height tabs.

Table Size Properties

Here is an example of adjusting the preset sizes of a table:

Table Preset Sizes

Pin Rows and Columns

There are some examples of tables in the parts library where the rows and columns are pinned.

Pinning rows or columns in a table is a highly effective way to enhance the usability and readability of large datasets. By keeping critical reference points in view, the pinning of rows or columns improves navigation, accuracy, and efficiency, ultimately leading to a better user experience.

Pin Rows and Columns Property

Pinning the rows will make the rows inside the Table Header and Table Footer sticky.

Pinning the columns will make the heading columns sticky.

Adding Additional Rows and Columns to a Table

To add a row of data to a table, select an existing table row part, and duplicate it using the edit menu in the top toolbar.

It's important to note that if you duplicate a 'table row data' part, you will essentially be adding a new column to the table. Here is an example of duplicating a row, and duplicating table row data to add a new column. Press play to view the short video:

Adding Rows and Columns to a Table

Adding a Background Image to a Table

To add a background image to a table, select the table. In the property editor on the right, click on Image > Default to select your image from the Media Gallery or upload an image from your device.

The image will take up the full space of the table and will expand if more parts are added to the table, or reduce as the size of the table is reduced.

You can then adjust the opacity of the background image within the Decoration Editor as needed.

2. Creating and Adding a Database Table

It's easier than you might think to create a database table.

The database table icon is in the left toolbar:

Databases

Selecting the database table icon opens the database menu, where you'll see all your existing databases. This is where you can create a new database table:

Create a New Database Table

After you've clicked 'New table', you'll see the following options:

Create an Empty Table Or Import a File

Creating a Database Table

To create a new table, click on 'Empty Table'.

1. Add a name for your database table:

Creating a Database Table from an Empty Table

1. Add the names of the columns you need, specifying the type of column it is (eg. text, number, image, icon). Then, select 'Finish'.

Add Columns to the Table

1. Start adding your data to the columns you've created. To add new rows, click the '+' button.

Add Data to the Columns

You can sort the columns as needed using the up/down arrow next to the title of each column:

Sort the Columns

Importing an .xlsx file

If you've already got your data in an .xlsx file, click on 'Import Excel File' and you can upload the file from your device.

Once you've uploaded the file, you'll see it in your list of tables.

Adding Your Database Table to the Canvas

The process to add your database table to the canvas is as follows:

1. Select the part on the canvas where you want to add your table

2. Go to the list of tables by clicking on the database icon

3. Select your table

4. Click 'Add to page'

5. Choose the columns you want to be displayed by unchecking those columns you do not want displayed

6. Make sure the column order is how you want to see the data appear in the table, under the heading 'Choose your column order'

7. Choose the layout for your data - in this case, we want to add the data as a table, so select the table option

8. Click 'Add as Table'

9. Your data will appear on the canvas as a table.

Adding the Database Table to the Canvas

Then, format the table as necessary.

Related Information

Customizing and formatting

Background images

Databases