Skip to main content

Section

A report is divided into sections. Each section contains its own page formatting, like Page number, Header, Footer, Orientation, Size, etc.

The report must contain at least one section.

import { pageMargin, pageSize, Section } from "@jikji/react";

<Section
  margin={pageMargin.Narrow}
  dimension={pageSize.A4}
  orientation={"landscape"}
>
  ...ValidComponents...
</Section>;
caution

Reports with multiple sections with different dimension/orientation are not supported yet.

Props​

NameTypeIs RequiredDescription
marginPageMargin✅Use pageMargin for standard values
dimensionPageDimension✅Use pageSize for standard values
orientationPageOrientation❌Default: portrait

Types​

NamevaluesDescription
PageMargin{top: string; right: string; bottom: string; left: string}
PageDimension{height: string; width: string}Height and width in portrait orientation
PageOrientation'portrait' | 'landscape'
danger

The string values in PageMargin and PageDimension must contain a number and an acceptable CSS unit, e.g. 300mm

Valid Children Components​

The Section component only accept these component as a children, You can provide them in any order, All of them are optional except the PageContent. Passing any other component will cause an exception.

  1. SectionHeader
  2. SectionFooter
  3. PageContent❗Required
  4. PageHeader
  5. PageFooter
  6. PageOverlay

Standard Helpers​

pageMargin: It will provide the Microsoft Word default margins
pageSize: It will provide most of the ISO 216 (e.g. A4, B5) + North American Sizes pages sizes