Data Grid

The Data Grid component is used to represent data in a tabular form, also known as Grid View. It provides a structured layout where records are organized into rows and columns, making it easy to analyze numerical data, text, and indicators in a compact format.

Best Situations to Use Data Grid

Use a Data Grid when you need to:

• Display raw or aggregated numerical data in table form.

• Provide a clear, row-by-row view of records for analysis.

• Enable alert visualization within tabular structures.

• Offer users export and print options across multiple formats.

• Support drill-down or row selection for deeper interactivity.

Properties of the Data Grid

General

• Component Name: Assigns a unique identifier for reference.

• Left / Top: Defines horizontal and vertical placement on the canvas.

• Height / Width: Adjusts size for optimal display.

• Initial Visibility: Ensures the grid is visible on load.

• Max Button: Allows maximization for focused analysis.

• Fit Columns: Auto-fit column widths to content.

• Column Rearrange: Enable drag-and-drop reordering of columns.

• Scroll View: Control scroll bar visibility (default = disabled).

💡 Tip: Use Column Rearrange when working with wide datasets to highlight critical fields.

Background

• Gradient / Gradient Rotation / Opacity: Customize background style.

• Border / Border Color / Border Radius: Add visual framing and rounded corners.

• Shadow, Color, Transparency: Apply 3D-like depth effects.

Title

• Show Title, Title Box, Box Color: Manage title visibility and styling.

• Font (Color, Size, Style, Weight, Family): Adjust typography for emphasis.

• Align / Text Decoration: Control alignment and formatting.

• Show Dataset Description: Display dataset metadata in the title bar.

Subtitle

• Show Sub Title: Enable or disable subtitle text.

• Description: Add supporting text.

• Font (Color, Size, Style, Weight, Family): Style subtitle text.

• Align / Text Decoration: Configure alignment and appearance.

Header Style

• Header Text Color / Background Color: Customize header look.

• Font (Size, Style, Weight, Family): Format header text.

• Use Field Color: Apply color-coding by field.

• Text Decoration: Add underline or emphasis.

Row Style

• Font (Color, Size, Style, Weight, Family): Customize row text.

• Text Decoration / Text Wrap: Control wrapping and emphasis.

• Row Height: Adjust to fit content.

Styles

• Roll Over Color: Highlight rows on hover.

• Selection Color: Indicate selected rows.

• Horizontal & Vertical Grid Lines: Toggle and customize grid lines.

• Grid Colors: Harmonize horizontal and vertical line colors.

Export Options

• Context Menu: Enable right-click export menu.

• Export Formats: Excel (.xlsx), CSV (.csv), JPEG (.jpg), PNG (.png), PPT (.pptx), PDF (.pdf).

• Show Print: Print directly.

• Export File Name / Heading / Sub Heading: Customize output.

• Global Export Type: Choose default (Screenshot or Tabular).

Dataset Properties (from Dataset Pallet)

• Unit: Define units (e.g., %, count, etc.).

• Precision: Set numeric precision.

• Currency: Apply currency formatting.

• Position: Configure prefix or suffix for units/currency.

• Row Aggregation: Apply aggregation (e.g., sum, avg).

• Show Tooltip: Enable tooltips on hover.

• Tooltip Field: Select field for tooltip display.

• Column Type: Choose type (Numeric, Date, etc.).

Supported Date-Time Formats

The Data Grid supports multiple formats for date-time fields:

• YYYY-MM-DD HH:MM:SS

• MM/DD/YYYY HH:MM:SS

• DD-MM-YYYY HH:MM:SS

• ISO 8601 (e.g., 2023-08-23T14:30:00Z)

• Time formats such as 12-hour and 24-hour clocks (HH:MM)

💡 Note: For date responsiveness in Indicator Tab, ensure the Column Type is set to Numeric.

Advanced Usage

• Multi-selection Checkboxes: Enable Show Checkbox in General and add allowmultipleselection = true in the dashboard script to allow row multi-selection.

• Alerts in Grids: Refer to the Alerts in Grids configuration page for inserting conditional alerts inside the Data Grid.