@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.
84 lines (83 loc) • 6.44 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* Test file to verify row creation functionality
* This demonstrates the complete row creation implementation
*/
import { useState } from "react";
import { JsonTable } from "../components/JsonTable";
// Test data
const testData = [
{ id: 1, name: "John Doe", email: "john@example.com", age: 30 },
{ id: 2, name: "Jane Smith", email: "jane@example.com", age: 25 },
];
// Test component
export const RowCreationTest = () => {
const [data, setData] = useState(testData);
const [changes, setChanges] = useState([]);
const handleDataChange = (newData, dataChanges) => {
console.log("Data changed:", dataChanges);
setData(newData);
setChanges(dataChanges);
};
const handleRowAdd = (rowIndex, row) => {
console.log("Row added at index:", rowIndex, "Row data:", row);
};
const handleRowDelete = (rowIndex, row) => {
console.log("Row deleted at index:", rowIndex, "Row data:", row);
};
const handleFieldUpdate = (rowIndex, field, newValue, oldValue) => {
console.log("Field updated:", { rowIndex, field, newValue, oldValue });
};
const handleFieldDelete = (rowIndex, field, value) => {
console.log("Field deleted:", { rowIndex, field, value });
};
const handleBulkDelete = (rowIndices) => {
console.log("Bulk delete:", rowIndices);
};
const validationRules = [
{
field: "email",
validator: (value) => {
if (typeof value !== "string")
return false;
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
},
message: "Invalid email format",
},
{
field: "age",
validator: (value) => {
if (typeof value !== "number")
return false;
return value >= 18 && value <= 100;
},
message: "Age must be between 18 and 100",
},
];
return (_jsxs("div", { className: "p-6 space-y-6", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold text-gray-900 mb-2", children: "Row Creation Test" }), _jsx("p", { className: "text-gray-600", children: "Test the complete row creation functionality implementation" })] }), changes.length > 0 && (_jsxs("div", { className: "bg-yellow-50 border border-yellow-200 rounded-lg p-4", children: [_jsx("h3", { className: "font-medium text-yellow-800 mb-2", children: "Changes Made:" }), _jsx("ul", { className: "text-sm text-yellow-700 space-y-1", children: changes.map((change, index) => (_jsxs("li", { children: [change.type === "row_add" &&
`Row added at index ${change.rowIndex}`, change.type === "row_delete" &&
`Row deleted at index ${change.rowIndex}`, change.type === "field_update" &&
`Row ${change.rowIndex}, ${change.field}: ${change.oldValue} → ${change.newValue}`, change.type === "field_delete" &&
`Row ${change.rowIndex}, ${change.field} deleted`, change.type === "field_add" &&
`Row ${change.rowIndex}, ${change.field} added`] }, index))) })] })), _jsxs("div", { className: "bg-blue-50 border border-blue-200 rounded-lg p-4", children: [_jsx("h3", { className: "font-medium text-blue-800 mb-2", children: "Test Instructions:" }), _jsxs("ul", { className: "text-sm text-blue-700 space-y-1", children: [_jsx("li", { children: "1. Click the \"Add Row\" button to create a new row" }), _jsx("li", { children: "2. Edit the new row's fields by clicking on them" }), _jsx("li", { children: "3. Try deleting the new row using the delete button" }), _jsx("li", { children: "4. Check the console for event logs" }), _jsx("li", { children: "5. Verify changes are tracked in the changes summary above" })] })] }), _jsx("div", { className: "border border-gray-200 rounded-lg overflow-hidden", children: _jsx(JsonTable, { data: data, options: {
// Core features
enableSorting: true,
enableNavigation: true,
enablePagination: true,
showRowNumbers: true,
// Editing features
enableEditing: true,
enableRowDeletion: true,
enableFieldEditing: true,
enableFieldDeletion: true,
enableInlineEditing: true,
enableBulkOperations: true,
editMode: "inline",
validationRules,
// Pagination
pageSize: 10,
}, customRenderers: {
email: (value) => (_jsx("a", { href: `mailto:${value}`, className: "text-blue-600 hover:text-blue-800 underline", onClick: (e) => e.stopPropagation(), children: value })),
}, theme: "default", onDataChange: handleDataChange, onRowAdd: handleRowAdd, onRowDelete: handleRowDelete, onFieldUpdate: handleFieldUpdate, onFieldDelete: handleFieldDelete, onBulkDelete: handleBulkDelete }) }), _jsxs("div", { className: "bg-gray-50 border border-gray-200 rounded-lg p-4", children: [_jsx("h3", { className: "font-medium text-gray-800 mb-2", children: "Implementation Details:" }), _jsxs("div", { className: "text-sm text-gray-700 space-y-2", children: [_jsx("p", { children: "This test verifies the complete row creation implementation:" }), _jsxs("ul", { className: "list-disc list-inside space-y-1 ml-4", children: [_jsxs("li", { children: [_jsx("strong", { children: "DataChange Interface:" }), " Added \"row_add\" type"] }), _jsxs("li", { children: [_jsx("strong", { children: "useDataMutation Hook:" }), " Added addRow() function"] }), _jsxs("li", { children: [_jsx("strong", { children: "AddRowButton Component:" }), " UI for adding rows"] }), _jsxs("li", { children: [_jsx("strong", { children: "JsonTable Integration:" }), " onRowAdd event handler"] }), _jsxs("li", { children: [_jsx("strong", { children: "Change Tracking:" }), " Row additions are tracked"] }), _jsxs("li", { children: [_jsx("strong", { children: "Validation:" }), " New rows respect validation rules"] })] })] })] })] }));
};
export default RowCreationTest;