---
description: How to add and style tables to display information.
---

# Tables

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.

{% hint style="success" %}
**Location in the Parts Library:** Base Parts > Data Display > Table
{% endhint %}

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2F9gxw0eF2WpEqWfIiU6LJ%2FTableExample.png?alt=media&#x26;token=79f4900a-6245-4e7d-86b9-69ab36ab6751" alt=""><figcaption><p>An Example Table from the Parts Library</p></figcaption></figure>

## Adding a Table - Two Methods <a href="#adding-a-card" id="adding-a-card"></a>

There are two ways to add a table to a page.&#x20;

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. &#x20;
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.&#x20;

Let's start with adding a table from the Parts Library.&#x20;

## 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.

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2FfsRpMJ9T1lWD6J32DkRd%2FTableHeader.png?alt=media&#x26;token=3d2dbd69-a051-46c9-a36c-1a36e2abd0fe" alt=""><figcaption><p>Table Header</p></figcaption></figure>

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2FQUvDz4JFV9GRsD1gfHVG%2FTableComponent-TableRow.png?alt=media&#x26;token=a42bd378-8e29-44ef-b53b-6c993f94dcff" alt=""><figcaption><p>Table Row</p></figcaption></figure>

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2FJD2lYKSvLl44XxdbA5n4%2FTableComponent-TableRowHeader.png?alt=media&#x26;token=15f0a6cd-c0f5-493c-8c8e-ad37ba09b250" alt=""><figcaption><p>Table Row Header</p></figcaption></figure>

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2FC1AfAmq0qIlYl2rSFTof%2FTableComponent_TableRowHeaderLeft.png?alt=media&#x26;token=56e4b7c7-d292-4dfa-970c-ff4d7fc0cc63" alt=""><figcaption><p>Table Row Header</p></figcaption></figure>

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2FJdXe3u5sq4paN24HahQx%2FTableComponent-TableRowData.png?alt=media&#x26;token=d9280bac-d4b2-4abc-8a04-3188842937e6" alt=""><figcaption><p>Table Row Data</p></figcaption></figure>

The following example shows how the parts are related:

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2Fj2pUF7oVZbORTzq0vKdc%2FTableComponents.gif?alt=media&#x26;token=e9070592-f889-48c1-9bf5-1b152f8599d5" alt=""><figcaption><p>The Relationship of Table Components</p></figcaption></figure>

### Styling the Table

Like many other parts, [fonts](../../frequently-used-parts/text), [borders](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/borders), [shadow](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/shadow), [rounding](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/rounding), [opacity](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/opacity), [colors](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/colors-and-themes), and [color gradients](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/color-gradients) can be adjusted using the property editor on the right, once the table has been selected.

#### Editing Text Within a Table <a href="#editing-text-within-a-list-item" id="editing-text-within-a-list-item"></a>

To [edit](../../frequently-used-parts/text) 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.&#x20;

#### 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.

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2FZEm3HnjJv8DipNvA6uny%2FTableZebra.png?alt=media&#x26;token=1d9e0920-4790-4447-8091-6e27a04e1925" alt=""><figcaption><p>Zebra Property</p></figcaption></figure>

Here is an example of the zebra property in action:

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2F5Elzj6Csj0oWjIaef92s%2FTableZebra.gif?alt=media&#x26;token=6198e8eb-8982-4f45-a52f-fda24825c2ca" alt=""><figcaption><p>Applying the Zebra Property</p></figcaption></figure>

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&#x20;
4. Edit that data and icons as needed
5. Remove any rows of data that aren't needed, or add extra rows.&#x20;

Press play to watch the short video:

{% embed url="https://www.loom.com/share/acd7df511ad941ce9dc6abb04317a92c?hideEmbedTopBar=true&sid=88dac01e-ea49-4c3b-b1d2-44401b7df8f3" %}
Editing a Comparison Table from the Parts Library
{% endembed %}

### 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.

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2FJjXQD2m848Mg6h9LejsK%2FTablePresetSizes.png?alt=media&#x26;token=7f65f4d0-8301-4cc0-aa13-162ea65a2fe0" alt=""><figcaption><p>Table Size Properties</p></figcaption></figure>

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

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2F0WWdzXEMUpQ1ot1UQS86%2FTablePresetSizes.gif?alt=media&#x26;token=826b8cf6-373f-4075-9fd0-d52b04efdb51" alt=""><figcaption><p>Table Preset Sizes</p></figcaption></figure>

