Dynamic JSON Table Test

This page demonstrates the dynamic JSON table component with different data structures.

💡 Try clicking the "Transpose" button to swap rows and columns for a different view!

Simple Array Data

Basic array of objects - ideal for table display with flat columns.

User Records

5 rows
Field
Record 1
Record 2
Created at
Jan 15, 2024, 10:30 AM
Jan 16, 2024, 02:20 PM
Email
john@example.com
jane@example.com
Id
1
2
Name
John Doe
Jane Smith
Age
30
25
Showing 5 of 5 rows across 3 columns

Complex Nested Data

Array with deeply nested objects and arrays - demonstrates flattening and expandable cells.

Invoice Data

12 rows
Field
Record 1
Record 2
Customer → Name
Acme Corp
Tech Solutions
Due date
Feb 15, 2024
Feb 20, 2024
Invoice id
INV-001
INV-002
Customer → Address → City
New York
San Francisco
Customer → Address → Street
123 Main St
456 Oak Ave
Customer → Address → Zip
10001
94102
Customer → Contacts
2 items
1 item
Items
2 items
1 item
Payment status
paid
pending
Totals → Subtotal
109.97
299.99
Totals → Tax
10
27
Totals → Total
119.97
326.99
Showing 12 of 12 rows across 3 columns

Single Object Data

Non-array data converted to single-row table format.

Bank Statement

8 rows
Field
Record 1
Bank name
First National Bank
Statement period → End date
Jan 31, 2024
Statement period → Start date
Jan 1, 2024
Account number
****1234
Balance → Closing
3794.58
Balance → Opening
1500
Document type
bank_statement
Transactions
3 items
Showing 8 of 8 rows across 2 columns

Empty Data

Demonstrates empty state handling.

No Data Available

There is no data to display in the table.