Data Grid

Virtual scrolling data grid for tabular telemetry data. Renders only visible rows, so it handles 10k+ rows without DOM overhead. Supports sorting, filtering, column resizing, and cell formatting.

Category: data-display · Maturity: stable

Installation

npx @plexus/cli add data-grid

Usage

import { DataGrid } from '@plexus/ui'
 
function TelemetryLog({ records }) {
  return (
    <DataGrid
      data={records}
      columns={[
        { key: 'timestamp', label: 'Time', type: 'datetime', width: 200 },
        { key: 'source', label: 'Source', width: 120 },
        { key: 'metric', label: 'Metric', width: 160 },
        { key: 'value', label: 'Value', type: 'number', width: 100 },
        { key: 'tags', label: 'Tags', type: 'json', width: 200 },
      ]}
      sortable
      filterable
      height={600}
    />
  )
}

Performance

Aerospace Use Cases

• Flight data records — Browse and search through thousands of recorded flight parameters
• Telemetry logs — View raw telemetry data with timestamps, metric names, and values in a scrollable table
• Event logs — Display command execution history, alert triggers, and state transitions

Related Components