Detail panels display row details alongside a table. Two modes: inline split-view (table shrinks, panel appears alongside) and overlay (panel slides over content).
Min-Height Card with Single Row
Card has minhr-25 so the detail panel fills the available height even with minimal table content.
Inline Split-View
Click a row to open the detail panel alongside the table. The table shrinks to make room.
| 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 |
Select a row
Click a table row to view details here.
Card Overlay
Panel overlays the table within the card. Body scroll disabled via .pa-scroll-lock on <body>.
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.
Header Actions — No Footer
Icon buttons live in the header next to the close button. No footer, like a compact card.
Web-Grid Integration
A <web-grid> drives the detail panel via onrowfocus. Click or arrow-navigate rows to open/update the panel.
Table Card + Web-Grid
Products
Orders
Overlay Mode
Click a row to open an overlay panel that slides in from the right. Body scroll disabled via .pa-scroll-lock.
| 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 |
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) |