Component
Edit this pageNeo Table
Data visualization with attitude. Hard borders, high contrast headers, and rows that light up when you touch them.
01 Installation
Copy the source code below. It exports subcomponents for building structured tables.
Source Code
New Component
src/components/neo/
NeoTable.tsx
Or switch to the "Code" tab to view manually
02 Basic Usage
Simple Grid
| ID | Username | Status | Role |
|---|---|---|---|
| #001 | star_dust | ● Active | Admin |
| #002 | neo_dev | ● Offline | Editor |
| #003 | design_god | ● Busy | Viewer |
03 Real World Examples
User Directory
Team Members
| Profile | Status | Role | Manage |
|---|---|---|---|
Alex ChenFrontend | online | Admin | |
Sarah JonesProduct | busy | Admin | |
Mike RossBackend | offline | Admin |
Transaction History
| Invoice | Date | Amount | Action |
|---|---|---|---|
| INV-001 | Oct 24, 2023 | $1,200.00 | |
| INV-002 | Oct 22, 2023 | $850.00 |
Props API
| Component | Prop | Type | Description |
|---|---|---|---|
| NeoTable | className | string | Wrapper styles. |
| NeoTr | hover | boolean | Enable/disable hover effect (default: true). |
| NeoTh / NeoTd | className | string | Cell styles. |