Chart data table
A validated semantic table fallback for the series shown by a chart.
Try it
Toggle transcript
An on-demand native disclosure of chart data.
Use it
Working invocation
This code creates the configuration shown above. Copy the template and the required Python context together.
{% load brickwork_components %}
{% bw_chart_data_table caption=caption columns=columns rows=rows data_table_mode=data_table_mode toggle_label=toggle_label as chart_table %}
{{ chart_table }}context = {'columns': ['Month', 'Sales'], 'rows': [['January', '120'], ['February', '145']], 'caption': 'Monthly sales', 'data_table_mode': 'toggle', 'toggle_label': 'Show data table'}Guide
Add it to your project
- Load `brickwork_components`.
- Call the tag with caption, headers, and row matrix, assigning the output with `as`.
- Pass that result to a chart card sibling slot.
Options
Public API
| Option | Type | Default | Required | Description |
|---|---|---|---|---|
| caption | str | Empty string | Yes | Accessible table caption. Constraint: Must contain non-whitespace text. |
| columns | list[str] | [] | Yes | Column labels; first is the row-header axis. Constraint: Each column record needs the documented label/key contract and must match the row cell structure. |
| rows | list[list] | [] | Yes | Rows whose first cell is a row header. Constraint: Use records in the documented column order; preserve a cell for every declared column. |
| data_table_mode | str | hidden | No | Visual presentation. Allowed: hidden, toggle, visible. Constraint: Allowed values: `hidden`, `toggle`, `visible`. |
| toggle_label | str | Empty string | No | Disclosure summary in toggle mode. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
Behaviour
Accessibility and responsive behaviour
- Accessibility
- It uses caption and scoped headers. Hidden mode stays in the accessibility tree; toggle mode uses native details.
- Responsive
- The table scrolls horizontally rather than reflowing its matrix.
- Without JavaScript
- All modes render without JavaScript; toggle uses browser disclosure behaviour.
Need help?
Troubleshooting
Contract check: {% bw_chart_data_table %} tag, never included directly: the tag validates
Call `{% bw_chart_data_table %}` rather than including the private render target; its tag validates the display mode.