@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.
154 lines (153 loc) • 8.14 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { JsonTable } from "../components/JsonTable";
import { ThemeProvider } from "../styles/theme-provider";
// Example data for demonstrations
const sampleData = [
{
id: 1,
name: "John Doe",
age: 30,
email: "john@example.com",
address: {
street: "123 Main St",
city: "New York",
country: "USA",
},
hobbies: ["reading", "swimming", "coding"],
isActive: true,
lastLogin: "2024-01-15T10:30:00Z",
},
{
id: 2,
name: "Jane Smith",
age: 25,
email: "jane@example.com",
address: {
street: "456 Oak Ave",
city: "Los Angeles",
country: "USA",
},
hobbies: ["painting", "dancing"],
isActive: false,
lastLogin: "2024-01-10T14:20:00Z",
},
{
id: 3,
name: "Bob Johnson",
age: 35,
email: "bob@example.com",
address: {
street: "789 Pine Rd",
city: "Chicago",
country: "USA",
},
hobbies: ["cooking", "gardening", "photography"],
isActive: true,
lastLogin: "2024-01-14T09:15:00Z",
},
];
export const ImprovedJsonTableExamples = () => {
return (_jsxs("div", { style: { padding: "2rem", maxWidth: "1200px", margin: "0 auto" }, children: [_jsx("h1", { style: { fontSize: "2rem", fontWeight: "bold", marginBottom: "2rem" }, children: "Improved JSON Table Examples" }), _jsxs("section", { style: { marginBottom: "3rem" }, children: [_jsx("h2", { style: {
fontSize: "1.5rem",
fontWeight: "600",
marginBottom: "1rem",
}, children: "Default Theme" }), _jsx(JsonTable, { data: sampleData, theme: "default", options: {
maxDepth: 3,
enableSorting: true,
enableNavigation: true,
enablePagination: true,
pageSize: 2,
showRowNumbers: true,
}, customRenderers: {
email: (value) => (_jsx("a", { href: `mailto:${value}`, style: {
color: "#3b82f6",
textDecoration: "underline",
}, children: value })),
isActive: (value) => (_jsx("span", { style: {
padding: "0.25rem 0.5rem",
borderRadius: "9999px",
fontSize: "0.75rem",
fontWeight: "500",
backgroundColor: value ? "#dcfce7" : "#fef2f2",
color: value ? "#166534" : "#991b1b",
}, children: value ? "Active" : "Inactive" })),
} })] }), _jsxs("section", { style: { marginBottom: "3rem" }, children: [_jsx("h2", { style: {
fontSize: "1.5rem",
fontWeight: "600",
marginBottom: "1rem",
}, children: "Dark Theme" }), _jsx("div", { style: {
backgroundColor: "#111827",
padding: "1rem",
borderRadius: "0.5rem",
}, children: _jsx(JsonTable, { data: sampleData, theme: "dark", options: {
maxDepth: 2,
enableSorting: true,
enableNavigation: true,
enablePagination: false,
showRowNumbers: false,
} }) })] }), _jsxs("section", { style: { marginBottom: "3rem" }, children: [_jsx("h2", { style: {
fontSize: "1.5rem",
fontWeight: "600",
marginBottom: "1rem",
}, children: "Minimal Theme" }), _jsx(JsonTable, { data: sampleData, theme: "minimal", options: {
maxDepth: 2,
enableSorting: true,
enableNavigation: false,
enablePagination: false,
showRowNumbers: false,
} })] }), _jsxs("section", { style: { marginBottom: "3rem" }, children: [_jsx("h2", { style: {
fontSize: "1.5rem",
fontWeight: "600",
marginBottom: "1rem",
}, children: "Custom Theme Provider" }), _jsx(ThemeProvider, { theme: "dark", children: _jsx(JsonTable, { data: sampleData, options: {
maxDepth: 3,
enableSorting: true,
enableNavigation: true,
enablePagination: true,
pageSize: 2,
showRowNumbers: true,
}, onRowClick: (row, index) => {
console.log("Row clicked:", row, "at index:", index);
}, onCellClick: (value, column, row) => {
console.log("Cell clicked:", {
value,
column: column.displayName,
row,
});
} }) })] }), _jsxs("section", { style: { marginBottom: "3rem" }, children: [_jsx("h2", { style: {
fontSize: "1.5rem",
fontWeight: "600",
marginBottom: "1rem",
}, children: "Advanced Features" }), _jsx(JsonTable, { data: sampleData, theme: "default", options: {
maxDepth: 4,
enableSorting: true,
enableNavigation: true,
enablePagination: true,
enableFiltering: true,
mergeRepeatedColumns: true,
pageSize: 2,
showRowNumbers: true,
showColumnCount: true,
showRowCount: true,
}, customRenderers: {
name: (value, row) => (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [_jsx("div", { style: {
width: "32px",
height: "32px",
borderRadius: "50%",
backgroundColor: "#e5e7eb",
display: "flex",
alignItems: "center",
justifyContent: "center",
fontSize: "0.875rem",
fontWeight: "600",
color: "#374151",
}, children: value.charAt(0).toUpperCase() }), _jsx("span", { style: { fontWeight: "500" }, children: value })] })),
age: (value) => (_jsxs("span", { style: {
padding: "0.25rem 0.5rem",
backgroundColor: "#f3f4f6",
borderRadius: "0.25rem",
fontSize: "0.875rem",
fontWeight: "500",
}, children: [String(value), " years"] })),
} })] })] }));
};