Data Table

This post is referring to Vahana 2 (beta version). To check the document for production, please go to vDesigner-v1.0

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:

TabProperty NameDescriptionMandatoryNew Default ValueVisibility
Rules
BasicReference NameSpecifies a unique name of the element. At the application level, an element is identified and managed by the reference name.YesDataTable
_xxxxx
BasicInput SourceAllows 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
YesData Store
BasicInput 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
BasicInput 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
BasicVisibleIf you click to select this check box, the data table element becomes visible on the screen.NoSelected
BasicBusiness RuleClick 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
BasicEnableIf 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.NoSelected
BasicBusiness RuleClick 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
BasicPaginationIf 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.
NoClear
BasicSortingIf you click this check box, the end-user can sort the data at the column level.NoClear
BasicScrollableAfter 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.NoClear
Apply FilterWhen you click this check box, a Business Rule drop down list comes into view. You can use this property to apply a business rule to display items in the list.NoClear Check box
Business RuleClick this list to select the business rule. After you select the business rule, the app displays items in the list based on the condition defined in the business rule.YesWhen Apply Filter check box is selected
UI PropertiesStylesAllows 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.NoDefault
UI Properties-BackgroundColorAllows 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-BackgroundOpacityOpacity 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.
No100
UI Properties-Alignment & SpacingMarginAllows 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.NoTheme Variable (Margin)
UI Properties-Alignment & SpacingElement’s AlignmentThis 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-FontFontAllows you to define the font of data in the data table.NoOpen Sans
UI Properties-FontSizeAllows you to define the font size of the data in the data table.No12 px
UI Properties-FontColorAllows you to define the color of the data’s font.No#6F6F6F
UI Properties-FontBoldAllows you to define the thickness of the data font’s character.No4
UI Properties-FontStyleAllows you to define the style of the data font by providing the following options:
–> Normal
–> Italic
NoNormal
UI Properties-Shape & DecorationBorder ColorAllows 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 & DecorationBorder WeightAllows you to define the thickness of the element’s border.No1
Was this article helpful?
YesNo