Component library

Showing 3 components in the shared kit with role data.

Dashboard

<MaturityHeatmap>

sharedChartContentDataDashboard

Stage-based maturity table (rows = dimensions, columns = levels). One highlighted cell per row.

When to use: Use as an alternative to MaturityRadar when the maturity framework is stage-based (e.g. CMMI-style: ad hoc / repeatable / defined / managed / optimised).

Preview

Current vs 6-month target

Dimension	Ad hoc	Repeatable	Defined	Managed	Optimised
Data quality			●	○
Tooling		●		○

Current Target

Prop	Type	Notes
rows	string[]	Required. Row labels (dimensions).Example: `["Data quality", "Tooling", "Process clarity"]`
columns	string[]	Required. Column labels (maturity levels).Example: `["Ad hoc", "Repeatable", "Defined", "Managed", "Optimised"]`
current	boolean[][]	Required. 2D array [row][col]. Each row should have at most one true cell.
target	boolean[][]	Optional. Optional target cells, drawn as a ring.
title	string	Optional. Chart title.

Examples

<MaturityHeatmap
    rows={["Data quality", "Tooling"]}
    columns={["Ad hoc", "Repeatable", "Defined", "Managed", "Optimised"]}
    current={[[false, false, true, false, false], [false, true, false, false, false]]}
    target={[[false, false, false, true, false], [false, false, false, true, false]]}
    title="Current vs 6-month target"
/>

<DataTable>

sharedDataListDashboard

Card-style data grid with optional status tabs, sortable columns, status badges, row checkboxes (illustrative), filter affordance, and client-side pagination.

When to use: Use for tabular report appendices (delivery lists, backlog queues, milestone trackers) where readers benefit from filtering and paging without leaving the report. Keep row counts modest for print; prefer `pageSize` 5–10. In SEO reports, use it for page-level appendices (top pages by clicks, redirect maps, content inventory); for keyword rankings prefer the purpose-built <KeywordRankingTable>.

Preview

Delivery activities

Track your recent shipping activities

Select					Route		Status
	#324112	Electronics	Acme	10 Apr 2028 2:15 pm	Berlin–Milan	$1,250.00	Delivered

Showing 1 to 1 of 1

Prop	Type	Notes
title	string	Required. Table card title.Example: `Delivery activities`
description	string	Optional. Subtitle under the title.Example: `Track your recent shipping activities`
columns	{ key: string; label: string; sortable?: boolean }[]	Required. Column definitions; `key` matches keys on each row object.
rows	Record<string, string>[]	Required. Row data; values are strings so they serialise cleanly inside MDX.
tabs	{ id: string; label: string }[]	Optional. Optional filter tabs. Include `{ id: "all", label: "All" }` first for an unfiltered view. Other `id` values slug-match `tabFilterKey` on each row (e.g. status "In Transit" matches tab `in-transit`).
tabFilterKey	string	Optional. Default: `status`. Row field used when filtering by tab.
badgeColumnKey	string	Optional. Default: `status`. Column whose cells render as coloured status pills.
showCheckboxes	boolean	Optional. Default: `true`. Show a leading illustrative checkbox column.
showFilterButton	boolean	Optional. Default: `true`. Show a secondary Filter button (illustrative; no sheet wired).
filterButtonLabel	string	Optional. Default: `"Filter"`. Label for the filter button.
pageSize	number	Optional. Default: `5`. Rows per page; set `0` to disable pagination footer.

Examples

<DataTable
    title="Delivery activities"
    description="Track your recent shipping activities"
    tabs={[
        { id: "all", label: "All" },
        { id: "delivered", label: "Delivered" },
        { id: "in-transit", label: "In transit" },
        { id: "pending", label: "Pending" },
        { id: "processing", label: "Processing" }
    ]}
    columns={[
        { key: "orderId", label: "Order ID", sortable: true },
        { key: "category", label: "Category", sortable: true },
        { key: "company", label: "Company", sortable: true },
        { key: "arrival", label: "Arrival", sortable: true },
        { key: "route", label: "Route", sortable: false },
        { key: "price", label: "Price", sortable: true },
        { key: "status", label: "Status", sortable: false }
    ]}
    rows={[{ orderId: "#324112", category: "Electronics", company: "Acme", arrival: "10 Apr 2028 2:15 pm", route: "Berlin–Milan", price: "$1,250.00", status: "Delivered" }]}
/>

<SimpleDataTable>

sharedDataDashboard

Read-only text grid: a header row from string labels and body rows from string arrays. Bordered card, optional caption, optional zebra striping, optional bold emphasis on chosen body rows (totals, subtotals). No sorting, filters, or pagination.

When to use: Use when you only need to present a small matrix (assumption register, RACI, scorecard, inventory snapshot) without the interactive chrome of `<DataTable>`. Prefer markdown tables for narrative prose; use this when MDX expressions make row data easier to maintain.

Often with: DataTable

Preview

Session attendance (illustrative)

Name	Team	Day 1	Day 2
Alex Example	Operations	Yes	Yes
Jordan Example	IT	Yes	No

Hours by workstream (illustrative)

Workstream	Manual hrs / week
Invoice intake	42
Order acknowledgements	28
Total	70

Prop	Type	Notes
columns	string[]	Required. Header labels in column order.Example: `["Role", "Name", "Availability"]`
rows	string[][]	Required. Each entry is one row: an array of cell strings aligned to `columns`.Example: `[["Sponsor", "Alex Example", "Weekly"], ["Owner", "Jordan Example", "Daily"]]`
caption	string	Optional. Optional title or context line above the table.
striped	boolean	Optional. Default: `true`. Whether odd body rows use a subtle banded background.
boldRowIndices	number[]	Optional. 0-based indices of body rows to render with semibold text (e.g. `[0, 2]`). Indices outside the row range are ignored.Example: `[1]`
boldLastRow	boolean	Optional. Default: `false`. When true, semibold the last body row (typical for a totals or summary line). Combines with `boldRowIndices`.

Examples

<SimpleDataTable
    caption="Session attendance (illustrative)"
    columns={["Name", "Team", "Day 1", "Day 2"]}
    rows={[
        ["Alex Example", "Operations", "Yes", "Yes"],
        ["Jordan Example", "IT", "Yes", "No"]
    ]}
/>

<SimpleDataTable
    caption="Hours by workstream (illustrative)"
    columns={["Workstream", "Manual hrs / week"]}
    rows={[
        ["Invoice intake", "42"],
        ["Order acknowledgements", "28"],
        ["Total", "70"]
    ]}
    boldLastRow
/>