Smart Tables
Transform flat data into sophisticated tables with sorting, filtering, cell merging, and pivot capabilities — all configured through an intuitive visual wizard.
Why Smart Tables?
Smart Tables solve a common challenge: your data is flat (one row per item), but your documents need structured, professional tables with merged cells, grouped headers, and cross-tabulation. The PTL (Publixx Table Language) engine handles this transformation automatically.
Key Capabilities
- Normal Mode: Classic tables with column groups, cell merging, and sorting
- Pivot Mode: Cross-tabulation (rows × columns → values) for analysis tables
- Visual Wizard: 4-step configuration without coding
- Live Preview: See results instantly as you configure
- Multi-Format Export: Works in PDF, PowerPoint, Word, HTML, and InDesign
Two Table Modes
The 4-Step Wizard
The Smart Table wizard guides you through configuration without writing any code. Each step builds on the previous one, with live preview showing your results.
Step 1: Choose Mode
Select whether you need a Normal table (structured columns) or Pivot table (cross-tabulation). This determines the rest of the wizard flow.
| Use Normal Mode when... | Use Pivot Mode when... |
|---|---|
| You want specific columns with custom headers | You need a matrix of rows × columns |
| Data should be grouped by category | Values are distributed across two dimensions |
| Cell merging for repeated values | Aggregation (sum, average, count) is needed |
Step 2: Define Structure
Normal Mode Structure
- Select Fields: Choose which data fields become columns
- Drag to Reorder: Arrange columns in your preferred sequence
- Create Groups: Drag columns into a group for multi-level headers
- Set Properties: Label, alignment, format, link template per column
Pivot Mode Structure
- Row Field: Values become the left-most column (Y-axis)
- Column Field: Unique values become column headers (X-axis)
- Value Field: The data displayed in cells
- Aggregation: How to combine multiple values (first, sum, avg, etc.)
Step 3: Transformation Rules (Normal Mode)
Sorting
Add one or more sort rules. Multi-level sorting is supported (sort by category, then by price).
Filtering
Include only rows matching specific criteria:
| Operator | Example |
|---|---|
eq (equals) | status = "active" |
neq (not equals) | category ≠ "archived" |
gt / lt | price > 10 |
gte / lte | stock ≥ 100 |
contains | name contains "Pro" |
in | region in ["North", "South"] |
Cell Merging
Merge cells vertically when consecutive rows have the same value. Perfect for category grouping.
Step 4: Preview & Style
See your table rendered live. Adjust styling options:
- Header Colors: Background and text color for column headers
- Row Header Color: For pivot tables, the Y-axis column style
- Alternating Rows: Zebra striping for readability
- Border Style: Color and width of cell borders
- Font Settings: Family, size, and text color
PTL Configuration Format
Behind the wizard, Smart Tables use PTL (Publixx Table Language) — a JSON-based configuration format. You can view, copy, or import PTL configurations directly.
Basic PTL Structure
{
"ptl": "1.0",
"columns": [...],
"rules": {...},
"pivot": {...},
"tableStyle": {...}
}
Column Definition (Normal Mode)
{
"columns": [
{
"id": "sku",
"label": "Article No.",
"field": "sku",
"align": "left",
"format": null,
"merge": false,
"link": "https://shop.com/item?id={sku}"
},
{
"id": "dimensions",
"label": "Dimensions",
"children": [
{ "id": "length", "label": "Length", "field": "length", "align": "right" },
{ "id": "width", "label": "Width", "field": "width", "align": "right" }
]
},
{
"id": "price",
"label": "Price",
"field": "price",
"align": "right",
"format": { "type": "currency", "decimals": 2 }
}
]
}
Column Properties
| Property | Type | Description |
|---|---|---|
id | string | Unique identifier for the column |
label | string | Display name in header |
field | string | Path to data field (e.g., "specs.length") |
align | string | "left", "center", or "right" |
format | object | Number/currency/percent formatting |
merge | boolean | Enable vertical cell merging |
link | string | URL template with {placeholders} |
children | array | Sub-columns for grouped headers |
Pivot Configuration
{
"pivot": {
"rowField": "month",
"colField": "region",
"valueField": "revenue",
"aggregation": "sum",
"rowSort": "asc",
"colSort": "asc",
"rowLabel": "Month",
"emptyValue": "—",
"valueFormat": { "type": "currency", "decimals": 0 }
}
}
Aggregation Functions
| Function | Description |
|---|---|
first | First value encountered |
last | Last value encountered |
sum | Sum of all values |
avg | Average of values |
min | Minimum value |
max | Maximum value |
count | Number of values |
concat | Concatenate all values |
Clickable Cells with Link Templates
Make table cells clickable by adding link templates. Use {placeholders} that get replaced with row data.
Example
{
"id": "product",
"label": "Product",
"field": "name",
"link": "https://myshop.com/products/{sku}?source=catalog"
}
If the row has sku: "A-1234", the cell becomes a link to:
https://myshop.com/products/A-1234?source=catalog
Table Styling Options
Common Use Cases
📦 Product Catalogs (Normal Mode)
Group products by category with merged cells. Include specs tables with grouped dimension columns.
📊 Sales Reports (Pivot Mode)
Transform transaction data (date, region, amount) into a monthly breakdown by region with summed revenue.
🔧 Technical Specifications (Normal Mode)
Screw catalogs, cable specifications, component lists with linked part numbers and merged categories.
📅 Availability Matrix (Pivot Mode)
Show product availability across locations or time periods in a cross-reference grid.
Export Compatibility
Smart Tables render correctly across all Publixx export formats:
| Format | Support | Notes |
|---|---|---|
| ✅ Full | Vector rendering, clickable links | |
| PowerPoint | ✅ Full | Native PPTX tables |
| Word | ✅ Full | Native DOCX tables |
| Excel | ✅ Full | Native XLSX with formulas preserved |
| HTML | ✅ Full | Semantic <table> with CSS styling |
| InDesign | ✅ Full | Native InDesign tables via JSX |
| Images (PNG/JPEG) | ✅ Full | Rendered as part of the page |