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 |
Card Overlay
Panel overlays the table within the card with a backdrop.
Card Overlay — No Backdrop
Panel stays open while you click rows. No backdrop dims the table.
Tabbed Detail Panel
Detail panel with tabs inside. 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.
List-Driven Detail
A table drives the detail panel. Click a row to load its details into the panel.
Table Card + Detail View
Products
Orders
Overlay Mode
Click a row to open an overlay panel that slides in from the right.
| 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 |
|---|---|
--pc-local-detail-panel-width | Runtime panel width (set by JS resize handle). Default: 40rem |
--pc-local-detail-panel-max-width | Runtime max width. Default: 64rem |
--pc-detail-panel-overlay-bg | Backdrop overlay color (themeable via CSS variables) |
--pc-detail-panel-selected-bg | Selected row highlight color (themeable via CSS variables) |