--- title: "Table Block Demo" description: "Base setup on top of headless services to help you get started quickly" language: "English" url: "https://head-start.pages.dev/en/demos/tables-demo/" --- Copy page * [Open in Claude ](https://claude.ai/new?q=Read+from+this+URL%3A+https%3A%2F%2Fhead-start.pages.dev%2Fen%2Fdemos%2Ftables-demo%2F+and+explain+it+to+me.) * [Open in ChatGPT ](https://chatgpt.com/?hints=search\&q=Read+from+this+URL%3A+https%3A%2F%2Fhead-start.pages.dev%2Fen%2Fdemos%2Ftables-demo%2F+and+explain+it+to+me.) # Table Block Demo !Note: this piece of documentation is auto-generated from [blocks/TableBlock/README.md](https://github.com/voorhoede/head-start/tree/main/src/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](https://www.datocms.com/marketplace/plugins/i/datocms-plugin-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`](https://www.w3.org/WAI/WCAG21/Techniques/html/H63) 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](https://uxdesign.cc/position-stuck-96c9f55d9526), solve combination of sticky headers and horizontal scrolling using JavaScript. * [CSS-Tricks: A table with both a sticky header and a sticky first column](https://css-tricks.com/a-table-with-both-a-sticky-header-and-a-sticky-first-column/). * [CSS-Tricks: Responsive data tables](https://css-tricks.com/responsive-data-tables/), inspiration to improve table layout on smaller screens or in narrow container (when combined with [container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_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 |