Skip to content
Nim UI

RecordInspector

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

Order Record Inspector

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.

View 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' Adjusts panel spacing for full-page detail views or tighter side panels.
aria-label string - Provides the accessible region name for the selected record detail surface.

RecordInspectorMetadata

Name Type Default Description
columns 1 | 2 | 3 2 Responsive metadata column count. It collapses to one column on narrow screens.

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.