AwesomeTreeGrid

Enterprise-grade tree grid for React. A virtualized, KPI-focused hierarchy grid with inline edits, filtering, sorting, drag-reorder, CSV export, and multi-theme support — all styles are injected at runtime, so no CSS import is needed.

Features

• Virtualized rows — handles thousands of nodes smoothly with sticky headers/first column
• Expand / collapse — drill into any branch with fast, cached expansion state
• Filtering + search — global search plus per-column filters
• Sorting — sortable hierarchy name and metric/attribute columns
• Inline edits — double-click metric cells to edit and capture changes
• Drag reordering — reorder nodes by dragging rows
• CSV export — one-click export for the current grid view
• Themes — "midnight", "arctic", "forest"
• Self-contained styles — all styles are inline/injected at runtime
• ESM + CJS dual build — works in Vite, Next.js, CRA, and modern bundlers
• Zero runtime dependencies beyond React

Installation

npm install awesome-tree-grid
# or
yarn add awesome-tree-grid
# or
pnpm add awesome-tree-grid

Peer dependencies — React >= 18 and ReactDOM >= 18 must already be installed.

Quick Start

No CSS import needed — styles are injected automatically.

import AwesomeTreeGrid from "awesome-tree-grid";
import { SAMPLE_DATA } from "awesome-tree-grid/sample_data";

export default function App() {
  return (
    <div style={{ height: 680 }}>
      <AwesomeTreeGrid data={SAMPLE_DATA} />
    </div>
  );
}

Props

| Prop | Type | Default | Description | |---|---|---|---| | data | Array | SAMPLE_DATA | Flat node array. Takes precedence over dataUrl. | | dataUrl | string | "" | JSON file path or REST endpoint URL. Used when data is not provided. | | dataPath | string | "" | Optional dot-path to the array inside API responses. | | fetchOptions | object | {} | Fetch options for dataUrl requests. | | title | string | "Awesome Tree Grid" | Header title displayed above the grid. | | initialTheme | "midnight" \| "arctic" \| "forest" | "midnight" | Initial visual theme. | | onNodeEdit | (payload) => void | — | Callback fired on metric edit: { nodeId, key, value }. |

Data Format

Each node is a flat record with parent references:

{
  id: "north-america",
  parentId: null,
  nodeName: "North America",
  attributes: { status: "Active", owner: "Ops" },
  metrics: { revenue: 1284000, margin: 0.42 }
}

Examples

Example 1 — Basic grid (sample data)

import AwesomeTreeGrid from "awesome-tree-grid";
import { SAMPLE_DATA } from "awesome-tree-grid/sample_data";

export default function App() {
  return (
    <div style={{ height: 680 }}>
      <AwesomeTreeGrid data={SAMPLE_DATA} />
    </div>
  );
}

Example 2 — Custom title and theme (sample data)

import AwesomeTreeGrid from "awesome-tree-grid";
import { SAMPLE_DATA } from "awesome-tree-grid/sample_data";

export default function App() {
  return (
    <div style={{ height: 640 }}>
      <AwesomeTreeGrid
        data={SAMPLE_DATA}
        title="Sample KPI Tree"
        initialTheme="forest"
      />
    </div>
  );
}

Example 3 — Capture metric edits (sample data)

import AwesomeTreeGrid from "awesome-tree-grid";
import { SAMPLE_DATA } from "awesome-tree-grid/sample_data";

export default function App() {
  const handleEdit = ({ nodeId, key, value }) => {
    console.log("Edited", nodeId, key, value);
  };

  return (
    <div style={{ height: 640 }}>
      <AwesomeTreeGrid data={SAMPLE_DATA} onNodeEdit={handleEdit} />
    </div>
  );
}

Example 4 — Extended records demo

import AwesomeTreeGrid from "awesome-tree-grid";
import { EXTENDED_RECORDS } from "awesome-tree-grid/extended_records";

export default function App() {
  return (
    <div style={{ height: 720 }}>
      <AwesomeTreeGrid data={EXTENDED_RECORDS} title="Extended Records Demo" />
    </div>
  );
}

Interactions

| Interaction | Action | |---|---| | Click expand/collapse | Expand or collapse a node’s children | | Search input | Filter nodes across name and attributes | | Column filter | Filter by specific attribute/metric values | | Click column header | Sort by name, attribute, or metric | | Double-click metric | Edit a metric value inline | | Drag row | Reorder nodes by dragging | | Context menu | Drill, edit, copy, or remove node actions | | Export menu | Download current rows as CSV |

License

MIT