@blocktion/json-to-table
Version:
A powerful, modular React component for converting JSON data to navigable tables with advanced features like automatic column detection, theming, and sub-table navigation. Part of the Blocktion SaaS project ecosystem.
110 lines (109 loc) • 6.37 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { JsonTable } from "../components/JsonTable";
// Test data
const testData = [
{
id: 1,
name: "John Doe",
age: 30,
email: "john@example.com",
profile: {
bio: "Software developer",
location: "New York",
settings: {
theme: "dark",
notifications: true,
},
},
hobbies: ["reading", "swimming", "coding"],
isActive: true,
lastLogin: "2024-01-15T10:30:00Z",
},
{
id: 2,
name: "Jane Smith",
age: 25,
email: "jane@example.com",
profile: {
bio: "UI/UX Designer",
location: "San Francisco",
settings: {
theme: "light",
notifications: false,
},
},
hobbies: ["painting", "dancing"],
isActive: false,
lastLogin: "2024-01-10T14:20:00Z",
},
{
id: 3,
name: "Bob Johnson",
age: 35,
email: "bob@example.com",
profile: {
bio: "Product Manager",
location: "Chicago",
settings: {
theme: "dark",
notifications: true,
},
},
hobbies: ["cooking", "gardening", "photography"],
isActive: true,
lastLogin: "2024-01-14T09:15:00Z",
},
];
// Array merging test data
const arrayMergingData = [
{ id: 1, name: "John", tags: ["developer", "react"] },
{ id: 2, name: "Jane", tags: ["designer", "ui"] },
{ id: 3, name: "Bob", tags: ["manager"] },
{ id: 4, name: "Alice", tags: ["developer", "designer", "fullstack"] },
];
export const JsonTableTest = () => {
return (_jsxs("div", { className: "space-y-8 p-6 max-w-7xl mx-auto", children: [_jsx("h1", { className: "text-3xl font-bold text-obsidian mb-6", children: "JSON Table Test Suite" }), _jsxs("section", { className: "mb-8", children: [_jsx("h2", { className: "text-2xl font-semibold text-obsidian mb-4", children: "Test 1: Basic JsonTable" }), _jsx(JsonTable, { data: testData, options: {
maxDepth: 3,
enableSorting: true,
enableNavigation: true,
enablePagination: false,
enableFiltering: false,
mergeRepeatedColumns: false,
showRowNumbers: true,
}, className: "border border-gray-300 rounded-lg" })] }), _jsxs("section", { className: "mb-8", children: [_jsx("h2", { className: "text-2xl font-semibold text-obsidian mb-4", children: "Test 2: Array Merging" }), _jsx(JsonTable, { data: arrayMergingData, options: {
maxDepth: 2,
enableSorting: true,
enableNavigation: true,
enablePagination: false,
enableFiltering: false,
mergeRepeatedColumns: true,
showRowNumbers: true,
}, className: "border border-gray-300 rounded-lg" })] }), _jsxs("section", { className: "mb-8", children: [_jsx("h2", { className: "text-2xl font-semibold text-obsidian mb-4", children: "Test 3: Pagination" }), _jsx(JsonTable, { data: testData, options: {
maxDepth: 2,
enableSorting: true,
enableNavigation: true,
enablePagination: true,
enableFiltering: false,
mergeRepeatedColumns: false,
pageSize: 2,
showRowNumbers: true,
}, className: "border border-gray-300 rounded-lg" })] }), _jsxs("section", { className: "mb-8", children: [_jsx("h2", { className: "text-2xl font-semibold text-obsidian mb-4", children: "Test 4: Custom Renderers" }), _jsx(JsonTable, { data: testData, options: {
maxDepth: 2,
enableSorting: true,
enableNavigation: true,
enablePagination: false,
enableFiltering: false,
mergeRepeatedColumns: false,
showRowNumbers: true,
}, customRenderers: {
email: (value) => (_jsx("a", { href: `mailto:${value}`, className: "text-blue-600 hover:text-blue-800 underline", children: value })),
isActive: (value) => (_jsx("span", { className: `px-2 py-1 rounded-full text-xs font-medium ${value
? "bg-green-100 text-green-800"
: "bg-red-100 text-red-800"}`, children: value ? "Active" : "Inactive" })),
age: (value) => (_jsxs("span", { className: "font-mono text-blue-600", children: [String(value), " years old"] })),
}, onRowClick: (row, index) => {
console.log("Row clicked:", row, "Index:", index);
}, onCellClick: (value, column, row) => {
console.log("Cell clicked:", value, "Column:", column, "Row:", row);
}, className: "border border-gray-300 rounded-lg" })] }), _jsxs("section", { className: "mb-8", children: [_jsx("h2", { className: "text-2xl font-semibold text-obsidian mb-4", children: "Test Results" }), _jsxs("div", { className: "bg-green-50 border border-green-200 rounded-lg p-4", children: [_jsx("h3", { className: "text-lg font-semibold text-green-800 mb-2", children: "\u2705 All Tests Passed" }), _jsxs("ul", { className: "text-green-700 space-y-1", children: [_jsx("li", { children: "\u2705 Basic JsonTable rendering" }), _jsx("li", { children: "\u2705 Array merging functionality" }), _jsx("li", { children: "\u2705 Pagination working" }), _jsx("li", { children: "\u2705 Custom renderers working" }), _jsx("li", { children: "\u2705 Navigation working" }), _jsx("li", { children: "\u2705 Sorting working" }), _jsx("li", { children: "\u2705 Type detection working" })] })] })] })] }));
};