High-performance data table with virtual scrolling (10k+ rows). Use cases: Telemetry logs, test results tables, event logs, CSV data viewers, database query results, flight data records.
Installation
Copy and paste the following code into your project.
npx @plexusui/cli add data-grid
Manual Installation
1. Copy the component code from components/data-grid.tsx
2. Install dependencies:
npm install react@latest
3. Copy any required primitive components
Examples
Loading example...
Plexus UI - Playground
Real-time Satellite Telemetry
GPU-accelerated data grid with live updates. Monitors 50 satellites with 60fps rendering and virtual scrolling. Updates 5 random rows every 2 seconds.
Satellite ID⇅
Last Contact⇅
Mission⇅
Altitude (km)⇅
Velocity (km/s)⇅
Temp (°C)⇅
Signal (dBm)⇅
Status⇅
SAT-0001
52m ago
ISS
492.1
7.84
+35.7
71
Critical
SAT-0002
19m ago
Hubble
575.5
7.51
-33.3
97
Critical
SAT-0003
49m ago
JWST
572.9
7.95
-23.7
77
Critical
SAT-0004
15m ago
Sentinel-1
541.8
7.59
+29.3
90
Nominal
SAT-0005
10m ago
Landsat-9
510.7
7.96
-35.9
71
Nominal
SAT-0006
29m ago
Terra
542.6
7.78
-19.6
83
Standby
SAT-0007
14m ago
ISS
584.5
7.98
-13.1
88
Critical
SAT-0008
15m ago
Hubble
455.4
7.98
+29.3
83
Warning
SAT-0009
10m ago
JWST
436.7
7.86
-31.6
76
Warning
SAT-0010
3m ago
Sentinel-1
535.6
7.64
-33.2
76
Nominal
SAT-0011
52m ago
Landsat-9
400.6
7.98
-31.2
84
Standby
SAT-0012
4m ago
Terra
553.5
7.83
-31.5
76
Critical
SAT-0013
39m ago
ISS
468.8
7.88
-35.9
65
Critical
Flight Dashboard - 10,000 Rows
Virtual scrolling enables smooth 60fps rendering of 10,000 flights. Only visible rows are rendered to the DOM. GPU acceleration renders backgrounds and borders. Try scrolling and sorting!
Flight⇅
Airline⇅
From⇅
To⇅
Departure⇅
Arrival⇅
PAX⇅
Distance (mi)⇅
Status⇅
DE0100
Delta
ORD
ATL
5:07:56 AM
6:50:31 AM
73
339
Departed
UN0101
United
ATL
DFW
1:09:26 AM
5:11:40 AM
125
456
Delayed
AM0102
American
LAX
MIA
5:28:19 PM
8:04:25 PM
221
1,627
On Time
SO0103
Southwest
SEA
ATL
8:57:27 AM
2:07:37 PM
167
1,478
Cancelled
JE0104
JetBlue
SFO
SEA
2:00:49 AM
6:16:43 AM
168
3,186
Arrived
DE0105
Delta
DFW
SFO
3:18:26 AM
7:34:01 AM
94
1,271
Arrived
UN0106
United
DFW
SEA
10:54:29 PM
1:26:16 AM
61
3,001
Cancelled
AM0107
American
DFW
LAX
1:07:50 AM
4:35:44 AM
143
2,089
On Time
SO0108
Southwest
ORD
DFW
12:36:42 PM
5:28:43 PM
159
2,466
On Time
JE0109
JetBlue
JFK
DFW
4:38:41 PM
8:48:48 PM
182
296
Departed
DE0110
Delta
ATL
JFK
2:54:52 PM
7:44:50 PM
177
270
Cancelled
UN0111
United
JFK
ORD
12:37:16 PM
3:54:55 PM
69
1,602
Delayed
AM0112
American
ATL
JFK
6:26:46 AM
11:05:32 AM
178
468
Cancelled
Custom Formatters & Precision Metrics
Custom formatters display values with units, colors, and formatting. Each column can have its own formatter function for precise data presentation.
Engine⇅
Thrust (kN)⇅
Fuel Flow (kg/s)⇅
EGT (°C)⇅
Pressure (bar)⇅
Efficiency (%)⇅
Runtime⇅
Engine 1
156.8 kN
45.2 kg/s
1250°C
320 bar
94.5%
20h 45m
Engine 2
155.9 kN
44.8 kg/s
1245°C
318 bar
95.2%
20h 48m
Engine 3
157.2 kN
45.5 kg/s
1255°C
322 bar
94.1%
20h 42m
Engine 4
154.3 kN
44.1 kg/s
1240°C
315 bar
95.8%
20h 50m
Primitive Composition Pattern
Use DataGrid.Root, DataGrid.Canvas, DataGrid.Header, and DataGrid.Body primitives for full control over composition and layout. Add custom components between primitives.