Data Grid Component

The Data Grid component is a Centauri Runtime (v1.0) display and layout tool designed to organize components into columns and rows. Adding a component to a Data Grid component uses the added component's Label Text to create a new column in Express View. Then, it displays the component's field in a row matching that column. Creators can also configure the Data Grid component so end-users can add additional rows containing these components.

The Data Grid component is useful for configurations where end-users need to enter multiple datasets in an organized format. For example, let's say you're a financial planner. You need to collect your end-user's account name, type, and balance. Use a Data Grid component to display one or more fields so you can capture these values.

You'll find the Data Grid component in the Display & Layout group to the left of the Module Builder.

To learn more about general component settings, view our General Component Settings article.

Field Text

A static image displaying the Data Grid Component's Display settings.

Setting Description

Label Text

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case.

Default State Options

Setting Description

Disable User Input

Prevents the end-user from entering a value in the field by displaying it as grayed-out and unclickable in Express View.

By default, Disable User Input is set to (OFF).

Hide Field

Displays or hides the field from view. Setting Hide Field toggle  (ON) hides it in Express View. Setting the toggle back to (OFF) displays the field. The component will always remain visible in the Module Builder.

By default, Hide Field is set to (OFF).

Formatting

Setting

Description

Striped

Set to  (ON) to alternate table row colors.

By default, this setting is set to (OFF).

Bordered

Set to  (ON) to display borders around the edges and each row of the table.

By default, this setting is set to (OFF).

Multiple Values

Set to  (ON) to let the end-user make multiple sections in the table.

By default, this setting is set to (OFF).

Hover

Set to  (ON) to display row highlights when hovering over an individual row.

By default, this setting is set to (OFF).

Condensed

Set to  (ON) to remove extra spacing between rows. The effect you see depends on the custom CSS styles applied to the application.

By default, this setting is set to (OFF).

Table View

Set to  (ON) to display values in the submission. Set to (OFF) when you do not want the valuesdisplayed.

By default, this setting is set to  (ON).

Add Another Text

Set the label value for the Add New Row button.

Remove Row Text

Set the label value for the Remove Row button.

In this example, configure a Data Grid component to ask your end-user to input personal information about their account assets.

Configure the Data Grid Component

This Data Grid component is used to organize three Text Field components so end-users can create multiple rows of fields based on their needs.

1. In the Module Builder, drag and drop a Data Grid component onto your canvas.
2. In the Property ID field, enter dataGrid.
3. In the Label Text field, enter Accounts.
4. In the Add Another Text field, enter Add Account.

A static image displaying the Data Grid component's Display settings.

5. Click Save Component.

Configure the Text Field components

Configure three Text Field components for your end-user to enter their account name, type, and balance. Apart from their Property IDs, all other settings are the same.

1. Drag and drop three  Text Field components onto your canvas, placing them next to one another inside the datagrid Data Grid component.
2. In the Property ID and Label Text fields, enter the following:
 

Property ID

Label Text

1

accountName

Account Name

2

accountType

Account Type

3

accountBalance

Account Balance

3. Click Save Component for each Text Field component as you complete it.
4. Save your module.

Preview your module in Express View. to see the following functionality:

A static image displaying the completed datagrid in express view.