Table Block Demo

!Note: this piece of documentation is auto-generated from blocks/TableBlock/README.md.

Display tabular data in a responsive layout with an optional title.

Features

Table data format is based on output of the DatoCMS Table Editor.
Table includes a (fig)caption when a title is provided for improved accessibility.
Table can have a header row and a header column. Headers have scope=col|row for improved accessibilty.
When the header column is enabled it's behaving as a sticky first column.
Support for both a sticky header and sticky first column requires some extra work and JS. To avoid complexity in Head Start this is kept out of scope.
Basis styling not required for the responsive behaviour is also provided and can be safely replaced.

Relevant links

UXDesign: Position stuck, solve combination of sticky headers and horizontal scrolling using JavaScript.
CSS-Tricks: A table with both a sticky header and a sticky first column.
CSS-Tricks: Responsive data tables, inspiration to improve table layout on smaller screens or in narrow container (when combined with container queries).

Table in textblock

Simple table demo in text block

Key a	Value a	109.59
Key b	Value b	110.64
Key c	Value c	111.07

Table 1

Simple table demo

Key a	value a
Key b	value b
Key c	value c

Table 2

An absolute unit of a table :)

Perioden	Natural gas Transport rate (Euro/year)	Fixed delivery rate fixed and variable... (Euro/year)	Variable delivery rate contract price (Euro/m3)	Energy tax (Euro/m³)	Electricity Transport rate (Euro/year)	Variable supply rate contract price (Euro/kWh)	Fixed dynamic delivery rate (Euro/year)	Variabel leveringstarief dynamisch (Euro/kWh)	Dynamic variable supply rate (Euro/kWh)	Energy tax (Euro/kWh)	Energy tax reduction (Euro/year)
March 2025	247,55	87,80	0,6494	0,69957	467,17	106,60	0,1560	81,01	0,1472	0,12286	-635,19
April 2025	247,55	89,45	0,6596	0,69957	467,17	107,76	0,1520	81,01	0,1267	0,12286	-635,19
May 2025	247,55	90,34	0,6595	0,69957	467,17	108,59	0,1481	79,26	0,1139	0,12286	-635,19
June 2025	247,55	90,48	0,6563	0,69957	467,17	108,59	0,1470	79,26	0,1181	0,12286	-635,19
July 2025	247,55	90,86	0,6447	0,69957	467,17	108,19	0,1479	79,26	0,1422	0,12286	-635,19
August 2025	247,55	91,01	0,6286	0,69957	467,17	108,42	0,1480	79,26	0,1265	0,12286	-635,19
September 2025	247,55	91,16	0,6269	0,69957	467,17	108,68	0,1485	79,26	0,1301	0,12286	-635,19
October 2025	247,55	91,36	0,6126	0,69957	467,17	109,03	0,1514	79,26	0,1358	0,12286	-635,19
November 2025	247,55	91,50	0,6058	0,69957	467,17	109,35	0,1518	79,19	0,1335	0,12286	-635,19
December 2025	247,55	91,57	0,6010	0,69957	467,17	109,59	0,1520	79,19	0,1262	0,12286	-635,19
January 2026	268,37	92,32	0,5868	0,72680	476,87	110,64	0,1497	88,25	0,1499	0,11085	-628,96
February 2026*	268,37	92,36	0,5767	0,72680	476,87	111,07	0,1474	88,25	0,1316	0,11085	-628,96
March 2025	204,59	72,57	0,5367	0,57816	386,09	88,10	0,1289	66,95	0,1216	0,10154	-524,95
April 2025	204,59	73,92	0,5451	0,57816	386,09	89,05	0,1256	66,95	0,1047	0,10154	-524,95
May 2025	204,59	74,66	0,5450	0,57816	386,09	89,74	0,1224	65,50	0,0941	0,10154	-524,95
June 2025	204,59	74,78	0,5424	0,57816	386,09	89,75	0,1214	65,50	0,0976	0,10154	-524,95
July 2025	204,59	75,09	0,5328	0,57816	386,09	89,41	0,1222	65,50	0,1176	0,10154	-524,95
August 2025	204,59	75,22	0,5195	0,57816	386,09	89,60	0,1223	65,50	0,1045	0,10154	-524,95
September 2025	204,59	75,34	0,5181	0,57816	386,09	89,82	0,1227	65,50	0,1076	0,10154	-524,95
October 2025	204,59	75,51	0,5062	0,57816	386,09	90,10	0,1251	65,50	0,1122	0,10154	-524,95

Table 3

With header row

Periods	Dynamic variable supply rate (Euro/kWh)
March 2025	0.1472
April 2025	0.1267
May 2025	0.1139
June 2025	0.1181
July 2025	0.1422
August 2025	0.1265
September 2025	0.1301
October 2025	0.1358
November 2025	0.1335
December 2025	0.1262
January 2026	0.1499
February 2026*	0.1316
March 2025	0.1216

Table 4

With header column

November	0.5062	91.50	268.37	Value 1
December	0.5007	91.57	268.37	Value 2
January	0.4967	92.32	204.59	Value 3

Table 5

Table with header row and header column

Column A	Column B	Column C
November 2025	0.5195	89.82
December 2025	0.5181	90.10
January 2026	0.5062	90.37