Data Table

Stable

High-performance data grid built on TanStack Table v8 with fuzzy search, column sorting, pagination, multi-row selection, and optional row virtualization.

Installation

$pnpm add @siberui/react

Import

tsx
import { 
  DataTable, 
  type DataTableColumnDef 
} from '@siberui/react';

Basic Usage & Column Definitions

Pass an array of typed data objects and DataTableColumnDef definitions. Sorting and global filtering are enabled by default.

SENTINEL NODE
SECTOR
STATUS
THROUGHPUT
LATENCY
SENTINEL-ALPHA-01Sector 09 [Orbital]
OPTIMAL
14.8 GB/s0.18 ms
SENTINEL-BETA-02Sector 04 [Ground]
OPTIMAL
9.4 GB/s0.24 ms
SENTINEL-GAMMA-03Sector 12 [Relay]
DEGRADED
2.1 GB/s4.80 ms
SENTINEL-DELTA-04Sector 01 [Core]
OPTIMAL
24.0 GB/s0.09 ms
5 row(s)
Rows
1 / 2
tsx
<DataTable
  columns={columns}
  data={sentinelData}
  pageSize={4}
/>

Neon Cybernetic Data Grid with Row Selection

Enable enableSelection to insert a multi-select checkbox column and pass variant="neon" for cyan header styling and glowing selection highlights.

SENTINEL NODE
SECTOR
STATUS
THROUGHPUT
LATENCY
SENTINEL-ALPHA-01Sector 09 [Orbital]
OPTIMAL
14.8 GB/s0.18 ms
SENTINEL-BETA-02Sector 04 [Ground]
OPTIMAL
9.4 GB/s0.24 ms
SENTINEL-GAMMA-03Sector 12 [Relay]
DEGRADED
2.1 GB/s4.80 ms
5 row(s)
Rows
1 / 2
Selected Nodes: 0
tsx
<DataTable
  variant="neon"
  columns={columns}
  data={sentinelData}
  enableSelection
  pageSize={3}
  onSelectionChange={setSelectedNodes}
/>

Frosted Cyber-Glass Data Grid

Translucent acrylic grid layered over circuit board textures with perimeter laser sweeps.

SENTINEL NODE
SECTOR
STATUS
THROUGHPUT
LATENCY
SENTINEL-ALPHA-01Sector 09 [Orbital]
OPTIMAL
14.8 GB/s0.18 ms
SENTINEL-BETA-02Sector 04 [Ground]
OPTIMAL
9.4 GB/s0.24 ms
SENTINEL-GAMMA-03Sector 12 [Relay]
DEGRADED
2.1 GB/s4.80 ms
5 row(s)
Rows
1 / 2
tsx
<div className="relative w-full p-8 rounded-2xl bg-white/[0.04] backdrop-blur-xl border border-white/10 shadow-2xl overflow-hidden">
  <DataTable
    variant="glass"
    columns={columns}
    data={sentinelData}
    pageSize={3}
  />
  <BorderBeam variant="neon" size={140} duration={6} borderWidth={1.5} glow />
</div>

Tactical HUD Sentinel Telemetry Grid Card

Composite mission defense card embedding the live telemetry table.

SENTINEL FLEET TELEMETRY

ONLINE • 5 NODES

Real-time orbital tracking and carrier status.

SENTINEL NODE
SECTOR
STATUS
THROUGHPUT
LATENCY
SENTINEL-ALPHA-01Sector 09 [Orbital]
OPTIMAL
14.8 GB/s0.18 ms
SENTINEL-BETA-02Sector 04 [Ground]
OPTIMAL
9.4 GB/s0.24 ms
SENTINEL-GAMMA-03Sector 12 [Relay]
DEGRADED
2.1 GB/s4.80 ms
5 row(s)
Rows
1 / 2
tsx
<Card className="border-cyan-500/30 bg-[#070b14] shadow-xl w-full">
  <CardHeader className="pb-4 border-b border-white/[0.06]">
    <div className="flex items-center justify-between">
      <CardTitle className="text-sm font-mono text-cyan-400 tracking-wider">SENTINEL FLEET TELEMETRY</CardTitle>
      <Badge variant="neon" size="sm">ONLINE • 5 NODES</Badge>
    </div>
    <CardDescription className="text-xs text-slate-400">
      Real-time orbital tracking and carrier status.
    </CardDescription>
  </CardHeader>

  <CardContent className="p-6">
    <DataTable
      variant="neon"
      columns={columns}
      data={sentinelData}
      pageSize={3}
    />
  </CardContent>
</Card>

API Reference

PROPERTIES (10)← swipe to inspect →
PropertyDescriptionTypeDefault
data
Array of data records to render in the table rows.
TData[]
-
columns
TanStack Table column definition array.
DataTableColumnDef<TData>[]
-
variant
Visual theme for table borders, headers, and selection ("default", "neon", "glass").
"default" | "neon" | "glass"
"default"
enableSorting
Whether columns can be sorted upon header click.
boolean
true
enableFiltering
Whether global fuzzy search input is rendered above table.
boolean
true
enableSelection
Whether leading row checkbox selection column is enabled.
boolean
false
enablePagination
Whether pagination controls and page limits are enabled.
boolean
true
enableVirtualization
Whether TanStack Virtual row virtualization is active for huge datasets.
boolean
false
pageSize
Initial number of rows displayed per page.
number
10
onSelectionChange
Callback fired when selected row collection changes.
(rows: TData[]) => void
-

Accessibility

  • ARIA Grid Semantics: Implements role="grid", role="row", role="columnheader" with aria-sort.

Best Practices

  • Virtualization: For datasets exceeding 500 rows where pagination is disabled, enable enableVirtualization to maintain 60 FPS scrolling performance.