Detail Panel
The Detail Panel components provide a flexible way to show detail views alongside data tables. Multiple modes are available: inline split-view, card overlay with/without backdrop, tabbed panels, custom header actions, and full-screen overlay.
Inline Split-View
Panel appears alongside the table (no overlay). The table shrinks to make room for the panel. Uses isOverlay={false}.
| Name | Role | Status | |
|---|---|---|---|
| John Doe | john@example.com | Admin | Active |
| Jane Smith | jane@example.com | Editor | Active |
| Bob Johnson | bob@example.com | Viewer | Pending |
| Alice Brown | alice@example.com | Admin | Active |
| Charlie Wilson | charlie@example.com | Editor | Inactive |
| Diana Prince | diana@example.com | Admin | Active |
| Edward Kim | edward@example.com | Viewer | Active |
| Fiona Garcia | fiona@example.com | Editor | Active |
John Doe
JD
John Doe
john@example.com
| Role | Admin |
| Department | Engineering |
| Phone | +1 555-0101 |
| Location | New York |
| Joined | 2022-01-15 |
| Status | Active |
Card Overlay (with Backdrop)
Panel overlays the table within the card. Clicking the backdrop closes the panel.
Card Overlay (No Backdrop)
Panel stays open while you click different rows. Table remains interactive. Simulated loading delay on row switch.
Tabbed Detail Panel
Panel with tabs for organizing content into sections. Uses the tabs snippet prop on DetailPanel.
Header Actions (No Footer)
Custom header with action buttons using header snippet. Close button is rendered automatically after the header content.
Full-Screen Overlay
Panel slides in from the right as a fixed overlay using SlidePanel + DetailPanel.
| Name | Role | Status | |
|---|---|---|---|
| John Doe | john@example.com | Admin | Active |
| Jane Smith | jane@example.com | Editor | Active |
| Bob Johnson | bob@example.com | Viewer | Pending |
| Alice Brown | alice@example.com | Admin | Active |
| Charlie Wilson | charlie@example.com | Editor | Inactive |
| Diana Prince | diana@example.com | Admin | Active |
| Edward Kim | edward@example.com | Viewer | Active |
| Fiona Garcia | fiona@example.com | Editor | Active |
Usage
Inline Split-View Mode
Use
DetailView with isOverlay={false}. The table shrinks and the panel appears alongside it.
No backdrop is rendered in this mode.Card Overlay Mode
Use
DetailView + DetailPanel together. The table goes in the main snippet,
the panel content goes as children. Toggle shouldShowBackdrop to control whether a backdrop appears.Tabbed Panel
Use the
tabs snippet prop on DetailPanel to render tabs between the header and body.
Place a Tabs component with TabItem children inside the snippet.Full-Screen Overlay Mode
Use
SlidePanel + DetailPanel together. The SlidePanel handles the fixed
overlay positioning, escape key, and backdrop. The DetailPanel is the same content shell used in card mode.Resize
All panels include a drag handle on the left edge. Drag to resize (min 28rem, max 64rem).
Double-click the handle to reset to default width. Width is persisted to localStorage.
Disable with
isResizable={false} on DetailPanel.Component Props
DetailView
| Prop | Type | Default | Description |
|---|---|---|---|
show | boolean (bindable) | false | Controls panel visibility |
shouldShowBackdrop | boolean | true | Show backdrop overlay behind panel |
isOverlay | boolean | true | Use overlay mode. When false, panel appears inline (split-view) |
main | Snippet | - | Main content area (table, list, etc.) |
children | Snippet | - | Panel content (DetailPanel) |
onclose | () => void | - | Called on backdrop click or escape key |
class | string | '' | Additional CSS classes |
DetailPanel
| Prop | Type | Default | Description |
|---|---|---|---|
titleText | string | '' | Panel title text |
header | Snippet | - | Custom header content (replaces title area, close button still rendered) |
tabs | Snippet | - | Tabs content rendered between header and body |
children | Snippet | - | Body content |
footer | Snippet | - | Footer content (action buttons) |
onclose | () => void | - | Called when close button is clicked |
isResizable | boolean | true | Enable drag-to-resize handle |
class | string | '' | Additional CSS classes |
SlidePanel
| Prop | Type | Default | Description |
|---|---|---|---|
show | boolean (bindable) | false | Controls panel visibility |
onclose | () => void | - | Called on escape key or backdrop click |
children | Snippet | - | Panel content |
class | string | '' | Additional CSS classes |
CSS Reference
| Class | Description |
|---|---|
.pa-detail-view | Container for inline split-view mode (table + panel side by side) |
.pa-detail-view--overlay | Modifier for overlay mode (panel overlays the table within the container) |
.pa-detail-view__main | Main content area (table, list, etc.) |
.pa-detail-view__panel | Panel wrapper (slides open/closed) |
.pa-detail-view__panel--open | Panel open state |
.pa-detail-view__overlay | Backdrop overlay element |
.pa-detail-view__overlay--visible | Backdrop visible state |
.pa-detail-panel__content | Detail panel content wrapper |
.pa-detail-panel__header | Panel header (title + close button) |
.pa-detail-panel__title | Panel title text |
.pa-detail-panel__close | Close button in panel header |
.pa-detail-panel__tabs | Tabs area between header and body |
.pa-detail-panel__body | Scrollable body area |
.pa-detail-panel__footer | Footer with action buttons |
.pa-detail-panel-resize | Drag-to-resize handle on left edge |
.pa-detail-panel-resizing | Body class applied during resize drag |
.pa-detail-panel--overlay | Fixed full-screen overlay mode (SlidePanel) |
.pa-detail-panel--open | SlidePanel open state |
.pa-detail-panel__overlay | Full-screen backdrop for SlidePanel |
SCSS Variables
| Variable | Default | Description |
|---|---|---|
$detail-panel-width | 40rem | Default panel width |
$detail-panel-min-width | 28rem | Minimum panel width (resize constraint) |
$detail-panel-max-width | 64rem | Maximum panel width (resize constraint) |
$detail-panel-resize-handle-width | 6px | Width of the resize drag handle |
$detail-panel-transition-duration | 0.3s | Open/close transition duration |
$detail-panel-overlay-bg | rgba(0, 0, 0, 0.3) | Backdrop overlay background color |
CSS Custom Properties
| Property | Description |
|---|---|
--pa-local-detail-panel-width | Runtime panel width (set by resize handle, persisted to localStorage) |
--pa-detail-panel-bg | Panel background color (defaults to card background) |
--pa-detail-panel-border-color | Panel border color |
--pa-detail-panel-header-bg | Header background color |
--pa-detail-panel-footer-bg | Footer background color |