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
Adding a Table - Two Methods
There are two ways to add a table to a page.
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.
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.
The following example shows how the parts are related:
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.
Here is an example of the zebra property in action:
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:
Adjust the names of the columns using the text editor
Click on the database icon in the Top Toolbar to see the name of the database housing the data
Open the database by clicking on the database icon in the Left Toolbar
Edit that data and icons as needed
Remove any rows of data that aren't needed, or add extra rows.
Press play to watch the short video:
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.
Here is an example of adjusting the preset sizes of a table:
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.
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 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:
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:
After you've clicked 'New table', you'll see the following options:
Creating a Database Table
To create a new table, click on 'Empty Table'.
Add a name for your database table:
Add the names of the columns you need, specifying the type of column it is (eg. text, number, image, icon). Then, select 'Finish'.
Start adding your data to the columns you've created. To add new rows, click the '+' button.
You can sort the columns as needed using the up/down arrow next to the title of each column:
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:
Select the part on the canvas where you want to add your table
Go to the list of tables by clicking on the database icon
Select your table
Click 'Add to page'
Choose the columns you want to be displayed by unchecking those columns you do not want displayed
Make sure the column order is how you want to see the data appear in the table, under the heading 'Choose your column order'
Choose the layout for your data - in this case, we want to add the data as a table, so select the table option
Click 'Add as Table'
Your data will appear on the canvas as a table.
Then, format the table as necessary.
Related Information
Last updated
Was this helpful?