Data Table

This element is used to create a grid-based table. The cell or grid of the table contains a data. In the application, you can use the data table in the report module to display variety of data. The data table is a useful element to display a collection of data that the user can use to observe and download a high-level data report.

Usage

When to Use

You can use the “Data Table” element to: –> Display multiple pages huge data reports. –> Display a collection of data for data analytics.

Data Table Configuration

The “Data Table” element has the following properties:

• UI Configuration

UI Configuration

For the “Data Table” element, you can configure the following properties:

Tab	Property Name	Description	Mandatory	New Default Value	Visibility Rules
Basic	Reference Name	Specifies a unique name of the element. At the application level, an element is identified and managed by the reference name.	Yes	DataTable _xxxxx
Basic	Input Source	Allows you to configure the source from where the application fetches the data and then displays it in the data table. You can configure the data source by using the following options: –> Data Store –> Static	Yes	Data Store
Basic	Input Value (When you click the Data Store tab)	To configure the data source: –> In the Input Value box, enter the entity path from where the application will fetch the data.	Yes
Basic	Input Value (When you click the Static tab)	In the Input Value box, enter the data value manually. The application will display this value in the data table.	Yes
Basic	Visible	If you click to select this check box, the data table element becomes visible on the screen.	No	Selected
Basic	Business Rule	Click this list and then select a pre-defined business rule that will determine the element’s visibility. If the user’s action satisfies the condition in the business rule, the application will display or hide the element. To define the business rule, access the Business Rule Manager module.	No
Basic	Enable	If you click to select this check box, the data table element becomes active on the screen. You can perform the function on the active element.	No	Selected
Basic	Business Rule	Click this list and then select a business rule to make the element active or inactive. If the user’s action satisfies the condition in the business rule, the application will make the element active or inactive in the application. To define the business rule, access the Business Rule Manager module.	No
Basic	Pagination	If you click this check box, the application displays the data in multiple pages. You can use this feature when you want to display bulk of data to the end-user. By clicking a specific page at a time, the user can view the data report.	No	Clear
Basic	Sorting	If you click this check box, the end-user can sort the data at the column level.	No	Clear
Basic	Scrollable	After you click this check box, a scroll bar becomes availble in the data table element. The user can move the scroll bar to view the data.	No	Clear
UI Properties	Styles	Allows you to select a specific style for the element from the list of pre-defined styles. The vDesigner module offers pre-defined styles that you can apply to the element.	No	Default
UI Properties-Background	Color	Allows you to configure the background color of the element. To configure the background color: –> In the Color box, click the left color box (), and a color canvas open. –> On the canvas, on the horizontal bar, move the circle to select the color. –> In the upper section, move the circle to select the tone of the color.	No	#FFFFFF
UI Properties-Background	Opacity	Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency. While configuring the color, you can also configure the opacity in the percentage unit.	No	100
UI Properties-Alignment & Spacing	Margin	Allows you to define a margin around each side of the element. It provides four different boxes to define the margin outside the right, left, top, and bottom borders of the element.	No	Theme Variable (Margin)
UI Properties-Alignment & Spacing	Element’s Alignment	This property allows you to align the element by providing the following options: 1. Left:- If you select this option, it aligns the element to the left across the width of the page. 2. Center:- If you select this option, it aligns the element at the center across the width of the page. 3. Right:- If you select this option, it aligns the element to the right across the width of the page.
UI Properties-Font	Font	Allows you to define the font of data in the data table.	No	Open Sans
UI Properties-Font	Size	Allows you to define the font size of the data in the data table.	No	12 px
UI Properties-Font	Color	Allows you to define the color of the data’s font.	No	#6F6F6F
UI Properties-Font	Bold	Allows you to define the thickness of the data font’s character.	No	4
UI Properties-Font	Style	Allows you to define the style of the data font by providing the following options: –> Normal –> Italic	No	Normal
UI Properties-Shape & Decoration	Border Color	Allows you define the color of the element’s border. To define the color: –> In the Border Color box, click the left color box (), and a color canvas open. –> On the canvas, on the horizontal bar, move the circle to select the color. –> In the upper section, move the circle to select the tone of the color.	No	#C6C6C6
UI Properties-Shape & Decoration	Border Weight	Allows you to define the thickness of the element’s border.	No	1