Data cards
Display structured records as a filterable grid of cards.
Code name: TableData · Category: Collections
Not registered in the live renderer. Do not add this block to published pages until live support is implemented and verified.
When to use it
Use this block for existing card-shaped records with a title, description and destination. Despite its code name, this renderer produces cards rather than a conventional table.
In the editor
- Provide the records in data.
- Set up matching category filters if needed.
- Check card content and destinations in preview.
Example
This example uses illustrative content. Media placeholders must be replaced with your own assets; data-backed blocks need the normal website context.
<TableData title="Services" data={[{ title: "Planning session", description: "Agree on practical next steps.", iconUrl: "/defaults/image_placeholder.svg", dealDetails: "View details", url: "/services", category: "Services" }]} />Behaviour and limitations
- Availability: TableData is in the editor catalog but is not registered in the current live renderer. Do not add it to a published page until live support is implemented and verified.
- The JSX name is TableData. Use a real data array; missing data is not a useful empty configuration.
- Records are read using title, description, iconUrl, dealDetails, url and category.
- direction is listed in the controls, but the current renderer fixes its grid direction to row.
Property reference
Types below describe the editor controls and known choices, not every value accepted by the renderer. A renderer default is extracted from its parameter; an editor-only default does not prove the runtime default. “Not declared here” does not mean required. Preserve omitted values unless the requested edit needs them.
| Property | Editor value type | Default evidence | Guidance |
|---|---|---|---|
title | string | Not declared here | Title. See the usage notes for this block. |
data | array | Not declared here | Data. See the usage notes for this block. |
dataFilter | array | Not declared here | Data Filter. See the usage notes for this block. |
direction | "row", "column" | "row" (editor only) | direction. See the usage notes for this block. |
alignContent | "stretch", "center", "flex-start", "flex-end", "space-between", "space-around" | "stretch" (editor only) | Align content. See the usage notes for this block. |
alignItems | "flex-start", "center", "flex-end", "stretch", "baseline" | "stretch" (editor only) | Align items. See the usage notes for this block. |
itemSpacing | number | 2 (renderer) | Item spacing. See the usage notes for this block. |
wrap | "nowrap", "wrap", "wrap-reverse" | "row" (editor only) | Wrap. See the usage notes for this block. |
padding | See guidance | 3 (renderer) | padding. See the usage notes for this block. |
backgroundColor | string | Not declared here | Background colour. Theme-derived appearance can still depend on the surrounding section. |
spacing | object | Not declared here | An object of spacing settings. Preserve existing responsive values when changing a single setting. |
themeVariant | string | "white" (renderer) | Theme variant. See the usage notes for this block. |
