3. Tables that break across pages

Before this: You know that a document is an array of blocks.

{
  type: 'table',
  headers: ['Item', 'Qty', 'Price'],
  rows: [
    { cells: ['Widget', '2', '9.00'],  type: '', pointed: false },
    { cells: ['Gadget', '1', '24.50'], type: '', pointed: false },
  ],
}

Give it two hundred rows and it spans as many pages as it needs, repeating the header row on each one. Long cell text wraps rather than overflowing.

About type and pointed

Both are required by the type definition, and both can be empty or false when you do not need them. They exist for row styling: type: 'credit' and type: 'debit' tint the row, and pointed: true highlights it. If you are writing plain JavaScript you can omit them and it will still render — but TypeScript will reject the object, so the examples here always include them.

When you need more

Zebra striping, per-cell borders, vertical alignment, captions, auto-fit columns and minimum row heights all exist. They are options on the same block, and they are documented in the smart tables guide. You do not need any of them to ship something useful.

Tip: Alt + ← / → moves between steps.