Tables
Beautiful layouts using HTML table subcomponents with premium animation, glassmorphism, and neon styles.
When to use
glass variantDisplaying modern analytical summaries, live user activity, and admin stats lists over dark translucent boardsneon variantHighlighting key datasets, system status metrics, or log tables with neon primary outlinescompact densityPresenting dense financial records, large grids, or database queries where maximum data visibility is neededstriped formatImproving readability in wide tables containing numerous columns and valuesInteractive Playground
CustomizableTable Playground
nexoreui
Live Preview
| User | Role | Status | Uptime |
|---|---|---|---|
AV | System Architect | Active | 99.98% |
BM | Content Manager | Offline | 94.12% |
CN | Lead Developer | Active | 100.00% |
Props Panel
select
Visual preset theme of the table
select
Cell padding density of rows
boolean
Highlight rows on mouse hover
boolean
Alternate row colors dynamically
boolean
Add grid boundaries to all table cells
boolean
Enable spring-based slide-in animations for rows on mount
Generated Code
import { CustomizableTable } from "nexoreui"
<CustomizableTable
variant="default"
density="normal" hoverable animateRows
headers={["User", "Role", "Status", "Uptime"]}
rows={[
["Alice Vance", "System Architect", "Active", "99.98%"],
["Bob Marley", "Content Manager", "Offline", "94.12%"],
["Charlie Neon", "Lead Developer", "Active", "100.00%"]
]}
/>Showcase Pre-styled Templates
Selectable real-world configurations that demonstrate styling versatility.
1. Premium Glassmorphic Team Dashboard
Uses a translucent overlay, subtle borders, and smooth backdrop blurs to display team project updates and real-time metrics.
| Team Member | Active Project | Progress | Status | Action |
|---|---|---|---|---|
 SD Sophia Diaz sophia@nexore.ai | Cloud Migrate | Migration85% | Running | |
 JH Jack Hughes jack@nexore.ai | UI Redesign v2 | Deploy100% | Completed | |
ML Marcus Lin marcus@nexore.ai | SEO Marketing | Research32% | Paused |
component.tsx
2. Neon Aurora Cyber-Leaderboard
Electric design emphasizing dark theme rows, glowing active ranking numbers, and vibrant neon headers.
| Rank | Developer | Specialty | Uptime Score | XP Points |
|---|---|---|---|---|
| #1 | ZE | Kernel dev | 100.00% | 12,402 XP |
| #2 | LM | UI Architect | 99.94% | 10,850 XP |
| #3 | TR | DevOps | 99.87% | 9,410 XP |
component.tsx
3. Industrial Cyberpunk Terminal Grid
High-tech grid using raw monospace text, cyber borders, flashing activity indicators, and glowing corners.
| Node ID | Domain / IP | Load | State |
|---|---|---|---|
| NEX-01_SYS | 192.168.10.88 | 76.4% CPU | [ONLINE] |
| NEX-02_DB | 10.0.4.152 | 14.1% CPU | [ONLINE] |
| NEX-03_GPU | 192.168.20.90 | 99.8% OVERLOAD | [WARN_CRIT] |
component.tsx
Page 1 of 2
API Reference (Props)
| Prop | Type | Default | Description |
|---|---|---|---|
| headers* | React.ReactNode[] | string[] | — | Array of header cell elements or strings. |
| rows* | React.ReactNode[][] | — | Two-dimensional array representing rows and their cell content. |
| variant | "default" | "glass" | "neon" | "minimal" | "cyberpunk" | "aurora" | "gradient" | "default" | The preset theme configuration. |
| density | "compact" | "normal" | "spacious" | "normal" | Spacing padding scale variant. |
| hoverable | boolean | true | Enable hover row highlighting. |
| striped | boolean | false | Alternate row colors dynamically. |
| bordered | boolean | false | Render border lines around columns and rows. |
| animateRows | boolean | true | Slide-in animations for rows on mount. |
| className | string | — | Additional custom class names. |
♿ Accessibility (a11y)
- Semantic markup: Uses proper HTML5
<table>,<thead>,<tbody>,<tr>, and header labels<th>for accessible structure. - Keyboard Navigation: Grid-focused cells and action buttons inside table cells remain focusable and interactable via Tab controls.