Data Table¶
The Data Table component automatically displays data from data sources in tabular format with automatic column generation, grouping capabilities, and conditional styling.
Configuration¶
Configure the data table with these options:
| Option | Description |
|---|---|
| Data source | Connect to your data source to automatically populate the table |
| Generate columns | Automatically create columns based on data source fields |
| Column settings | Manually configure individual columns with headers, formatting, and styling |
| Grouping Settings | Configure up to three levels of data grouping with captions and summaries |
| Number | Default formatting for numeric columns (e.g., currency:USD;2) - can be overridden per column |
| Percent | Default formatting for percentage columns - can be overridden per column |
| Date | Default formatting for date columns - can be overridden per column |
| Empty text | Text to display in cells with no data (e.g., "No data to show") |
| Allow this component to break across multiple pages | Enable page breaking for large datasets |
| Is tree? | Enable tree-like hierarchical data display |
| Automatically regenerate columns | Update columns when data source structure changes |
| Use fixed table layout | All columns have equal width unless specified in column settings |
| Disable cell text wrap | Prevent text wrapping in data cells |
| Disable header text wrap | Prevent text wrapping in header cells |
The Column settings interface provides detailed configuration for each column:
Header Configuration:
| Option | Description |
|---|---|
| Header1/Header2/Header3 | Switch between header levels to configure complex multi-row headers |
| Enabled | Toggle to show/hide the selected header level |
| Type | Header content type (Text or HTML Template for HTML content in headers) |
| Text | Text content for the selected header level |
| Align | Horizontal alignment of header content |
| Vertical Align | Vertical alignment of header content |
| Row Span | Number of rows the header spans |
| Col Span | Number of columns the header spans |
| Custom Style | Conditional styling with Expression, Style, and Class options |
Content Configuration:
| Option | Description |
|---|---|
| Field | Data source field to bind to this column |
| Format type | Data formatting type (Number, Date, Percentage, Expression, Custom) - Expression allows dynamic format resolution, Custom allows manual format entry based on text formats |
| Custom format | Specific format string (e.g., dd;yyyy;MMdd) - see text formats for available options |
| Align | Horizontal alignment of column content |
| Vertical Align | Vertical alignment of column content |
| Row Span | Number of rows the content spans |
| Col Span | Number of columns the content spans |
| Width | Column width specification |
| Merge Cells | Cell merging options |
| Value Renderer | Value rendering options. See the section below |
| Custom Style | Conditional styling with Expression, Style, and Class options |
Value Renderer options provide different ways to display cell content:
| Renderer Type | Description |
|---|---|
| Value Expression | Expression that can return numbers or text (e.g., {$record.itemAmount} + {$record.vatAmount}) - result is automatically formatted. If empty, displays value from Field option |
| Text | Text template expression without automatic formatting - include formatting in the expression (e.g., {$record.itemAmount;currency:USD;2}) |
| HTML | Text template expression rendered as HTML for line breaks and text styling |
| Custom Component | Display reusable custom components with parameter binding |
| Elements | Insert other components like images, barcodes, or charts |
| Renderer Function | Custom JavaScript function that returns HTML for complex rendering scenarios |
In expressions, use $record to access the current record data and $group to access aggregate data from grouping.
Footer and Caption Configuration:
| Option | Description |
|---|---|
| Footer/Caption | Switch between Footer and Caption configuration |
| Aggregate | Aggregation function (Sum, Count, Average, etc.) |
| Aggregate Field | Field to use for aggregation calculations |
| Aggregate Value | Custom aggregation expression |
| Aggregate Alias | Alias name for the aggregation |
| Weight Field | Field for weighted calculations |
| Enabled | Toggle to show/hide footer or caption |
| Text | Display text for footer or caption |
| Col Span | Number of columns the footer/caption spans |
| Format type | Formatting type for aggregated values (Number, Date, Percentage, Expression, Custom) - Expression allows dynamic format resolution, Custom allows manual format entry based on text formats |
| Custom Style | Conditional styling with Expression, Style, and Class options |
The Grouping Settings interface allows configuration of up to three hierarchical grouping levels:
| Grouping Option | Description |
|---|---|
| Level 1/2/3 | Three independent grouping levels that can be configured separately |
| Enabled | Toggle to enable/disable the grouping level |
| Group by | Select multiple fields to group data by |
| Display in Columns | Toggle to keep grouped columns visible - selected columns are hidden by default |
| Show Header | Toggle to display header rows for each group |
| Show Footer | Toggle to display footer rows for each group |
| Show Caption | Toggle to display caption rows for each group |
| Caption tpl | Template for caption text (e.g., {$group.category}) |
| Generate | Button to automatically generate caption templates |
Each grouping level works hierarchically - Level 1 creates the primary groups, Level 2 creates subgroups within Level 1 groups, and Level 3 creates sub-subgroups within Level 2 groups.
Use Cases¶
- Dynamic reports - automatically display database query results with proper column formatting
- Financial statements - show monetary data with currency formatting and column totals in footers
- Grouped data analysis - organize datasets with grouping and aggregate calculations
Tips¶
- Use Generate columns for dynamic data sources where column structure may change
- Configure column aggregation in Footer and Caption section to display totals and summaries
- Apply conditional styling through column Custom Style settings for data-driven formatting
- To show totals for the whole dataset, leave Group by fields empty for Level 1 grouping