Data Grid Head
The Data Grid Head component allows you to add a header to the data grid. This component can only be configured and used once added to a Data Grid component. Refer to the sections below to learn more.
Caution
To set a header in the data grid, drag and drop the Data Grid Head component within the Data Grid component.
Attributes
In the right panel, you can configure different attributes to customize the component. Refer to the sections below to learn more.
Design
In the Design tab, you can configure the selected component's basic information and the attributes that determine how the component will look like in the app. Refer to the sections below to learn more.
Actions
In the Actions tab, you can set animations for the components in your app's screen and determine how the user invokes effects and triggers actions while interacting with the app. Refer to the sections below to learn more.
Advanced
There are no attributes available for configuration in the Advanced tab for the Data Grid Head component.
Data Grid Header Cell
In this section, you can define the cell attributes related to its size, text content, style and events. Refer to the table below to learn how to configure a header cell.
Width | Cell border width. Type a number to set the width. To define the unit of measurement, click the arrow in the right field and select an option from the drop-down menu. | ||||||||||||||||
Height | Cell border width. Type a number to set the width. To define the unit of measurement, click the arrow in the right field and select an option from the drop-down menu | ||||||||||||||||
Font Size | Cell text size. To set the size, click the field and type the desired value. Refer to the table below to learn more about the types of text sizes and values available.
| ||||||||||||||||
Font Family | Text font family or typeface. To set a font family, click the arrow and select an option from the drop-down menu. You can also click </> and type the code to set the text font family manually. | ||||||||||||||||
Font Style | Text font style. To set the font style, click the arrow and select an option from the drop-down menu. The only option available is italic. | ||||||||||||||||
Font Weight | Text font weight. To set the font weight, click the arrow and select an option from the drop-down menu. The only option available is bold. | ||||||||||||||||
Color | Text color. To set the color, click the field and type a hexa color code or click the rounded-edges square icon to open the color picker. In the color picker, select a color or enter the hexa or rgba color code. | ||||||||||||||||
Text Decoration | Decoration added to the text. To set the decoration, click the arrow and select an option from the drop-down menu. The only option available is underline. | ||||||||||||||||
Text Alignment | Click the desired alignment option. From left to right: none (no alignment), justified, left, centered or right, depending on whether you want the text not to be aligned, to be aligned with both left and right edges, the left edge, centered between the two edges of the component or aligned with the right edge. You can also click </> and type the code to set the text alignment manually. | ||||||||||||||||
Vertical align | Cell content position. Click the field and select an option from the drop-down menu to define the position of the content within the cell. The options available are: bottom, middle, top. | ||||||||||||||||
Background Color | Cell background color. To set a color, click the field and type the hex color code or click the square icon to open the color picker. In the color picker, select a color or click HEXA or RGBA, then click the field to the left and type a HEXA or RGBA color code, respectively | ||||||||||||||||
Background Gradient | Click the Gradient radio button to set a color gradient for the component's background. Click each of the square icons to open the color picker. In the color picker, select the color or click HEXA or RGBA, then click the field to the left and type a HEXA or RGBA color code to form the color gradient. Click Switch direction to invert the order of the colors selected for the gradient. Click Change to horizontal direction or Change to vertical direction to define the gradient's direction in horizontal or vertical position, respectively. NoteIf you set a background color, the gradient won't be applied. Remember to complete one of the two options. | ||||||||||||||||
Background Image | Click the Image checkbox to add an image to the component's background. You can use a background image with both the Flat and Gradient background options. Click the Background image field and type the name of the background image, or click the upload icon to open the image picker. Select one of the images from the list or use the search bar to find an image by name. | ||||||||||||||||
Resource Origin | Method through which the resource referenced by the component is loaded. Fill in this field if the component selected references a resource, like an image or a video. Click the arrow and select one of the options available in the drop-down menu: choose L (Local) to retrieve the coded content from the local resources or choose H (HTTP) to retrieve the resource content from the Comm Server. | ||||||||||||||||
Expires | Indicates the form and validity of the defined HTTP resource's cache. By default, no value is defined. If the field remains empty, the image will be downloaded every time it is used. To define this attribute, click the field and enter the desired value. Refer to the table below to learn more about the values that can be configured.
TipRegardless of this attribute, if the app user deletes the app or its data, cached images will be deleted too. | ||||||||||||||||
Padding properties | Space between the cell border and the cell content. Enter a value for each of the padding properties: Padding Top, Padding Left, Padding Bottom and Padding Right. To define the unit of measurement, click the arrow in the right field and select an option from the drop-down menu. | ||||||||||||||||
On Click | Attribute that defines an event or action to be triggered when clicking the cell. To learn how to set the event or action to be triggered, read the Events and Actions section in Actions. | ||||||||||||||||
Position | Position of the cell within the row. Click the field and enter the position number. |