@blocktion/json-to-table

A powerful, modular React component for converting JSON data to navigable tables with advanced features like automatic column detection, theming, array merging, type detection, and sub-table navigation. This component is part of the Blocktion platform ecosystem.

Note: This component was originally developed for the Blocktion platform - an intelligent workflow automation platform. We've open-sourced this component for anyone to use in their React projects. Read the root folder README to understand what Blocktion is.

✨ Features

Core Features

• 🚀 Automatic Column Detection: Automatically generates columns from any object structure
• 🔗 Nested Navigation: Click on cells to navigate into nested objects and arrays as separate sub-tables
• 📊 Smart Sorting: Click column headers to sort data with intelligent type detection
• 🔍 Advanced Filtering: Filter data with multiple operators and type-aware filtering
• 📄 Pagination: Built-in pagination for large datasets
• 🔄 Array Merging: Automatically merges repeated columns into arrays
• 🎯 Type Detection: Automatically detects and handles different data types
• 🍞 Breadcrumb Navigation: Navigate back to previous levels using breadcrumbs
• 🎨 Customizable Rendering: Custom cell renderers for any column
• 📱 Responsive Design: Horizontal scrolling for large datasets
• 🔧 TypeScript Support: Fully typed components and utilities
• 🎭 Multiple Themes: Built-in theme support
• ⚡ Performance Optimized: Memoized operations and efficient rendering

🆕 Editing Features

• ✏️ Inline Editing: Click any cell to edit it directly in the table
• 🗑️ Row Management: Add, delete individual rows or perform bulk operations
• 🔧 Field Operations: Add, update, or delete specific fields
• ✅ Real-time Validation: Built-in validation system with custom rules
• 📝 Change Tracking: Complete audit trail of all modifications
• 💾 Save/Discard: Save changes or discard them with confirmation
• 🎯 Type-specific Editors: Different editors for text, numbers, booleans, dates, etc.
• ⌨️ Keyboard Navigation: Full keyboard support for editing workflows
• 🔍 Bulk Operations: Select and operate on multiple rows simultaneously
• 🎨 Visual Feedback: Clear indicators for editable fields and validation errors

📦 Installation

npm install @blocktion/json-to-table

🏗️ Modular Usage

This package is designed with modularity in mind. You can import only what you need:

// Main component
import { JsonTable } from "@blocktion/json-to-table";

// Individual components
import {
  TableContainer,
  TableHeader,
  TableBody,
} from "@blocktion/json-to-table/components";

// Hooks
import {
  useTableData,
  useSorting,
  usePagination,
} from "@blocktion/json-to-table/hooks";

// Themes
import {
  defaultTheme,
  darkTheme,
  minimalTheme,
} from "@blocktion/json-to-table/themes";

// Utilities
import { ArrayAnalyzer, ObjectUtils } from "@blocktion/json-to-table/utils";

🚀 Quick Start

Basic Table

import { JsonTable } from "@blocktion/json-to-table";

const data = [
  { id: 1, name: "John", age: 30, email: "[email protected]" },
  { id: 2, name: "Jane", age: 25, email: "[email protected]" },
];

function App() {
  return (
    <JsonTable
      data={data}
      title="Users"
      options={{
        maxDepth: 2,
        enableSorting: true,
        enableNavigation: true,
      }}
    />
  );
}

Editable Table with Full Editing Capabilities

import React, { useState } from "react";
import { JsonTable } from "@parallaxsolutions/json-to-table";

const data = [
  {
    id: 1,
    name: "John Doe",
    email: "[email protected]",
    age: 30,
    isActive: true,
    salary: 75000,
    department: "Engineering",
    tags: ["developer", "react"],
  },
];

function EditableApp() {
  const [tableData, setTableData] = useState(data);

  const handleDataChange = (newData, changes) => {
    console.log("Data changed:", changes);
    setTableData(newData);
  };

  const validationRules = [
    {
      field: "email",
      validator: (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
      message: "Invalid email format",
    },
    {
      field: "age",
      validator: (value) => value >= 18 && value <= 100,
      message: "Age must be between 18 and 100",
    },
  ];

  return (
    <JsonTable
      data={tableData}
      title="Editable Users Table"
      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,
      }}
      onDataChange={handleDataChange}
      onRowAdd={(rowIndex, row) => console.log("Row added:", rowIndex)}
      onRowDelete={(rowIndex, row) => console.log("Row deleted:", rowIndex)}
      onFieldUpdate={(rowIndex, field, newValue, oldValue) =>
        console.log("Field updated:", { rowIndex, field, newValue, oldValue })
      }
      customRenderers={{
        email: (value) => (
          <a href={`mailto:${value}`} className="text-blue-600 underline">
            {value}
          </a>
        ),
        isActive: (value) => (
          <span className={value ? "text-green-600" : "text-red-600"}>
            {value ? "Active" : "Inactive"}
          </span>
        ),
      }}
    />
  );
}

Advanced Table with All Features

import { JsonTable } from "@blocktion/json-to-table";

const data = [
  {
    id: 1,
    name: "John Doe",
    profile: {
      email: "[email protected]",
      settings: { theme: "dark", notifications: true },
    },
    hobbies: ["reading", "swimming"],
    isActive: true,
    lastLogin: "2024-01-15T10:30:00Z",
  },
];

