Tables

Nebula treats tables as layout primitives. Pass a column schema and a data array — the engine resolves widths, measures rows, and paginates with optional header repetition.

Basic usage

import { Table } from 'nebula-pdf-engine';

const columns = [
  { header: 'ID', key: 'id', width: 50 },
  { header: 'Description', key: 'desc', flex: 1 },
  { header: 'Amount', key: 'amt', width: 100, align: 'right' },
];

<Table
  columns={columns}
  data={rows}
  options={{
    stripe: true,
    headerRepeat: true,
    stripeColor: '#f9f9f9',
  }}
/>

Highlights

Header repetition — multi-page tables can show the header on every page (headerRepeat, default on).
Atomic rows — a row is never sliced mid-row across pages.
Flexible widths — mix points (100), percentages ("20%"), and flex (flex: 1).

Column styling

Merge order (later wins):

Table-level headerStyle / rowStyle
Column style (legacy — applies to header and data cells)
Column headerStyle or cellStyle
Engine-resolved width (always last during measure/render)

const columns = [
  {
    header: 'Description',
    key: 'description',
    flex: 1,
    style: { fontSize: 9 },
    headerStyle: { fontWeight: 600, textTransform: 'uppercase' },
    cellStyle: { color: '#333' },
  },
];

Statement-style example

Keep fixed columns within the printable width, or give the flexible column flex: 1:

<Page size="A4" padding={40}>
  <Table
    columns={[
      { header: 'Date', key: 'date', width: 80, cellStyle: { fontSize: 9 } },
      { header: 'Receipt', key: 'id', width: 100, cellStyle: { fontSize: 9 } },
      { header: 'Type', key: 'type', width: 60, cellStyle: { fontSize: 9 } },
      { header: 'Description', key: 'description', flex: 1, cellStyle: { fontSize: 9 } },
      { header: 'Credit', key: 'credit', width: 80, align: 'right', cellStyle: { fontSize: 9 } },
      { header: 'Debit', key: 'debit', width: 80, align: 'right', cellStyle: { fontSize: 9 } },
      { header: 'Balance', key: 'balance', width: 80, align: 'right', cellStyle: { fontSize: 9 } },
    ]}
    data={transactions}
    options={{ stripe: true, headerRepeat: true }}
  />
</Page>

Column key values must match your data fields (e.g. description, not a typo like desscription).

Try the examples

Runnable bank-statement and receipt projects (local or CodeSandbox): Examples.

See also