Nested Instances

A Tilery instance rendered inside a tab of another Tilery.

Nested instances are useful when a tab contains a self-contained tool with its own workspace. Resize the inner layout, then resize the outer panel to see that each Tilery root manages its own state.

The inner workspace is just tab content from the outer workspace, so it can use a separate controller, callbacks, and persistence model.

const innerLayout: TileryInitialLayout<TabData> = {
  type: 'group',
  direction: 'horizontal',
  children: [
    {
      type: 'panel',
      id: 'inner-left',
      size: 50,
      tabs: [{ id: 'inner-a', data: { title: 'Inner A' } }],
    },
    {
      type: 'panel',
      id: 'inner-right',
      size: 50,
      tabs: [{ id: 'inner-b', data: { title: 'Inner B' } }],
    },
  ],
};

const outerLayout: TileryInitialLayout<TabData> = {
  type: 'group',
  direction: 'horizontal',
  children: [
    {
      type: 'panel',
      id: 'sidebar',
      size: 30,
      tabs: [{ id: 'nav', data: { title: 'Navigation' }, closable: false }],
    },
    {
      type: 'panel',
      id: 'main',
      size: 70,
      tabs: [
        { id: 'nested-tab', data: { title: 'Nested Tilery', nested: true } },
        { id: 'regular', data: { title: 'Regular Tab' } },
      ],
    },
  ],
};

<Tilery<TabData>
  initialLayout={innerLayout}
  renderTabHeader={(tab: TileryTab<TabData>) => (
    <span>{tab.data.title}</span>
  )}
  renderTabContent={(tab: TileryTab<TabData>) => (
    <TabContent>
      <p style={{ margin: 0 }}>{tab.data.title} nested instance.</p>
    </TabContent>
  )}
/>

<Tilery<TabData>
  initialLayout={outerLayout}
  renderTabHeader={(tab: TileryTab<TabData>) => (
    <span>{tab.data.title}</span>
  )}
  renderTabContent={(tab: TileryTab<TabData>) => {
    if (tab.data.nested) return <InnerTilery />;
    return (
      <TabContent>
        <p style={{ margin: 0 }}>{tab.data.title} content.</p>
      </TabContent>
    );
  }}
/>

Concepts — Understand how each Tilery root owns its own state.
Component Props — Render nested content through tab content renderers.

Nested Instances

Related