Data Grid

A Data Grid allows you to display your data in a table, complete with headers, sorting, column alignment and more.

Properties

Data

SDD Table

The source of the data displayed in Data Grid. Data should be provided in SDD format.

ID Key

Name of column, that is being used to distinct rows during filtration.

Filtered Row IDs

Place for linking store. Data about filtered rows is stored here as an array of values from column specified in 'ID Column'.

Display Options

Enable Border

Shows a border around the Data Grid.

Border Color

Determines color of the Data Grid border.

Header Bottom Border Color

Determines the color of the border between the header and first row of the Data Grid.

Grid Lines

Determines how grid lines are displayed. Available options are:

• Rows and columns with rounded corners - grid lines are shown between rows and columns, and cells have rounded corners.
• Rows and columns - grid lines are shown between rows and columns.
• Only rows - grid lines are shown between rows.
• None - grid lines are not shown.

Grid Line Color

The color of grid lines in the Data Grid.

Hide Footer

Whether the footer of the Data Grid is hidden.

Pagination Sizes

An array specifying the number of rows that will be shown when pagination is enabled.

Hide Scrollbars

Hides the scrollbars of the Data Grid.

Enable Infinite Scroll

Turns on infinite scrolling (disables pagination).

Padding Top

Padding on the top of the Data Grid.

Padding Bottom

Padding on the bottom of the Data Grid.

Padding Left

Padding on the left of the Data Grid.

Padding Right

Padding on the right of the Data Grid.

Cell Padding Top

Padding on the top of each cell.

Cell Padding Bottom

Padding on the bottom of each cell.

Cell Padding Left

Padding on the left of each cell.

Cell Padding Right

Padding on the right of each cell.

Locale

Which locale should be used to display the dates. The default value is the locale used by the browser. However, it is possible to override it by defining a different one (e.g. "en-US" for U.S. English, "de" for German, "fr" for French or "fr-CA" for Canadian French). The locale is case-sensitive which means that "en-Au" is not valid but "en-AU" is.

Show UTC dates

When enabling this switch the Dates are shown in UTC time not local time (as per the default behavior).

Show timezone

When enabled, the timezone (e.g. "UTC" or "GMT+2") that is used is added to the date string in the table.

Columns

Order Mode

How the order of the columns will be specified. Options are:

• Use order in 'Config' - uses the order of appearance of the columns in the Config property.
• Specify explicit order - the order will be explicitly specified by the Order property.

Order

An array specifying the order of the columns in the Data Grid.

Config

Key

The key that identifies the column in the data. Use * to match all other columns.

Header Label

The text to display in the column header.

Header Tooltip

The text to display in the column header tooltip.

Header Alignment

Alignment of text in the header. Options are:

• Left
• Center
• Right

Header Text Color

Color of text in the column header.

Header Background Color

Color of the background of the column header.

Header Separator Color

Color of the separator between header columns.

Hide

Whether to hide the column.

Hideable

Whether the column can be hidden.

Alignment

How text is aligned in the column. Options are:

• Left
• Center
• Right

Pin to Left

Pins the column to a fixed position at the left of the Data Grid.

Width Type

How the width of the column is set. Options are:

• Fixed - the column is set to a fixed with (in pixels).
• Dynamic - the column is set to a dynamic width determined by the width of other columns in the row and the total width of the Data Grid.

Width (px)

The width of the column (in pixels).

Width (dynamic)

The width of the column it terms of how much it will grow relative to the rest of the columns in the Data Grid. For example, if there are 5 columns and each of them has 'Width (dynamic)' set to '1', it means that each column has a width equal to 1/5 of the full width of a row.

Datatype

The type of data the column represents.

Value Prefix

A prefix added to each value in the column. Does not apply to Boolean datatypes.

Value Suffix

A suffix added to each value in the column. Does not apply to Boolean datatypes.

Value Units

The units of the values in the column. Applies to Numeric and Percentage datatypes.

Capitalize Units

Whether the value units are capitalized. Applies to Numeric and Percentage datatypes.

Max Decimal Points

The maximum number of decimal points to display in each cell when the column uses a Number or Percentage datatype.

Enums

An array of strings to use when the 'Enum' datatype is selected. Alternatively, an array of the following type can be used:

[
    { id: 'data-id', label: 'human readable label' }
]

When using icon display for enums, color and a directional arrow (up = direction: 'positive', down = direction: 'negative') adjacent the selected icon can be specified:

