ExplorerLayout

Explorer split-view shell: a header, a scrollable list column, and a sticky detail column that appears when a row is selected (stacking on narrow viewports).…

Explorer split-view shell: a header, a scrollable list column, and a sticky detail column that appears when a row is selected (stacking on narrow viewports). Purely presentational — the page supplies the list (tabs + table) and the detail panel, and owns selection/routing state.

import { ExplorerLayout } from "@tetherto/mdk-react-devkit";

Prop	Status	Type	Default	Description
`title`	Optional	`string \| undefined`	—	Page heading.
`headerActions`	Optional	`React.ReactNode`	—	Optional header controls (export button, etc.) shown next to the title.
`list`	Required	`React.ReactNode`	—	The list column — typically a tab switch plus the device/container table.
`detail`	Optional	`React.ReactNode`	—	The detail column content (shown in the sticky panel when `hasSelection`).
`hasSelection`	Optional	`boolean \| undefined`	—	When true the layout splits into list (70%) + a sticky detail column (30%); otherwise the list fills the width. Driven by whether a row is selected.
`className`	Optional	`string \| undefined`	—	—

Usage

Notes

The detail column is sticky on wide viewports and stacks below the list under ~992px.
The layout does not fetch data or own selection state — wire it in the shell page to the explorer read hooks and URL/selection state.

Example

/** * Runnable example for the ExplorerLayout feature. */import { ExplorerLayout } from "@tetherto/mdk-react-devkit"export const ExplorerLayoutExample = () => (  <ExplorerLayout    title="Explorer"    hasSelection    list={<div>List / table goes here</div>}    detail={<div>Selected-item details go here</div>}  />)