virtualized-tree-react

Virtualized Tree 🌳

virtualized-tree is a highly customizable React component for rendering large datasets in a tree structure with virtualization for performance. It includes features like expandable/collapsible nodes and customizable sorting.

---

Features

• Virtualized Rendering: Efficiently renders only the visible nodes, making it ideal for large datasets.
• Expandable/Collapsible Nodes: Dynamically expand or collapse tree nodes.
• Customizable Sorting: Sort nodes alphabetically or by value in ascending/descending order.
• Lightweight: Built with react-window for optimal performance.
• Customizable Styles: Fully customizable via TreeStyles.

---

Installation

Install the package using npm or yarn:

npm install virtualized-tree-react

or

yarn add virtualized-tree-react

---

Usage

Basic Example

import React from 'react';
import { VirtualizedTree } from 'virtualized-tree-react';

const data = {
  "id": "0b",
  "name": "person",
  "value": 10000,
  "children": [
    {
      "id": "c7107b09-f1bb-4ce4-8532-4da39c508c0f",
      "name": "birthday",
      "value": 10000,
      "children": [
        {
          "id": "82f3f6fb-1359-49be-a0a3-17bcc04be935",
          "name": "2020-06-22 17:51:34",
          "value": 1
        },
        {
          "id": "8a0d098f-7fa6-4610-92d6-1ad40d1717e8",
          "name": "2020-07-04 11:31:48",
          "value": 1
        }
      ]
    },
    {
      "id": "58f64988-9e34-4cc0-8635-47d205f5d691",
      "name": "location",
      "value": 10000,
      "children": [
        {
          "id": "3d851322-16ee-43c1-8fbe-3294b41feba0",
          "name": "-75.449, 29.765",
          "value": 1
        },
        {
          "id": "c4eb9908-21f2-4b00-8deb-8584c4b89207",
          "name": "-62.0028, 74.1975",
          "value": 1
        },
        {
          "id": "3c984220-7a46-40cf-9dcc-857bfd9b2312",
          "name": "-7.7063, -157.832",
          "value": 1
        }
      ]
    }
  ]
};

export const App = () => (
  <VirtualizedTree
    data={data}
    label="name"
    countKey="value"
    onNodeClick={(node) => console.log('Node clicked:', node)}
  />
);

---

Props

Prop	Type	Required	Default	Description
data	TreeNode	Yes	-	The root node of the tree.
label	string	Yes	-	The key used to display the label of each node.
children	string	No	"children"	The key that contains child nodes.
countKey	string	No	-	The key used to display node-specific values (e.g., counts).
className	string	No	-	Custom CSS classes for the tree container.
itemSize	number	No	40	The height of each tree node in pixels.
height	number	No	400	The height of the tree container in pixels.
onNodeClick	(node: TreeNode) => void	No	-	Callback triggered when a node is clicked.
styles	TreeStyles	No	-	Custom styles for the tree and its elements.

---

Advanced Features

You can pass a styles prop to customize the tree's appearance. Example:

const styles = {
  container: "border shadow-lg",
  row: "hover:bg-gray-200",
  toggleButton: "text-blue-500",
  label: "font-semibold",
  value: "text-gray-600",
  icons: {
    expanded: <ChevronDown />,
    collapsed: <ChevronRight />,
  },
};

License

MIT © Taha

---

Links

• GitHub Repository
• Issues