function App() {
  return (
    <JsonTable
      data={data}
      title="Advanced Users Table"
      options={{
        maxDepth: 3,
        enableSorting: true,
        enableNavigation: true,
        enablePagination: true,
        enableFiltering: true,
        mergeRepeatedColumns: true,
        pageSize: 10,
        showRowNumbers: true,
      }}
      onRowClick={(row, index) => console.log("Row clicked:", row)}
      onCellClick={(value, column, row) => console.log("Cell clicked:", value)}
      customRenderers={{
        email: (value) => (
          <a href={`mailto:${value}`} className="text-blue-600 underline">
            {value}
          </a>
        ),
        isActive: (value) => (
          <span className={value ? "text-green-600" : "text-red-600"}>
            {value ? "Active" : "Inactive"}
          </span>
        ),
      }}
    />
  );
}

📚 API Reference

JsonTable Props

| Prop | Type | Default | Description | | ----------------- | ------------------------------------------------------------------- | -------------- | ---------------------------------------- | | data | unknown[] | - | Array of objects to display in the table | | title | string | "Data Table" | Title displayed above the table | | className | string | "" | Additional CSS classes | | options | TableOptions | {} | Table configuration options | | theme | 'default' \| 'minimal' \| 'dark' | 'default' | Theme for the table | | onRowClick | (row: unknown, index: number) => void | - | Callback when a row is clicked | | onCellClick | (value: unknown, column: Column, row: unknown) => void | - | Callback when a cell is clicked | | customRenderers | Record<string, (value: unknown, row: unknown) => React.ReactNode> | {} | Custom cell renderers |

TableOptions

| Option | Type | Default | Description | | ---------------------- | --------- | ------- | ------------------------------------------- | | maxDepth | number | 2 | Maximum depth for nested object exploration | | enableSorting | boolean | true | Enable column sorting | | enableFiltering | boolean | false | Enable data filtering | | enablePagination | boolean | false | Enable pagination | | enableNavigation | boolean | true | Enable sub-table navigation | | mergeRepeatedColumns | boolean | false | Merge repeated columns into arrays | | pageSize | number | 50 | Number of rows per page | | showRowNumbers | boolean | false | Show row numbers | | showColumnCount | boolean | true | Show column count | | showRowCount | boolean | true | Show row count |

🎨 Styling

The component uses Tailwind CSS classes. Make sure Tailwind CSS is available in your project for proper styling.

Custom Themes

<JsonTable
  data={data}
  theme="dark" // or "minimal"
  className="custom-table"
/>

Custom Cell Renderers

<JsonTable
  data={data}
  customRenderers={{
    status: (value) => (
      <span
        className={`badge ${value === "active" ? "badge-success" : "badge-error"}`}
      >
        {value}
      </span>
    ),
    avatar: (value) => (
      <img src={value} alt="Avatar" className="w-8 h-8 rounded-full" />
    ),
  }}
/>

🔧 Advanced Usage

Array Merging

When mergeRepeatedColumns is enabled, the table will automatically merge repeated column values into arrays:

const data = [
  { id: 1, name: "John", tags: ["developer"] },
  { id: 2, name: "Jane", tags: ["designer"] },
  { id: 3, name: "Bob", tags: ["manager"] },
  { id: 4, name: "Alice", tags: ["developer", "designer"] },
];

<JsonTable data={data} options={{ mergeRepeatedColumns: true }} />;

Type Detection

The table automatically detects data types and provides appropriate sorting and filtering:

• Strings: Text-based sorting and filtering
• Numbers: Numeric sorting and comparison
• Booleans: Boolean sorting
• Dates: Date-based sorting and filtering
• Objects: Navigation to sub-tables
• Arrays: Navigation to sub-tables

Filtering

<JsonTable
  data={data}
  options={{ enableFiltering: true }}
  // Filtering is handled internally, but you can access filter state
  onFilterChange={(filters) => console.log("Filters changed:", filters)}
/>

🚀 Performance

The component is optimized for performance with:

• Memoized Operations: Expensive operations are memoized to prevent unnecessary recalculations
• Efficient Rendering: Only re-renders when necessary
• Virtual Scrolling: For very large datasets (coming soon)
• Lazy Loading: Nested data is loaded on demand

🏢 About Blocktion

This package is part of the Blocktion platform - an intelligent workflow automation platform that enables you to create, manage, and execute complex workflows through a powerful combination of visual design and advanced orchestration.

Blocktion Platform

Blocktion is a sophisticated, enterprise-grade workflow automation platform that transforms complex automation challenges into simple, visual workflows. This JSON-to-table component was originally developed for Blocktion's data exploration and visualization features and is now available to the open-source community.

Read the root folder README to learn more about Blocktion's full capabilities, including:

• Visual workflow designer with drag-and-drop interface
• Advanced block system with rich integrations (Gmail, Twitter, AI/ML services)
• Intelligent execution engine with path optimization
• Real-time monitoring and enterprise security features

🤝 Contributing

We welcome contributions from the community! Please feel free to:

• Submit bug reports and feature requests
• Fork the repository and submit pull requests
• Improve documentation
• Add tests and examples

Development Setup

git clone https://github.com/blocktion/json-to-table.git
cd json-to-table
npm install
npm run dev

📄 License

MIT License - see LICENSE file for details.

🔗 Related

• Blocktion Platform - The main workflow automation platform
• React
• TypeScript
• Tailwind CSS

📞 Support

For support, questions, or business inquiries:

• Email: [email protected]
• GitHub Issues: Create an issue
• Website: blocktion.io