### Pin Rows and Columns

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

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.

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2Fm3jp21gPIEta1yjifT2a%2FTablePinRowsAndColumns.png?alt=media&#x26;token=11209c31-6104-482c-aa7d-5bfb20a9ce95" alt=""><figcaption><p>Pin Rows and Columns Property</p></figcaption></figure>

Pinning the rows will make the rows inside the Table Header and Table Footer sticky.&#x20;

Pinning the columns will make the heading columns sticky.&#x20;

### 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.&#x20;

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:

{% embed url="https://www.loom.com/share/0944d49a68ab4f0997ab562c0aa4f586?hideEmbedTopBar=true&sid=6f80c809-5e33-4879-87f5-0dc357fa76d7" %}
Adding Rows and Columns to a Table
{% endembed %}

### Adding a Background Image to a Table <a href="#editing-and-formatting-the-card" id="editing-and-formatting-the-card"></a>

To add a [background image](../../customising-and-formatting/background-images) 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. &#x20;

You can then adjust the [opacity](../../customising-and-formatting/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.&#x20;

The database table icon is in the left toolbar:

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2Fa6eVxu9I2rFBVqULvx5T%2FDatabaseTableIcon.png?alt=media&#x26;token=4ce7c51b-2a46-4a9c-a0ce-aea0360889e3" alt=""><figcaption><p>Databases</p></figcaption></figure>

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:  &#x20;

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2F6izPKqExhxiNtBRodJDT%2FDatabaseNewTable.png?alt=media&#x26;token=3bcbb435-dbc1-4ba9-a374-b9f80cf7f09f" alt=""><figcaption><p>Create a New Database Table</p></figcaption></figure>

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

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2Fi4700A2DdJobWSVjcnCI%2FDatabaseTableCreate.png?alt=media&#x26;token=cb88cb50-2f62-4405-96ac-17bddcbaa543" alt=""><figcaption><p>Create an Empty Table Or Import a File</p></figcaption></figure>

### Creating a Database Table

To create a new table, click on 'Empty Table'.&#x20;

1. Add a name for your database table:

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2Fs9X3ZYephPxhGV72nKnl%2FTableCreateName.png?alt=media&#x26;token=0dd6224f-a6a6-42d3-b706-cc55bf58badc" alt=""><figcaption><p>Creating a Database Table from an Empty Table</p></figcaption></figure>

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

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2Fje8A0l4OyXrvVB1rXWOm%2FTableCreateColumns.png?alt=media&#x26;token=faa82c56-940a-4b82-bd7d-bf506cd443f6" alt=""><figcaption><p>Add Columns to the Table</p></figcaption></figure>

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

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2F7Cr0m32VdQVTUiM0ElrT%2FTableAddData.gif?alt=media&#x26;token=58496068-0189-4250-a955-5962261ad3e3" alt=""><figcaption><p>Add Data to the Columns</p></figcaption></figure>

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

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2Fu0NsrIkSL9jsirtWLPVT%2FTableSortColumn.gif?alt=media&#x26;token=a759b77e-0aaf-4042-9f10-4579d2e8351e" alt=""><figcaption><p>Sort the Columns</p></figcaption></figure>

### 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.&#x20;

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

## 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'&#x20;
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'&#x20;
9. Your data will appear on the canvas as a table.

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2FMfm6knOJ56lr7oGSgkpQ%2FAddDatabaseAsTable.gif?alt=media&#x26;token=32d545c3-11a8-4a17-bec3-9b2aba558a10" alt=""><figcaption><p>Adding the Database Table to the Canvas</p></figcaption></figure>

Then, format the table as necessary.



## Related Information

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><mark style="color:orange;">Customizing and formatting</mark></td><td></td><td></td><td><a href="../../customising-and-formatting">customising-and-formatting</a></td></tr><tr><td><mark style="color:orange;">Background images</mark></td><td></td><td></td><td><a href="../../customising-and-formatting/background-images">background-images</a></td></tr><tr><td><mark style="color:orange;">Databases</mark></td><td></td><td></td><td><a href="../../page-builder/left-toolbar/databases">databases</a></td></tr></tbody></table>