[
      { id: 'greenUpVal', label: 'greenUp', color: '#00FF00', direction: 'positive' }, 
      { id: 'greenDownVal', label: 'greenDown', color: '#00FF00', direction: 'negative' }, 
      { id: 'yellowUpVal', label: 'yellowUp', color: '#FFFF00', direction: 'positive' },
      { id: 'yellowDownVal', label: 'yellowDown', color: '#FFFF00', direction: 'negative' },
      { id: 'yellowFlatVal', label: 'yellowFlat', color: '#FFFF00' },
      { id: 'redUpVal', label: 'redUp', color: '#FF0000', direction: 'positive' },
      { id: 'redDownVal', label: 'redDown', color: '#FF0000', direction: 'negative' }
]

Display Enum As

How to represent Enum values in the table. Options are:

• Text - display the value with label text
• Icon - display the value with selected enum display icon

Enum Display Icon

Which icon to use for enum display. Options are:

• Circle (default)
• Star
• Check
• Flag

Display Boolean As

How to represent boolean values in the table. Options are:

• Checkbox - display the boolean as a checkbox.
• Switch - display the boolean as a switch.

Is Editable

Whether the cells in the column can be edited.

Is Clearable

If true, the column cells can be cleared with the Backspace/Delete button.

Text Color Mode

How the color of the column text is specified. Options are:

• Don't change - the column will use the default text color from the theme.
• Use fixed color - the column text will be set to a fixed color.
• Lookup from key - the text color of each cell will be retrieved from the data using the specified key.

Text Color Key

The key to use to look up the text color in the data.

Text Color

The fixed color the set the column text to.

Background Color Mode

How the background color of the column text is specified. Options are:

• Don't change - the column will use the default background color from the theme.
• Use fixed color - the column background will be set to a fixed color.
• Lookup from key - the background color of each cell will be retrieved from the data using the specified key.

Background Color Key

The key to use to look up the background color in the data.

Background Color

The fixed color the set the column background to.

Config Data Format

To specify the column config by linking to a data store, use an array of elements with the following format:

[
    {
        "key": "ColumnInTheData", // Key
        "headerLabel": "My Header", // Header Label
        "headerTooltip": "The tooltip", // Header Tooltip
        "headerAlignment": "left | right | center", // Header Alignment
        "headerFontColor": "#F00", // Header Text Color
        "headerBackgroundColor": "#0F0", // Header Background Color
        "headerSeparatorColor": "#AAA", // Header Separator Color
        "hide": false, // Hide
        "cellAlignment": "left | right | center", // Alignment
        "pinned": true, // Pin to Left
        "widthMethod": "fixed | dynamic", // Width Type
        "width": 200, // Width (px)
        "flex": 1, // Width (dynamic)
        "cellType": "Auto | String | Number | Percentage | Date | Date Time | Boolean | Enum", // Datatype
        "contentPrefix": "$", // Value Prefix
        "contentSuffix": "!", // Value Suffix
        "maxDecimalPoints": 2, // Max Decimal Points
        "valueUnits": "auto | 1 | k | m | b", // Value Units
        "valueCapitalized": true, // Capitalize Units
        "enums": ["option-1", "option-2"], // Enums
        "boolDisplayOption": "checkbox | switch", // Display Boolean As
        "editable": true, // Is Editable
        "optional": true, // Is Clearable
        "cellFontMode": "none | fixed | by-column", // Text Color Mode
        "allCellsFontColor": "#00F", // Text Color
        "cellFontColumnKey": "ColumnInTheData", // Text Color Key
        "cellColorMode": "none | fixed | by-column", // Background Color Mode
        "allCellsColor": "#EEE", // Background Color
        "cellColorColumnKey": "ColumnInTheData" // Background Color Key
    }
]

Rows

Selection Mode

How rows of the Data Grid are selected. Options are:

• None - rows cannot be selected.
• Single row - only one row can be selected at a time.
• Multiple rows - multiple rows can be selected at the same time.

Selection Level

Which rows of the Data Grid can be selected. Options are:

• Parent - only parent rows can be selected.
• Child - child rows can also be selected.

Selected Row ID(s)

• Used to store the currently selected rows.

Enable Collapsible Rows

Whether rows can be collapsed.

Group By Key

The key to use when collapsing rows.

SDD Table

As SDD table that specifies how to collapse rows.

Properties

Enable export as CSV

Enables the "Export as CSV" button in the component's footer

Exported CSV filename

Optional custom name of the file that the "Export as CSV" button generates