react-tree-virtual

React Tree View with virtualization support based on react-window

Install

npm install --save react-tree-virtual

Simple tree example

import React, { useCallback, useState } from 'react'
import { FlattenedItem, VirtualTree } from 'react-tree-virtual'
import Row from '../components/Row'
import { createTree } from '../mocks/default'

const data = createTree()

const SimpleTree = () => {
  const [controlObject, setControlObject] = useState({})
  const onExpand = useCallback((id) => {
    setControlObject((prev) => ({
      ...prev,
      [id]: { ...prev[id], expanded: !prev[id]?.expanded }
    }))
  }, [])

  return (
    <VirtualTree
      itemSize={30}
      height={500}
      width={300}
      controlObject={controlObject}
      Row={(props) => <Row {...props} onExpand={onExpand} />}
      data={data}
    />
  )
}
export default SimpleTree

Tree with selections

import React, { useCallback, useState } from 'react'
import { FlattenedItem, VirtualTree } from 'react-tree-virtual'
import SelectionRow from '../components/SelectionRow'
import { createTree } from '../mocks/default'

const data = createTree()

const SelectionTree = () => {
  const [controlObject, setControlObject] = useState({})
  const onExpand = useCallback((id) => {
    setControlObject((prev) => ({
      ...prev,
      [id]: { ...prev[id], expanded: !prev[id]?.expanded }
    }))
  }, [])

  const onSelect = useCallback((id) => {
    setControlObject((prev) => ({
      ...prev,
      [id]: { ...prev[id], selected: !prev[id]?.selected }
    }))
  }, [])

  return (
    <VirtualTree
      itemSize={30}
      height={500}
      width={300}
      controlObject={controlObject}
      Row={(props) => (
        <SelectionRow
          {...props}
          selected={controlObject[props.id]?.selected}
          onExpand={onExpand}
          onSelect={onSelect}
        />
      )}
      data={data}
    />
  )
}

export default SelectionTree

data

data: TreeItem[] is an array of tree items with following structure:

export interface TreeItem {
  id: string
  children: TreeItem[]
  [key: string]: unknown
}

id and children are required, also you can pass any field and it will be propagated to Row

controlObject

controlObject: ControlObject is a object with following structure:

export interface ControlObject {
  [key: string]: {
    expanded: boolean
    [key: string]: unknown
  }
}

The key of this object is an id of TreeItem and the value is the data which will be propagated to Row. This object is used to control expanded/collapsed state of the items, also it can be used to implement selections and for any other control purposes.

Row

Row is React Component that will be used to generate row of Tree View. This component will recieve props based on data and controlObject tree props.

React Window props

Since react-virtual-tree is based on FixedSizeList from react-window all props from FixedSizeList are available.

License

MIT © karpengold