Data Components

docxio provides higher-level components that wrap common document patterns. Import them from the main package:

import { DataTable, PageNumbers, Watermark, Signature, TotalRow, Divider, Spacer } from "docxio";

DataTable

Generates a formatted table from an array of data objects:

<DataTable
  columns={[
    { key: "name", label: "Name" },
    { key: "department", label: "Department" },
    { key: "amount", label: "Amount", alignment: "right" },
  ]}
  data={[
    { name: "Alice", department: "Engineering", amount: "$100,000" },
    { name: "Bob", department: "Marketing", amount: "$85,000" },
    { name: "Carol", department: "Engineering", amount: "$95,000" },
  ]}
  zebra
/>

The zebra prop adds alternating row shading. DataTable automatically creates a header row with bold text.

PageNumbers

Inserts a page number field, typically used in footers:

<footer>
  <PageNumbers />
</footer>

Renders as "Page X of Y" using OOXML field codes.

Watermark

Adds a large, centered, rotated text watermark:

<Watermark text="DRAFT" />
<Watermark text="CONFIDENTIAL" />

Signature

Creates a signature block with a line and name:

<Signature name="Jane Doe" title="CEO" date="2025-12-31" />

TotalRow

A right-aligned summary line, useful at the bottom of financial tables:

<TotalRow label="Total Revenue" value="$280,000" />

Divider

A horizontal rule implemented as a bordered paragraph:

<paragraph><run>Section One</run></paragraph>
<Divider />
<paragraph><run>Section Two</run></paragraph>

Spacer

An empty paragraph with configurable height, useful for visual spacing:

<Spacer height={480} />

The height is in twips (1/20 of a point). 480 twips = 24pt = ~1/3 inch.

Combining data components

<document title="Invoice">
  <section>
    <heading level={1}><run>Invoice #1234</run></heading>

    <DataTable
      columns={[
        { key: "item", label: "Item" },
        { key: "qty", label: "Qty", alignment: "right" },
        { key: "price", label: "Price", alignment: "right" },
      ]}
      data={lineItems}
      zebra
    />

    <Spacer height={240} />
    <TotalRow label="Total" value="$1,500.00" />
    <Divider />

    <Spacer height={480} />
    <Signature name="Jane Doe" title="Accounts Payable" />

    <footer>
      <PageNumbers />
    </footer>
  </section>
</document>

DataTable​

PageNumbers​

Watermark​

Signature​

TotalRow​

Divider​

Spacer​

Combining data components​