Tables
Clean data and comparison tables, plus native operational table designs.
Preview
4 of 4 examples · Each preview has its own view and URL. One interactive preview at a time.
Activate Perspective to interact with the native views and demo data. Only visible previews connect; each example can also open independently.
Installation
- Download this component’s ZIP. In your development project, choose Designer → File → Import and select it. Preserve the view and style-class paths and review replacement conflicts.
- Append stylesheet-snippet.css to Perspective Styles → stylesheet.css. Enable Advanced Stylesheet if needed and preserve your existing CSS.
- Add an Embedded View, set its path to
Data/TablePattern, and configure its parameters.
Perspective 8.3 · 11 resource files. ZIP structure and source consistency are checked. Manual Designer import acceptance is pending.
Usage
Use the component inside an Embedded View. Replace the sample values with your own data; output and inout parameters expose state back to the host.
{
"path": "Data/TablePattern",
"params": {
"caption": "Live tag browse · Line A",
"showZebra": true,
"col0Header": "Tag",
"col1Header": "Value",
"col2Header": "Quality",
"col3Header": "Time",
"row0col0": "TT-101",
"row0col1": "72.4 °C",
"row0col2": "Good",
"row0col3": "14:32:01",
"row1col0": "PT-204",
"row1col1": "1.82 bar",
"row1col2": "Good",
"row1col3": "14:32:01",
"row2col0": "FT-310",
"row2col1": "42.5 gpm",
"row2col2": "Uncertain",
"row2col3": "14:31:58",
"row3col0": "LT-118",
"row3col1": "68.2 %",
"row3col2": "Good",
"row3col3": "14:32:00",
"row4col0": "XS-401",
"row4col1": "RUN",
"row4col2": "Bad",
"row4col3": "14:31:55"
},
"useDefaultViewWidth": false,
"useDefaultViewHeight": false
}Parameters
Taken directly from the native view. Types describe the saved defaults; they are not a complete validation schema.
| Parameter | Type | Direction | Default |
|---|---|---|---|
| caption | string | input | "Live tag browse · Line A" |
| showZebra | boolean | input | true |
| col0Header | string | input | "Tag" |
| col1Header | string | input | "Value" |
| col2Header | string | input | "Quality" |
| col3Header | string | input | "Time" |
| row0col0 | string | input | "TT-101" |
| row0col1 | string | input | "72.4 °C" |
| row0col2 | string | input | "Good" |
| row0col3 | string | input | "14:32:01" |
| row1col0 | string | input | "PT-204" |
| row1col1 | string | input | "1.82 bar" |
| row1col2 | string | input | "Good" |
| row1col3 | string | input | "14:32:01" |
| row2col0 | string | input | "FT-310" |
| row2col1 | string | input | "42.5 gpm" |
| row2col2 | string | input | "Uncertain" |
| row2col3 | string | input | "14:31:58" |
| row3col0 | string | input | "LT-118" |
| row3col1 | string | input | "68.2 %" |
| row3col2 | string | input | "Good" |
| row3col3 | string | input | "14:32:00" |
| row4col0 | string | input | "XS-401" |
| row4col1 | string | input | "RUN" |
| row4col2 | string | input | "Bad" |
| row4col3 | string | input | "14:31:55" |
For agents
Copy this page for the contract, installation steps and complete source. With the Rungsmith MCP, call get_catalog_component with id table-pattern.