ComponentsData Display
RecordInspector
Compact record detail panel for backoffice review, metadata, actions, and activity
RecordInspector gives operators a dense detail surface for reviewing the selected record without losing table context.
Import
import {
RecordInspector,
RecordInspectorHeader,
RecordInspectorHeading,
RecordInspectorTitle,
RecordInspectorDescription,
RecordInspectorStatus,
RecordInspectorActions,
RecordInspectorBody,
RecordInspectorSection,
RecordInspectorSectionHeader,
RecordInspectorSectionTitle,
RecordInspectorMetadata,
RecordInspectorMetadataItem,
RecordInspectorMetadataLabel,
RecordInspectorMetadataValue,
RecordInspectorFooter,
} from '@nim-ui/components';Basic Usage
ORD-4821
Northwind Supply order awaiting risk review.
Needs review
Summary
Critical details operators need before changing fulfilment state.
- Customer
- Northwind Supply
- Total
- $12,840.00
- Warehouse
- Bangkok 02
Activity
Risk review requested
Payment pattern requires supervisor approval.
Inventory reserved
All line items reserved at Bangkok 02.
Code
<RecordInspector aria-label="Order inspector">
<RecordInspectorHeader>
<RecordInspectorHeading>
<RecordInspectorTitle>ORD-4821</RecordInspectorTitle>
<RecordInspectorDescription>Northwind Supply order awaiting risk review.</RecordInspectorDescription>
</RecordInspectorHeading>
<RecordInspectorStatus>
<StatusPill status="warning">Needs review</StatusPill>
</RecordInspectorStatus>
</RecordInspectorHeader>
<RecordInspectorBody>
<RecordInspectorSection aria-labelledby="summary-title">
<RecordInspectorSectionHeader>
<RecordInspectorSectionTitle id="summary-title">Summary</RecordInspectorSectionTitle>
</RecordInspectorSectionHeader>
<RecordInspectorMetadata columns={3}>
<RecordInspectorMetadataItem>
<RecordInspectorMetadataLabel>Customer</RecordInspectorMetadataLabel>
<RecordInspectorMetadataValue>Northwind Supply</RecordInspectorMetadataValue>
</RecordInspectorMetadataItem>
</RecordInspectorMetadata>
</RecordInspectorSection>
</RecordInspectorBody>
</RecordInspector>Props
RecordInspector
| Name | Type | Default | Description |
|---|---|---|---|
density | 'comfortable' | 'compact' | 'comfortable' | Sets the spacing the whole panel runs at. RecordInspectorHeader, RecordInspectorSection and RecordInspectorFooter inherit this value, and any of the three can pass its own density to override it. |
aria-label | string | - | Provides the accessible region name for the selected record detail surface. |
RecordInspectorHeader
| Name | Type | Default | Description |
|---|---|---|---|
density | 'comfortable' | 'compact' | 'comfortable' | Overrides the header's padding. Inherited from RecordInspector when it is not set. |
RecordInspectorSection
| Name | Type | Default | Description |
|---|---|---|---|
density | 'comfortable' | 'compact' | 'comfortable' | Overrides the section's padding. Inherited from RecordInspector when it is not set. |
RecordInspectorMetadata
| Name | Type | Default | Description |
|---|---|---|---|
columns | 1 | 2 | 3 | 2 | Responsive metadata column count. It collapses to one column on narrow screens. |
RecordInspectorFooter
| Name | Type | Default | Description |
|---|---|---|---|
density | 'comfortable' | 'compact' | 'comfortable' | Overrides the footer's padding. Inherited from RecordInspector when it is not set. |
sticky | boolean | false | Pins the footer to the bottom of the scrolling container so decision actions stay in view while the record scrolls. Off by default. |
Backoffice Guidance
- Use RecordInspector beside a table, inside a Drawer, or as the detail column in a split view.
- Keep the header focused on identity, state, and immediate actions.
- Use metadata for stable facts and Timeline for events that changed over time.
- Prefer compact density when the inspector sits in a side panel next to a data table. Set it once on RecordInspector; the header, every section, and the footer follow.