Overview

The TreeDropDownList component is a customizable dropdown that displays hierarchical data in a tree structure. It supports features like searching, clearing selection, and displaying icons.

Import

import TreeDropDownList from "@components/tree-drop-down-list/TreeDropDownList";

Usage

import React from "react";
import { FolderFilled } from "@tag/tag-icons";
import TreeDropDownList from "./TreeDropDownList";

const TreeDropDownListDemo = () => {
  const data = [
    {
      id: 1,
      name: "Parent 1",
      children: [
        {
          id: 2,
          name: "Child 1",
          children: [{ id: 3, name: "Grandchild 1" }],
        },
      ],
    },
    {
      id: 4,
      name: "Parent 2",
      children: [
        {
          id: 5,
          name: "Child 2",
          children: [{ id: 6, name: "Grandchild 2" }],
        },
      ],
    },
  ];
  return (
    <TreeDropDownList
      data={data}
      textField="name"
      valueField="id"
      childrenField="children"
      onSelect={(value) => console.log("Selected:", value)}
      defaultValue={1}
      icon={<FolderFilled />}
      clearButton={true}
      disabled={false}
      readOnly={false}
      searchPlaceholder="Search items..."
    />
  );
};

export default TreeDropDownListDemo;

Result

Props

Prop	Type	Default	Description
data	Array	Required	The hierarchical data structure to display in the dropdown
onSelect	Function	-	Callback function called when an item is selected
defaultValue	any	-	The default selected value
textField	string	Required	The field name to display in the dropdown
valueField	string	Required	The field name to use as the value
childrenField	string	Required	The field name containing child items
icon	ReactNode	-	Optional icon to display next to the selected value
clearButton	boolean	false	Whether to show a clear button
disabled	boolean	false	Whether the dropdown is disabled
readOnly	boolean	false	Whether the dropdown is read-only
searchPlaceholder	string	""	Placeholder text for the search input

Features

• Hierarchical Display: Shows data in a tree structure with expandable/collapsible nodes
• Search Functionality: Allows filtering items through a search input
• Clear Selection: Option to clear the selected value
• Custom Icons: Support for displaying custom icons next to selected values

Data Structure

The component expects data in a hierarchical structure where each item can have child items. Example:

const data = [
  {
    id: 1,
    name: "Root Item",
    children: [
      {
        id: 2,
        name: "Child Item",
        children: [{ id: 3, name: "Leaf Item" }],
      },
    ],
  },
];