dynamic-table

This is dynamic nested data visualize app

Node version

20.10.0

Yarn version

1.22.21

For install node_modules

yarn

For build project

yarn build

For run project

yarn dev

For run stylelint

yarn stylelint

For fix stylelint errors

yarn stylelint-fix

For run eslint

yarn eslint

For fix eslint

yarn eslint-fix

Table Visualizer

A React component to visualize complex JSON data as a table.

Installation

npm install table-visualizer
# or
yarn add table-visualizer

Usage

import React from 'react';
import { TableVisualizer, TableNode } from 'table-visualizer';

const data: TableNode[] = [
  // ... your data structure ...
];

export default function App() {
  return (
    <TableVisualizer
      data={data}
      className="my-table"
      style={{ border: '2px solid red' }}
      cellRenderer={(cell, rowIndex, colIndex) => <span>{cell.name}</span>}
      headerRenderer={(header, depth, index) => <b>{header.name}</b>}
      onCellClick={(cell, rowIndex, colIndex) => alert(cell.name)}
      onHeaderClick={(header, depth, index) => alert(header.name)}
      theme={{ headerBg: '#eee', cellBg: '#fff', borderColor: '#ccc' }}
      rowClassName={(row, rowIndex) => (rowIndex % 2 === 0 ? 'even' : 'odd')}
      cellClassName={(cell, rowIndex, colIndex) => 'my-cell'}
      headerClassName={(header, depth, index) => 'my-header'}
      rowStyle={(row, rowIndex) => ({
        background: rowIndex % 2 ? '#fafafa' : '#fff',
      })}
      cellStyle={(cell, rowIndex, colIndex) => ({ color: 'blue' })}
      headerStyle={(header, depth, index) => ({ color: 'red' })}
    />
  );
}

Props

| Prop | Type | Required | Description | | ----------------- | --------------------------------------------- | -------- | ------------------------------------------- | | data | TableNode[] | Yes | The data to visualize as a table. | | className | string | No | Custom class for the table. | | style | CSSProperties | No | Inline styles for the table. | | theme | Theme | No | Theme object for CSS variables. | | cellRenderer | (cell, rowIndex, colIndex) => ReactNode | No | Custom cell renderer. | | headerRenderer | (header, depth, index) => ReactNode | No | Custom header renderer. | | onCellClick | (cell, rowIndex, colIndex) => void | No | Cell click handler. | | onHeaderClick | (header, depth, index) => void | No | Header click handler. | | rowClassName | (row, rowIndex) => string | No | Function to set class for each row. | | cellClassName | (cell, rowIndex, colIndex) => string | No | Function to set class for each cell. | | headerClassName | (header, depth, index) => string | No | Function to set class for each header cell. | | rowStyle | (row, rowIndex) => CSSProperties | No | Function to set style for each row. | | cellStyle | (cell, rowIndex, colIndex) => CSSProperties | No | Function to set style for each cell. | | headerStyle | (header, depth, index) => CSSProperties | No | Function to set style for each header cell. |

Data Structure

See src/utils/helpers.ts for the TableNode type definition.

Development

• yarn dev to run the demo app
• yarn build to build the npm package

MIT License