Table

A data table that stays inside the reading measure — columns compress while they can, and the container scrolls once they cannot.

Service life by standard

Indicative durations, to be confirmed by the manufacturer.

Standard	Service life	Note
EN 397	3 to 5 years	Site helmet, polyethylene shell
EN 397 resin	5 to 10 years	More stable under UV
EN 812	2 to 3 years	Bump cap, indoor use
EN 12492	5 years	Climbing helmet, reinforced chin strap

import { TableBlock } from "mako-ui/blocks/table";

export default function Particle() {
  return (
    <TableBlock
      hasRowHeaders
      headers={["Standard", "Service life", "Note"]}
      rows={[
        ["EN 397", "3 to 5 years", "Site helmet, polyethylene shell"],
        ["EN 397 resin", "5 to 10 years", "More stable under UV"],
        ["EN 812", "2 to 3 years", "Bump cap, indoor use"],
        ["EN 12492", "5 years", "Climbing helmet, reinforced chin strap"],
      ]}
      subtitle="Indicative durations, to be confirmed by the manufacturer."
      title="Service life by standard"
    />
  );
}

Props

TableBlock

Prop	Type	Default	Description
`rows`	`string[][]`	—	The body rows. The block renders nothing when empty.
`headers`	`string[]`	—	Column headers, as their own prop rather than the first row of `rows`.
`hasRowHeaders`	`boolean`	`false`	Renders the first cell of each row as a row header — worth turning on when the first column labels its row.
`caption`	`string`	—	Rendered as a `<caption>`. Usually redundant when the block already has a `title`.
`title`	`string`	—	Optional section heading, rendered as an `h2`.
`subtitle`	`string`	—	Optional line under the heading.
`id`	`string`	—	Id of the section, and the prefix every element id inside is derived from.

Examples

Wide table

Columns compress to fit while the container is wide enough; below the table's minimum width, the region scrolls and stays keyboard-reachable.

Available references

Lead times observed over the last quarter, mainland deliveries.
Reference	Designation	Material	Diameter	Length	Thread	Packaging	Lead time
0139-5259852	Twist drill	HSS-Co	8 mm	117 mm	—	10 pieces	24 h
0139-5259853	Machine tap	HSS-E	10 mm	100 mm	M10	1 piece	48 h
0139-5259854	Round die	HSS	12 mm	—	M12	1 piece	5 days

import { TableBlock } from "mako-ui/blocks/table";

export default function Particle() {
  return (
    <TableBlock
      caption="Lead times observed over the last quarter, mainland deliveries."
      headers={[
        "Reference",
        "Designation",
        "Material",
        "Diameter",
        "Length",
        "Thread",
        "Packaging",
        "Lead time",
      ]}
      rows={[
        [
          "0139-5259852",
          "Twist drill",
          "HSS-Co",
          "8 mm",
          "117 mm",
          "—",
          "10 pieces",
          "24 h",
        ],
        [
          "0139-5259853",
          "Machine tap",
          "HSS-E",
          "10 mm",
          "100 mm",
          "M10",
          "1 piece",
          "48 h",
        ],
        [
          "0139-5259854",
          "Round die",
          "HSS",
          "12 mm",
          "—",
          "M12",
          "1 piece",
          "5 days",
        ],
      ]}
      title="Available references"
    />
  );
}

On This Page

Props TableBlock Examples Wide table