Workbook Component

The <reeflow-workbook> component displays a complete embedded workbook with all its pages and components. It loads workbook data by ID and handles rendering of the workbook structure, including navigation between pages.

Basic usage

React

import { ReeflowProvider, ReeflowWorkbook } from '@reeflow/react';

<ReeflowProvider authToken="your-token">
  <ReeflowWorkbook workbookId="workbook_abc123" />
</ReeflowProvider>;

Vanilla JS / HTML

<reeflow-provider auth-token="your-token">
  <reeflow-workbook workbook-id="workbook_abc123"></reeflow-workbook>
</reeflow-provider>

Attributes

workbook-id (required)

The ID of the workbook to load from the API. You can find your workbook ID in the Reeflow Console where you created the workbook:

<reeflow-workbook workbook-id="workbook_abc123"></reeflow-workbook>

Finding your workbook ID

To find your workbook ID:

1. Navigate to the Reeflow Console
2. Go to the Workbooks section
3. Select your workbook
4. Copy the workbook ID from the URL or the workbook details page (it starts with work_)

theme (optional)

Override the theme inherited from the Provider:

<reeflow-workbook
  workbook-id="workbook_abc123"
  theme="ocean">
</reeflow-workbook>

theme-mode (optional)

Override the theme mode (light/dark/auto):

<reeflow-workbook
  workbook-id="workbook_abc123"
  theme-mode="dark">
</reeflow-workbook>

Programmatic API

The workbook component provides methods for programmatic control:

• refresh() - Reload workbook data from the API

Example:

const workbook = document.querySelector('reeflow-workbook');

// Reload from API
await workbook.refresh();

For complete API documentation, see the SDK Reference.

Events

The workbook component emits lifecycle events.

Lifecycle events

React

In React, use event handler props with automatic detail extraction:

import { ReeflowWorkbook } from '@reeflow/react';

function DashboardWorkbook() {
  return (
    <ReeflowWorkbook
      workbookId="workbook_abc123"
      onDataLoaded={(detail) => {
        console.log('Workbook loaded:', detail);
        console.log('Pages:', detail.pages);
      }}
      onWorkbookPageChange={(detail) => {
        console.log('Switched to page:', detail.page);
        console.log('Previous page:', detail.previousPage);
      }}
      onError={(detail) => {
        console.error('Error loading workbook:', detail.message);
      }}
      onStateChange={(detail) => {
        console.log('State:', detail.state);
      }}
    />
  );
}

Available event handlers:

• onDataLoaded - Fired when workbook data is successfully loaded (receives EmbeddedWorkbook)
• onWorkbookPageChange - Fired when the user switches to a different page (receives { page: number, previousPage: number })
• onError - Fired when an error occurs (receives { code: string, message: string })
• onStateChange - Fired when component state changes (receives { state: ReeflowComponentState, oldState: ReeflowComponentState })

Vanilla JS / HTML

In vanilla JavaScript, use the Web Components API:

const workbook = document.querySelector('reeflow-workbook');

workbook.addEventListener('reeflow-data-loaded', (event) => {
  console.log('Workbook loaded:', event.detail);
  console.log('Pages:', event.detail.pages);
});

workbook.addEventListener('reeflow-workbook-page-change', (event) => {
  console.log('Switched to page:', event.detail.page);
  console.log('Previous page:', event.detail.previousPage);
});

workbook.addEventListener('reeflow-error', (event) => {
  console.error('Error:', event.detail.message);
  console.error('Code:', event.detail.code);
});

workbook.addEventListener('reeflow-state-change', (event) => {
  console.log('State changed:', event.detail.state);
  console.log('Previous state:', event.detail.oldState);
});

For complete event details and TypeScript types, see the SDK Reference.

Mock mode for development

During development, you can use mock mode to work without an API connection:

React

import { ReeflowProvider, ReeflowWorkbook } from '@reeflow/react';

<ReeflowProvider authToken="test-token" mock>
  <ReeflowWorkbook workbookId="any-id" />
</ReeflowProvider>;

Vanilla JS / HTML

<reeflow-provider auth-token="test-token" mock>
  <reeflow-workbook workbook-id="any-id"></reeflow-workbook>
</reeflow-provider>

In mock mode, the workbook component returns a sample analytics dashboard called “Sample Analytics Dashboard” with:

Page 1 - Overview:

• A table component showing recent orders (12 columns wide, 8 rows high)
• A bar chart showing sales by date (12 columns wide, 11 rows high)

Page 2 - Detailed Analysis:

• A full-width table showing all order data (12 columns wide, 28 rows high)

All components use mock e-commerce data. See the Mock Data documentation for details about the data structure.

TypeScript support

The workbook component is fully typed when using TypeScript:

import type { ReeflowWorkbook, EmbeddedWorkbook } from '@reeflow/core';

const workbook = document.querySelector('reeflow-workbook') as ReeflowWorkbook;

// All methods are typed
await workbook.refresh();

// Listen to typed events
workbook.addEventListener('reeflow-data-loaded', (event: CustomEvent<EmbeddedWorkbook>) => {
  console.log('Pages:', event.detail.pages);
});

For complete type definitions, see the SDK Reference.