Data Tables Component
Embed interactive data grids with sorting, filtering, and pagination using the rb-tabulator web component.
Table of Contents
Overview
The <rb-tabulator> component renders an interactive data table. It provides sorting, filtering, pagination, and data export features.
FlowKraft Apps: The FlowKraft Frontend App has this component pre-configured. Just paste your embed code from the Usage tab—no script setup required. See FlowKraft Frontend App for details.
Basic Usage
<rb-tabulator
report-code="monthly-sales"
api-base-url="http://localhost:9090/api/jobman/reporting">
</rb-tabulator>Attributes
| Attribute | Required | Description |
|---|---|---|
report-code | Yes | Report folder name configured in ReportBurster |
api-base-url | Yes | Base URL for API calls |
DSL Configuration
Table configuration is defined in ReportBurster using a Groovy DSL. The component supports layout options and column definitions.
Layout Options
tabulator {
layoutOptions {
layout 'fitColumns' // fitData, fitColumns, fitDataFill, fitDataStretch, fitDataTable
height 400 // Fixed height in pixels
autoColumns true // Auto-generate columns from data
}
}Column Definitions
tabulator {
columns {
column(field: 'region', title: 'Region')
column(field: 'sales', title: 'Sales', formatter: 'money', hozAlign: 'right')
column(field: 'date', title: 'Date', sorter: 'date')
column(field: 'active', title: 'Active', formatter: 'tickCross')
}
}Column Properties Reference
| Property | Description | Example Values |
|---|---|---|
field | Data field name | 'sales', 'customerName' |
title | Column header | 'Total Sales' |
hozAlign | Horizontal alignment | 'left', 'center', 'right' |
width | Column width | 200, '20%' |
formatter | Display format | 'money', 'datetime', 'tickCross', 'html' |
sorter | Sort type | 'string', 'number', 'date', 'boolean' |
headerFilter | Enable filtering | 'input', 'number', 'list' |
visible | Show/hide column | true, false |
frozen | Freeze column | true, false |
Formatters
Common formatters:
'plaintext'- Default text display'money'- Currency format'datetime'- Date/time format'tickCross'- Checkmark for boolean values'html'- Render HTML content'link'- Clickable link
Examples
Sales Report Table
tabulator {
columns {
column(field: 'month', title: 'Month')
column(field: 'region', title: 'Region', headerFilter: 'list')
column(field: 'revenue', title: 'Revenue', formatter: 'money', hozAlign: 'right')
column(field: 'orders', title: 'Orders', hozAlign: 'center')
}
layoutOptions {
layout 'fitColumns'
}
}Customer List with Filtering
tabulator {
columns {
column(field: 'name', title: 'Customer Name', headerFilter: 'input')
column(field: 'email', title: 'Email')
column(field: 'status', title: 'Status', headerFilter: 'list')
column(field: 'balance', title: 'Balance', formatter: 'money', hozAlign: 'right')
}
}