Feature - Table of Contents

[sharathm89]

Is it possible to add Table of Contents feature where we can show the page numbers.

Few tables might run into next pages so even in this case we need to get the page numbers as per the modules in it.

[PejmanNik]

Yes, it should be possible. there is a discussion about it here, you could try to implement it in your project:

https://github.com/PejmanNik/jikji/discussions/4

[sharathm89]

@PejmanNik Tried as per the discussion in #4 but didn't seem to work.

Below is my sample code.

const MainLayout = () => (
  <ReportView>
    <ReportRoot>
      <Section dimension={pageSize.A4}>
        <PageContent>
          <CoverPage />
        </PageContent>
      </Section>

      <Section dimension={pageSize.A4}>
        <PageHeader>
          <Header />
        </PageHeader>

        <PageContent>
          <DesignComponent1 />
          <PageBreak />

          <DesignComponent2 />
          <PageBreak />

          <DesignComponent3 />
          <PageBreak />

          <DesignComponent4 />
          <PageBreak />

          <DesignComponent5 />
          <PageBreak />

          <DesignComponent6 />
          <PageBreak />

           ........................
           ........................

          <DesignComponent_N />
          <PageBreak />

        </PageContent>

        <PageFooter>
          <Footer />
        </PageFooter>
      </Section>
    </ReportRoot>
  </ReportView>
);

Within the PageContent I have differnet design components. Based on certain conditions i'll hide/show the components.

Tried usePageInfo() -> pageNumber in <Header /> which generates number from 0 - n but how to identify to which component/page it belongs.

Below I have put the sample components and their respective page numbers which might be generated. (3, 5, 6, 9) not shown because those components might contain tables or it might have run into new pages which shouldn't be part of table of contents.

• DesignComponent1 - Page 1
• DesignComponent2 - Page 2
• DesignComponent3 - Page 4
• DesignComponent4 - Page 7
• DesignComponent5 - Page 8
• DesignComponent6 - Page 10

So can you lmk if above scenario is achievable or someway to add this feature.

[PejmanNik]

Sorry, I think I didn't understand your issue with the approach, but basically, you need to call usePageInfo inside the DesignComponentN and it will give you the active page that the DesignComponentN is rendering inside it

[sharathm89]

Tried using usePageInfo() -> pageNumber in each component but it always shows 0

DigitalRiskView, RiskScorecardView, ThridPartyView is nothing but different components which i named as DesignComponents for explanation.

Ideally I was expecting active page number to be given by usePageInfo() -> pageNumber but as said its always 0.

Example

DigitalRiskView - Page 1

RiskScorecardView - Page 2 and 3 (because it has table and assume it used 1 additional page)

ThridPartyView - Page 4

Table of Contents

Digital Risk - 1 Risk Scorecard - 2 Third Party - 4

....

so on

[PejmanNik]

oh, that is a bug, it should be easy to fix.

[PejmanNik]

i created #16