TableNex

Examples

Explore TableNex in action with practical examples.

Basic Table

Simple static table. keyField optional with 'id'


repId
salesRep
region
totalSales
dealsClosed
SR001
Michael Carter
North America
125400
18
SR002
Emily Davis
Europe
98000
15

Hiding Key Column

Table with hidden key column


taskName
assignedTo
status
dueDate
Design Database Schema
Alex Johnson
In Progress
2025-04-15
Implement API Endpoints
Emily Davis
Completed
2025-04-10

Custom Styles

Basic table with custom styles for spacing, borders, and font size


sku
product
category
stock
price
PRD-4567
Wireless Headphones
Electronics
142
89.99
PRD-8901
Leather Notebook
Stationery
75
12.5

Custom Columns

Basic table with custom column data


Employee ID
Employee
Department
Contact
EMP-001
Michael Carter
Sales
415-555-1234
EMP-002
Sophia Nguyen
Engineering
510-555-5678

Row Selection

Table with multi-select checkboxes. Tracks selected rows with state.


Selected: 0 tasks

Task ID
Task Name
Assigned To
Due Date
T-001
Update Website Banner
Michael Carter
2025-04-10
T-002
Review Q1 Sales Report
Sophia Nguyen
2025-04-15

Fixed or Sticky Column

Table with sticky columns. Fixed columns remain visible while scrolling horizontally.


orderId
customer
product
quantity
unitPrice
total
orderDate
status
tracking
deliveryDate
ORD_001
Michael Carter
Wireless Headphones
2
89.99
179.98
2025-03-25
Shipped
1Z9999W999999999
2025-03-28
ORD_002
Sophia Nguyen
Leather Notebook
5
12.5
62.5
2025-03-26
Processing
N/A
Pending

Responsive Table

Table that adapts to smaller screens. Responsive behavior enabled.


projectId
project
lead
status
deadline
PRJ-001
Website Redesign
Michael Carter
In Progress
2025-05-01
PRJ-002
Mobile App Launch
Sophia Nguyen
Completed
2025-03-30
projectId
PRJ-001
project
Website Redesign
lead
Michael Carter
status
In Progress
deadline
2025-05-01
projectId
PRJ-002
project
Mobile App Launch
lead
Sophia Nguyen
status
Completed
deadline
2025-03-30

Styled Rows and Columns

Table with styled rows and columns. Custom styles applied to specific columns and rows.


Ticket ID
Issue
Priority
Status
TCK-001
Login Failure
High
Open
TCK-002
Payment Error
Medium
Resolved

Sorting Rows

Table with sorting. Rows can be sorted by clicking on column headers.


Product Name
PRD-001
Wireless Headphones
120
PRD-002
Leather Notebook
85
PRD-003
Smart Watch
150

Empty Table

Table with no data. Empty table displayed.


id
name
age
phone
address
city
No data available

Expanded Rows

Table with expanded rows. Rows can be expanded to show additional details.


Details
Appointment ID
Patient
Date
Status
APT-001
Michael Carter
2025-04-05
Confirmed
APT-002
Sophia Nguyen
2025-04-06
Pending
APT-003
James Patel
2025-04-07
Completed
APT-004
Emma Davis
2025-04-08
Cancelled

Search Row

Table with search functionality. Rows can be filtered by typing in the search box.


Application ID
Applicant
Position
Status
APP-001
Michael Carter
Software Engineer
Under Review
APP-002
Sophia Nguyen
Product Manager
Interview Scheduled
APP-003
James Patel
Data Analyst
Rejected


PreviousTroubleshooting