Loading playground
Overview
TableProductSpecifications renders a product's specifications component as a spec sheet built on BasicTable. Each row carries a label and a typed value — the value arrives as string | number | boolean | Measurement | Money, not a pre-formatted string, so the table formats it per locale rather than freezing a format at the data layer.
Formatting is delegated to the TableProductSpecificationsValue subcomponent, which resolves each kind against the active locale:
- string → rendered as-is
- number →
Intl.NumberFormatin the active locale - boolean → localized Yes / No (
tableProductSpecifications.yes/.no) Measurement({ value, unit }) →$measurementMoney({ amount, currency }) →$money
Rows optionally carry a sectionName. When present, the table groups rows into sections (first-seen order) and renders one BasicTable per section under a section heading; when absent, all rows render in a single ungrouped table. The variant prop (outlined default, or plain) is forwarded to every BasicTable.
Fill it from a product's specifications component (via the Studio block) or pass rows directly.
Key Business & UX Benefits
- Typed values mean a German market reformats
1,299.00 €and180 gfor its own locale from the same data — the connector never has to pre-format, and no market is stuck with another's number or currency formatting. - Section grouping mirrors how manufacturers present spec sheets (Dimensions, Materials, Care), so long specification lists stay scannable instead of collapsing into one flat block.
- Absent sections degrade gracefully to a single flat table, so connectors that have no section data still render cleanly.
Usage
Feature List
- Formats typed values (`string | number | boolean | Measurement | Money`) per locale via the `TableProductSpecificationsValue` subcomponent
- Booleans render as localized Yes / No; numbers via `Intl.NumberFormat`; `Measurement` via `$measurement`; `Money` via `$money`
- Groups rows into sections by `sectionName` (first-seen order), one `BasicTable` per section; absent ⇒ a single ungrouped table
- `outlined` / `plain` variant forwarded to every underlying `BasicTable`
- Consumes the product `specifications` entity component directly, or accepts manually authored rows
API Reference
TableProductSpecifications
| Prop | Default | Type |
|---|---|---|
itemsrequired | ProductSpecificationItem[] { label, value, sectionName }Specification rows rendered as a label/value table, optionally grouped into sections. | |
variant | outlined | "outlined" | "plain"Visual treatment of the underlying table — |
TableProductSpecificationsValue
Per-value formatter. Takes a single value (string | number | boolean | Measurement | Money) and renders its locale-formatted string. Extracted so the value-formatting logic stays in one place and can be reused outside the table.
| Prop | Default | Type |
|---|---|---|
valuerequired | ProductSpecificationValueThe value to format and render. |
Studio block
BlockTableProductSpecifications (in @laioutr-app/ui) wraps this component as a standalone Studio block. It can be filled either from a query (a Product's specifications) or with manually entered rows, switchable via a Data Source toggle, and exposes the outlined / plain style toggle. Query mode forwards the product's typed specification values unchanged; manual mode adds an optional Section field per row for grouped output.
Related
BasicTable: the underlying two-column primitive.TableOpeningHours: the sibling table built on the same primitive.- Product entity › Specifications: the
specificationscomponent this table renders. Moneytype andMeasurementtype: the structured value types the formatter handles.
Changelog
Product specification sheet built on BasicTable. Rows carry a label and a typed value (string | number | boolean | Measurement | Money) formatted per locale by the TableProductSpecificationsValue subcomponent, with optional per-row sectionName grouping. Consumes a Product's specifications component or manually authored rows.