Header & Footer

<Section>
  <Section.Header>
    <Paragraph>My Document</Paragraph>
  </Section.Header>

  <Section.Footer>
    <Paragraph>Page <PageNumber /></Paragraph>
  </Section.Footer>

  <Paragraph>Content goes here...</Paragraph>
</Section>

<Section>
  <Section.Header>
    <Paragraph className="text-gray-500 text-sm">
      Company Report 2024
    </Paragraph>
  </Section.Header>

  <H1>Introduction</H1>
  <Paragraph>...</Paragraph>
</Section>

<Section>
  <Section.Footer>
    <Paragraph className="text-center text-xs text-gray-400">
      Confidential
    </Paragraph>
  </Section.Footer>

  <H1>Introduction</H1>
  <Paragraph>...</Paragraph>
</Section>

<Section>
  <Section.Header>
    <Paragraph className="text-right">Quarterly Report</Paragraph>
  </Section.Header>

  <Section.Footer>
    <Paragraph className="text-center">
      Page <PageNumber />
    </Paragraph>
  </Section.Footer>

  <H1>Q4 Results</H1>
  <Paragraph>...</Paragraph>
</Section>

<PageNumber />
// or
<PageNumber type="current" />

<PageNumber type="total" />

<PageNumber type="both" />

<PageNumber format="{current} / {total}" />

<PageNumber format="- {current} -" />

<Section.Header>
  <Paragraph className="text-right text-sm text-gray-500">
    Document Title
  </Paragraph>
</Section.Header>

<Section.Footer>
  <Paragraph className="text-center text-xs text-gray-400">
    Page <PageNumber /> of <PageNumber type="total" />
  </Paragraph>
</Section.Footer>

<Section.Header>
  <Paragraph className="font-bold">ACME Corporation</Paragraph>
  <Paragraph className="text-sm text-gray-500">
    Annual Report 2024
  </Paragraph>
</Section.Header>

<Section
  margins={{
    top: "1in",
    bottom: "1in",
    header: "0.5in",  // Distance from top edge to header
    footer: "0.5in",  // Distance from bottom edge to footer
  }}
>
  <Section.Header>...</Section.Header>
  <Section.Footer>...</Section.Footer>
</Section>

<Section.Header>
  <Paragraph className="text-sm text-gray-500">
    Project Proposal
  </Paragraph>
</Section.Header>

<Section.Footer>
  <Paragraph className="text-center text-xs">
    <PageNumber type="both" />
  </Paragraph>
</Section.Footer>

<Section.Header>
  <Paragraph>
    <Text className="font-bold">ACME Corp</Text>
    <Text className="text-gray-500"> | Internal Document</Text>
  </Paragraph>
</Section.Header>

<Section.Footer>
  <Paragraph className="text-xs text-gray-400 text-center">
    Confidential - Do not distribute
  </Paragraph>
  <Paragraph className="text-xs text-gray-400 text-center">
    Page <PageNumber /> of <PageNumber type="total" />
  </Paragraph>
</Section.Footer>

<Section.Footer>
  <Paragraph>
    Confidential<Tab /><Tab /><Tab />Page <PageNumber />
  </Paragraph>
</Section.Footer>

<Document>
  {/* Title page - no header/footer */}
  <Section>
    <H1 className="text-center mt-48">Annual Report</H1>
    <Paragraph className="text-center">2024</Paragraph>
  </Section>

  {/* Main content - with header/footer */}
  <Section>
    <Section.Header>
      <Paragraph className="text-gray-500">Annual Report 2024</Paragraph>
    </Section.Header>

    <Section.Footer>
      <Paragraph className="text-center">
        <PageNumber type="both" />
      </Paragraph>
    </Section.Footer>

    <H1>Executive Summary</H1>
    <Paragraph>...</Paragraph>
  </Section>

  {/* Appendix - different header */}
  <Section>
    <Section.Header>
      <Paragraph className="text-gray-500">Appendix</Paragraph>
    </Section.Header>

    <H1>Appendix A: Data Tables</H1>
    <Table>...</Table>
  </Section>
</Document>

import {
  render,
  Document,
  Section,
  H1,
  H2,
  Paragraph,
  Text,
  PageNumber,
} from "@cordel/react-docx";

const Report = () => (
  <Document>
    <Section
      margins={{
        top: "1in",
        bottom: "1in",
        left: "1.25in",
        right: "1in",
        header: "0.5in",
        footer: "0.5in",
      }}
    >
      <Section.Header>
        <Paragraph className="text-right text-sm text-gray-500">
          <Text className="font-bold">ACME Corp</Text> - Q4 Report
        </Paragraph>
      </Section.Header>

      <Section.Footer>
        <Paragraph className="text-center text-xs text-gray-400">
          Confidential | Page <PageNumber /> of <PageNumber type="total" />
        </Paragraph>
      </Section.Footer>

      <H1>Quarterly Report</H1>
      <Paragraph>
        This report summarizes Q4 2024 performance...
      </Paragraph>

      <H2>Financial Highlights</H2>
      <Paragraph>
        Revenue increased by 15% compared to Q3...
      </Paragraph>
    </Section>
  </Document>
);

await render(<Report />, "./report.docx");