Detail panels display row details alongside a table. Modes: inline split-view (the table shrinks and the panel appears alongside), card overlay (the panel overlays the table within the card, with or without a backdrop), tabbed and header-action variants, and a fixed full-screen overlay.
Min-Height Card with Single Row
The card uses minhr-25 so the detail panel fills the available height even when the table has minimal content.
Inline Split-View
Click a row to open the detail panel alongside the table. The table shrinks to make room. Uses isOverlay={false}.
| Name | Role | Department | Status | |
|---|---|---|---|---|
| John Doe | john.doe@company.com | Administrator | Engineering | Active |
| Jane Smith | jane.smith@company.com | Editor | Marketing | Active |
| Bob Wilson | bob.wilson@company.com | Viewer | Sales | Active |
| Alice Brown | alice.brown@company.com | Editor | Design | Inactive |
| Charlie Davis | charlie.davis@company.com | Administrator | Engineering | Active |
| Diana Evans | diana.evans@company.com | Viewer | HR | Active |
| Edward Foster | edward.foster@company.com | Editor | Content | Active |
| Fiona Garcia | fiona.garcia@company.com | Viewer | Support | Inactive |
John Doe
Personal
Name John Doe
Email john.doe@company.com
Phone +1 555-0101
Location New York
Employment
Role Administrator
Department Engineering
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 rows. Simulates loading data from a server with a short delay.
Tabbed Detail Panel
Detail panel with tabs inside, like the profile panel. Click a row, then switch between Details, Activity and Notes. Uses the tabs snippet prop on DetailPanel.
Header Actions — No Footer
Icon buttons live in the header next to the close button via the actions snippet. No footer, like a compact card.
List Drives Panel
A selectable table drives the detail panel. Selecting a row shows a spinner, then loads the detail (simulated server fetch). Header actions, no footer.
Table Card + Detail View
Products
Orders
Full-Screen Overlay
Click a row to open an overlay panel that slides in from the right, using SlidePanel + DetailPanel.
| Name | Role | Department | Status | |
|---|---|---|---|---|
| John Doe | john.doe@company.com | Administrator | Engineering | Active |
| Jane Smith | jane.smith@company.com | Editor | Marketing | Active |
| Bob Wilson | bob.wilson@company.com | Viewer | Sales | Active |
| Alice Brown | alice.brown@company.com | Editor | Design | Inactive |
| Charlie Davis | charlie.davis@company.com | Administrator | Engineering | Active |
| Diana Evans | diana.evans@company.com | Viewer | HR | Active |
| Edward Foster | edward.foster@company.com | Editor | Content | Active |
| Fiona Garcia | fiona.garcia@company.com | Viewer | Support | Inactive |
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 hasBackdrop 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.Header Actions
Use the
actions snippet on DetailPanel for buttons in .pa-detail-panel__actions,
between the title and the close button. Primary confirm/cancel buttons belong in footer.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
Resizable panels include a drag handle on the left edge (min 28rem, max 64rem). Disable with
isResizable={false} on DetailPanel.Component Props
DetailView
| Prop | Type | Default | Description |
|---|---|---|---|
isOpen | boolean (bindable) | false | Controls panel visibility |
hasBackdrop | 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 (blessed header shape) |
actions | Snippet | - | Header action buttons, between the title and the close button |
tabs | Snippet | - | Tabs content rendered between header and body |
children | Snippet | - | Body content |
footer | Snippet | - | Footer content (confirm/cancel buttons) |
isBordered | boolean | false | Add top/bottom borders to the content wrapper |
isResizable | boolean | true | Enable drag-to-resize handle |
onclose | () => void | - | Called when the close button is clicked |
header | Snippet | - | Legacy: raw header override. Prefer titleText + actions. |
class | string | '' | Additional CSS classes |
SlidePanel
| Prop | Type | Default | Description |
|---|---|---|---|
isOpen | 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 | Flex wrapper for inline split-view mode (table + panel side by side) |
.pa-detail-view__main | Left side container (table area), flex: 1 |
.pa-detail-view__panel | Right side panel container, hidden by default (width: 0) |
.pa-detail-view__panel--open | Shows the inline panel with configured width |
.pa-detail-view--overlay | Card overlay modifier: panel overlays the table within the card instead of pushing it |
.pa-detail-view__overlay | Backdrop overlay for card overlay mode (click to close) |
.pa-detail-view__overlay--visible | Shows the card overlay backdrop |
.pa-detail-panel--overlay | Full-screen overlay mode wrapper (fixed position, like profile panel) |
.pa-detail-panel--open | Makes the overlay panel visible with slide-in transition |
.pa-detail-panel__content | Panel content wrapper (flex column: header/body/footer) |
.pa-detail-panel__header | Panel header with title and close button |
.pa-detail-panel__title | Truncated panel title |
.pa-detail-panel__close | Close button in header |
.pa-detail-panel__body | Scrollable body area (flex: 1; overflow-y: auto) |
.pa-detail-panel__footer | Fixed footer with action buttons |
.pa-detail-panel__overlay | Backdrop overlay (overlay mode only, click to close) |
.pa-detail-panel-resize | Drag handle on left edge of panel for resizing |
.is-selected | Applied to tr elements to highlight the selected row |
SCSS Variables
| Variable | Default | Description |
|---|---|---|
$detail-panel-width | 40rem | Default panel width |
$detail-panel-min-width | 28rem | Minimum panel width |
$detail-panel-max-width | 64rem | Maximum panel width |
$detail-panel-mobile-width | 90vw | Panel width on mobile (overlay mode) |
$detail-panel-overlay-bg | rgba(0,0,0,0.3) | Backdrop overlay background |
$detail-panel-z-index | 4500 | Z-index (below profile panel, above header) |
$detail-panel-shadow | $shadow-profile-panel | Box shadow for overlay mode |
$detail-panel-close-size | 3.2rem | Close button size |
$detail-panel-resize-handle-width | 6px | Width of the resize drag handle |
$detail-panel-selected-bg | rgba($accent-color, 0.08) | Background color of selected table rows |
CSS Custom Properties
| Property | Description |
|---|---|
--pa-local-detail-panel-width | Runtime panel width (set by JS resize handle). Default: 40rem |
--pa-local-detail-panel-max-width | Runtime max width. Default: 64rem |
--pa-detail-panel-overlay-bg | Backdrop overlay color (themeable via CSS variables) |
--pa-detail-panel-selected-bg | Selected row highlight color (themeable via CSS variables) |