@terguevarra/react-bootstrap-treeview NPM

React Bootstrap Treeview

Installation

Install Package

npm install --save @terguevarra/react-bootstrap-treeview

Include Bootstrap 5 and Bootstrap Icons

Via CDN:

<link   href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" 
        rel="stylesheet" />

<link   href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css"
        rel="stylesheet" />

Import Bootstrap 5 and Bootstrap Icons:

npm install bootstrap@next bootstrap-icons

Usage

import React, { useState } from 'react';
import ReactBootstrapTreeview from '@terguevarra/react-bootstrap-treeview';

const sampleData = [
  {
    "id": 1,
    "parentId": 0,
    "label": "Lorem Ipsum"
  },
  {
    "id": 2,
    "parentId": 0,
    "label": "Lorem Ipsum"
  },
  {
    "id": 3,
    "parentId": 1,
    "label": "Lorem Ipsum"
  },
  {
    "id": 4,
    "parentId": 2,
    "label": "Lorem Ipsum"
  },
  {
    "id": 5,
    "parentId": 3,
    "label": "Lorem Ipsum"
  }
]

function App(){
    const [data, setData] = useState(sampleData);

    return(
        <>
            <ReactBootstrapTreeview list={data}
                                    idName="id"
                                    parentIdName="parentId"
                                    label={rowData => `${rowData.id} - ${rowData.label}`} />
        </>
    );
}

export default App;

Main Props

Name	Type	Default Value	Required	Description
list	Array	-	Yes	Data to be rendered
idName	String	-	Yes	Property name of unique identification
parentIdName	String	-	Yes	Property name of Parent Id
label	String or Function	-	Yes	Property to be rendered
tableClassName	String	table	No	Bootstrap Table class you want to use for the treeview
actions	Array	-	No	Actions list. You can add buttons to rows.

actions

Name	Type	Default Value	Required	Description
icon	String	-	Yes	Bootstrap Icon class (eg. `bi bi-plus`)
onClick	Function	-	Yes	This will trigger the function on button click. (Parameters: `event`, `rowData`)
buttonClass	String	btn	No	Bootstrap button class (eg. `btn btn-primary`)
disabled	bool	false	No	Button is enabled or disabled
hidden	bool	false	No	Button is visible or not