How to add a table to your app

Features

A table offers the following features:

1. Organize information in your app
2. Useful to display information in a comparative view

Get Started

To add a table you’ll need to:

1. Add a text area
2. Create a table
3. Set your table to scroll independently (optionally)

Step 1 – Create a table in your app

1. Drag and drop a text area onto a screen in your app.
   
2. Click on the text area and click “enter” on your keyboard two or three times to make the text area larger.
3. In the toolbar above the app screen, click on the table icon.
   
   
4. Scroll over “Insert table” and drag the cursor to choose the number of columns and rows your table will need. Once you have highlighted the number of columns and rows, click to add the table to your screen.
   
5. By default, the table border colour is transparent. To set the borders for your table, go to the Theme Appearance settings. You can find the appearance by clicking on the paintbrush icon on the right.
   
6. Scroll down and click on the “Tables” option.
   
7. Create borders for your table by selecting the border specifications you wish to use. For the purpose of this example, we will select “All sides” for the Table Border, “Top” for the Table Row Border, and “All sides” for the Table Cell Border. Click on the box next to “All sides” under the Table Cell Border option and select a color for the cell borders.
   
8. Type the values that you wish to enter in each of the cells. Use your keyboard arrows to move between the cells.
9. To style the text in the cells, you can use the formatting toolbar at the top. For example, you might want to make the column names of the table stand out for the rest.

Step 2 – Set your table to scroll independently

1. If the table in your app is wider than the width of your device then everything on the screen will become scrollable, which you don’t want. To solve this, open the Developer Options from the menu on the right.
   
2. Look at the HTML and find where the table starts. To do this, click on Control F (Windows) or Command F (Mac) to open the search bar. Then type “table” to find where the table starts.
   
3. Before the end bracket for the line of code where the table starts, type in the following: class=”table-scrollable”
   
4. Click on the blue “Save & Run” button.
   
5. Click on the Developer Options icon again to close the Developer Options window.
   
6. Click on the text area and scroll. You should now be able to scroll the table without moving the rest of the screen.
   
   

   Note: If you want to make your table look less basic, you need to use more advanced CSS to do it. If you have any questions, contact the Fliplet Support team.