Data Table
Last updated
Last updated
Use the Data Table element to quickly show the data from one of your app's .
The Data Table is a widget element with the following characteristics:
It will span the entire width of its parent element horizontally.
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.
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.
TableSelect Columns to DisplayIf 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.
Custom QueryNOTE: Ensure that the query you choose outputs the fields you want to display.
Hide Column HeadingsHide ToolbarBy default this setting is OFF. The data table element gets rendered with a toolbar at the top as highlighted in the image below:
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.
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.
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 feature.
By default all fields of the selected are shown. Customization options are discussed below.
The settings for this element are described below:
Select the desired in your app. Without a valid database table selection, the data table element cannot work and will display a placeholder instead.
The Add Column button allows you to select and choose the desired options as shown below:
When this setting is OFF, the selected 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 .
When turned ON, the names of the fields will not be shown as the column header for the table.
Using you can further customize the data table in the following ways:
