Data Table Column

The “Data Table Column” element can be used to add a column to the left or right side of the existing data table. This element is very useful when you want to update the data table by adding more data columns.

Also, you can only add a data table column to a data table if a data table exists on the WYSIWYG editor. If the screen does not have a data table and you drag a “Data Table Column” element to the canvas, the “Data Table Column” element will not be added to the canvas.

Usage

When to Use

You can use the “Data Table Column” element to: Add one or more data columns to the existing data table.

Data Table Column Configuration

The “Data Table Column” element has the following properties:

• UI Configuration

UI Configuration

For the “Data Table Column” 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 Column_ xxxxx
Basic	Column Name	In this box, enter the column’s name. You can see the column name in the table header.	Yes	Header
Basic	Sorting	If you click this check box, the end-user can sort the data values at the column level.	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-Table Header	Font	Allows you to define the font of the data in the header cell.	No	Open Sans
UI Properties-Table Header	Size	Allows you to define the size of the data’s font in the header cell.	No	12
UI Properties-Table Header	Color	Allows you to define the data’s font color in the header cell. To define the font 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	#6F6F6F
UI Properties-Table Header	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-Table Header	Bold	Allows you to define the thickness of the data’s font character.	No	4
UI Properties-Table Header	Style	Click this list to select one of the following font style: –> Normal –> Italic	No	Normal
UI Properties-Table Header Background	Color	Allows you to define the background color of the table’s header cell. To define 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	#C6C6C6
UI Properties-Table Header Background	Background Color	Allows you to define the background color of the table’s cell. To define 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-Table Header 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. Note:- This property is applicable to both the “Color” and “Background Color” properties.	No	100
UI Properties-Width	Fixed	If you click this check box, the table cell does not adjust its dimensions to contain data of different sizes or character lengths.	No	Clear
UI Properties-Width	Width value	Allows you to define the width of the element. Enter the width of the element in the pixel unit or percentage unit.	No	100
UI Properties-Text	Font	Allows you to define the data’s font in the table body’s cell.	No	Open Sans
UI Properties-Text	Size	In this box, enter the data’s font size in the table body’s cell.	No	12
UI Properties-Text	Color	Allows you to define the data’s font color in the table body’s cell. To define the font 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	#6F6F6F
UI Properties-Text	Bold	In this box, enter the data’s character thickness in the table cell.	No	4
UI Properties-Text	Style	Click this list to select one of the following font styles for the table cell’s data: –> Normal –> Italic	No	Normal
UI Properties-Spacing	Padding	Allows you to desirably define padding around each side of the element. It provides four different boxes to define the padding around the right, left, top, and bottom side of the element.	No	0
UI Properties-Alignment and Spacing	Element’s Alignment	This property contains three tabs. You can use these tabs as follows: 1. Left:- By default, this tab is selected. It aligns the element to the left of the page. 2. Center:- If you select this tab, it aligns the element at the center of the page. 3. Right:- If you select this tab, it aligns the element to the right of the page.	No	Left