Table

Data tables with sorting and filtering.

PreviousTabs

NextStepper

On This Page

Quick ActionsProject StudioNew Nexore Make (AI)Source on GitHub

Table

Data tables with sorting and filtering.

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 boards

neon variantHighlighting key datasets, system status metrics, or log tables with neon primary outlines

compact densityPresenting dense financial records, large grids, or database queries where maximum data visibility is needed

striped formatImproving readability in wide tables containing numerous columns and values

Interactive Playground

Live CanvasInteractive

User	Role	Status	Uptime
AV Alice Vance	System Architect	Active	99.98%
BM Bob Marley	Content Manager	Offline	94.12%
CN Charlie Neon	Lead Developer	Active	100.00%
DP Diana Prince	DevOps Engineer	Active	99.95%

Controls(11)

headers

text

Custom table column headers (comma-separated: e.g. User, Role, Status, Uptime, State)

row1

text

Row 1 values (comma-separated, 1 per column: e.g. Alice Vance, System Architect, Active, 99.98%, CA)

row2

text

Row 2 values (comma-separated, 1 per column: e.g. Bob Marley, Content Manager, Offline, 94.12%, NY)

row3

text

Row 3 values (comma-separated, 1 per column: e.g. Charlie Neon, Lead Developer, Active, 100.00%, TX)

row4

text

Row 4 values (comma-separated, 1 per column: e.g. Diana Prince, DevOps Engineer, Active, 99.95%, WA)

variant

select

Visual preset theme of the table

density

select

Cell padding density of rows

hoverable

boolean

Toggle state:

Highlight rows on mouse hover

striped

boolean

Toggle state:

Alternate row colors dynamically

bordered

boolean

Toggle state:

Add grid boundaries to all table cells

animateRows

boolean

Toggle state:

Trigger smooth entrance transitions for rows

Generated JSX

Source

import { CustomizableTable } from "nexoreui";

const headers = ["User","Role","Status","Uptime"];
const rows = [
  [
    "Alice Vance",
    "System Architect",
    "Active",
    "99.98%"
  ],
  [
    "Bob Marley",
    "Content Manager",
    "Offline",
    "94.12%"
  ],
  [
    "Charlie Neon",
    "Lead Developer",
    "Active",
    "100.00%"
  ],
  [
    "Diana Prince",
    "DevOps Engineer",
    "Active",
    "99.95%"
  ]
];

export default function TableDemo() {
  return (
    <CustomizableTable
      headers={headers}
      rows={rows} hoverable
    />
  );
}

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.

Glassmorphic active operations tracker
Team Member	Active Project	Progress	Status
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.

Nexore global developer leaderboard
Rank	Developer	Specialty	Uptime Score	XP Points
#1	ZE Zack Evans	Kernel dev	100.00%	12,402 XP
#2	LM Lucy Miller	UI Architect	99.94%	10,850 XP
#3	TR Toby Rix	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.

System logs live server matrix
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.

PreviousTabs

NextStepper

On This Page

Quick ActionsProject StudioNew Nexore Make (AI)Source on GitHub

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 boards

neon variantHighlighting key datasets, system status metrics, or log tables with neon primary outlines

compact densityPresenting dense financial records, large grids, or database queries where maximum data visibility is needed

striped formatImproving readability in wide tables containing numerous columns and values

Interactive Playground

Live CanvasInteractive

User	Role	Status	Uptime
AV Alice Vance	System Architect	Active	99.98%
BM Bob Marley	Content Manager	Offline	94.12%
CN Charlie Neon	Lead Developer	Active	100.00%
DP Diana Prince	DevOps Engineer	Active	99.95%

Controls(11)

headers

text

Custom table column headers (comma-separated: e.g. User, Role, Status, Uptime, State)

row1

text

Row 1 values (comma-separated, 1 per column: e.g. Alice Vance, System Architect, Active, 99.98%, CA)

row2

text

Row 2 values (comma-separated, 1 per column: e.g. Bob Marley, Content Manager, Offline, 94.12%, NY)

row3

text

Row 3 values (comma-separated, 1 per column: e.g. Charlie Neon, Lead Developer, Active, 100.00%, TX)

row4

text

Row 4 values (comma-separated, 1 per column: e.g. Diana Prince, DevOps Engineer, Active, 99.95%, WA)

variant

select

Visual preset theme of the table

density

select

Cell padding density of rows

hoverable

boolean

Toggle state:

Highlight rows on mouse hover

striped

boolean

Toggle state:

Alternate row colors dynamically

bordered

boolean

Toggle state:

Add grid boundaries to all table cells

animateRows

boolean

Toggle state:

Trigger smooth entrance transitions for rows

Generated JSX

Source

import { CustomizableTable } from "nexoreui";

const headers = ["User","Role","Status","Uptime"];
const rows = [
  [
    "Alice Vance",
    "System Architect",
    "Active",
    "99.98%"
  ],
  [
    "Bob Marley",
    "Content Manager",
    "Offline",
    "94.12%"
  ],
  [
    "Charlie Neon",
    "Lead Developer",
    "Active",
    "100.00%"
  ],
  [
    "Diana Prince",
    "DevOps Engineer",
    "Active",
    "99.95%"
  ]
];

export default function TableDemo() {
  return (
    <CustomizableTable
      headers={headers}
      rows={rows} hoverable
    />
  );
}

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.

Glassmorphic active operations tracker
Team Member	Active Project	Progress	Status
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.

Nexore global developer leaderboard
Rank	Developer	Specialty	Uptime Score	XP Points
#1	ZE Zack Evans	Kernel dev	100.00%	12,402 XP
#2	LM Lucy Miller	UI Architect	99.94%	10,850 XP
#3	TR Toby Rix	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.

System logs live server matrix
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.