Components

Neon Table

Sortable, paginated data table with neon scan-line row hover, corner accent marks, animated sort indicators, custom cell renderers, striped rows, and cyberpunk pagination controls.

npx neonblade add neon-table

USE CASE — THREAT MONITOR

Active Threat Log

ID	Source IP	Attack Type	Severity	Status	Time
THR-001	192.168.4.22	Port Scan	■ LOW	● BLOCKED	02:14:33
THR-002	10.0.0.87	SQL Injection	■ CRITICAL	● ACTIVE	02:19:11
THR-003	203.0.113.9	DDoS Attempt	■ HIGH	● MITIGATING	02:21:05
THR-004	172.16.0.3	Brute Force	■ MEDIUM	● BLOCKED	02:22:48
THR-005	198.51.100.14	XSS Payload	■ MEDIUM	● BLOCKED	02:23:17

1–5 / 8

1 / 2

USE CASE — AGENT ROSTER

Field Operative Registry

#	Agent	Role	Status	Score	Since
1	Kira Nakamura	Engineer	● ONLINE	9,420	2023-01-14
2	Zane Holloway	Analyst	● ONLINE	7,810	2023-03-22
3	Lyra Chen	Designer	● OFFLINE	6,540	2022-11-08
4	Axel Reeves	Engineer	● ONLINE	8,990	2023-06-01
5	Nova Castillo	Security	● SUSPENDED	3,210	2021-09-15

1–5 / 8

1 / 2

LOADING STATE

Fetching Operative Data...

#	Agent	Role	Status	Score	Since

COMPACT

ID	Source IP	Attack Type	Severity	Status	Time
THR-001	192.168.4.22	Port Scan	■ LOW	● BLOCKED	02:14:33
THR-002	10.0.0.87	SQL Injection	■ CRITICAL	● ACTIVE	02:19:11
THR-003	203.0.113.9	DDoS Attempt	■ HIGH	● MITIGATING	02:21:05
THR-004	172.16.0.3	Brute Force	■ MEDIUM	● BLOCKED	02:22:48

Props Configuration

Prop	Type	Default	Description
`data`	`T[]`	-	Array of row data objects. Each key maps to a column.
`columns`	`NTColumn<T>[]`	-	Column definitions — key, header, render?, sortable?, width?, align?.
`title`	`string`	-	Optional title shown in a header bar with a pulsing dot and accent line.
`color`	`"cyan" \| "pink" \| "green" \| string`	`"cyan"`	Neon accent color for header, hover beam, and pagination.
`rowHover`	`boolean`	`true`	Enable neon scan-line left-border on row hover.
`sortable`	`boolean`	`true`	Enable client-side column sorting.
`pageSize`	`number`	`0`	Rows per page. 0 disables pagination.
`emptyText`	`string`	`"NO DATA FOUND"`	Message shown when data is empty.
`grid`	`boolean`	`true`	Show subtle vertical dividers between columns.
`striped`	`boolean`	`false`	Alternate row background shading.
`compact`	`boolean`	`false`	Tighter row and cell padding for dense data.
`loading`	`boolean`	`false`	Show animated skeleton rows instead of data.
`loadingRows`	`number`	`5`	Number of skeleton rows to display while loading.
`corners`	`boolean`	`true`	Show neon accent corner marks on the table border.
`className`	`string`	-	Additional className on the outer wrapper.