Data Table

Data Table Element

The Data Table element requires at-least one Database Table in your app's data. For more information please click here.

Use the Data Table element to quickly show the data from one of your app's database tables.

The Data Table is a widget element with the following characteristics:

• It exhibits content dynamically upon page load. Within the page editor, it will showcase a placeholder that denotes the designated content area. To preview the element's appearance on your page, utilize the Page Preview feature.

• It will span the entire width of its parent element horizontally.

---

Example

The image below shows a data table element placed inside in the right layout column. For demonstration the left layout column is styled with a green dashed border, and the right layout column is styled with a red dashed border.

In the page editor, the data table element is rendered with a place holder as shown.

Example showing Data Table placeholder in the page editor.

When the page is previewed or loaded by the user, the data table element is rendered as shown below. The specific database table selected in the example had 5 fields. Each field is displayed in a column. Each entry in the database table is shown on a row.

The data table element spans the width of the parent element horizontally as shown by the green and red dashed borders.

Example showing Data Table element when the page is loaded

By default all fields of the selected Database Table are shown. Customization options are discussed below.

---

Options

The Options tab settings for this element are described below:

Table

Select the desired Database Table in your app. Without a valid database table selection, the data table element cannot work and will display a placeholder instead.

Select Columns to Display

If turned off, data table element will display all the fields in the selected database table. Each field will be displayed in its own column.

If turned on, allows you customize the data table element in the following ways:

• Select the specific fields you want to display in columns of the table.

• Set the width used by each column.

• Set the order of the columns.

• Decide whether a column is displayed on a specific screen type.

In the example below, the First Name field is chosen as Column 1, and is set to use 20% of the width. The Notes field is disabled for mobile phone screen sizes.

Customizing the Data Table by selecting columns

The Add Column button allows you to select Database Table Fields and choose the desired options as shown below:

Customizing the Data Table by adding columns

Custom Query

When this setting is OFF, the selected Database Table will be read without any criteria and sorting rules. Turning this setting ON, allows you to use one of your defined queries and set the appropriate parameters via Page Flow.

NOTE: Ensure that the query you choose outputs the fields you want to display.

Hide Column Headings

When turned ON, the names of the Database Table fields will not be shown as the column header for the table.

Hide Toolbar

By default this setting is OFF. The data table element gets rendered with a toolbar at the top as highlighted in the image below:

The data element toolbar

The toolbar provides the following functionality:

• Download the displayed information as a CSV file

• Search the Database Table

• Switch between pages of displayed information

• The 'Add' button to trigger the data entry screen to add new entries to the database.

If this setting is turned ON, this toolbar will not be displayed.

---

Other ways to customize

Using Page Flow, you can further customize the data table in the following ways:

• Use your own form instead of the default data entry screen for adding new entries and editing existing ones.

• Add your own action options in the popup menu that is displayed when an entry row is clicked.

• When the Custom Query option is turned ON, you can change the data display criteria and/or sorting order.