Tree View - Supabase

Usage

tsx

import { flattenTree } from 'react-accessible-treeview'
import { TreeView, TreeViewItem } from 'ui'

tsx

const data: {
  name: ''
  children: [
    {
      name: 'Current batch'
    },
    {
      name: 'Older queries'
    },
    {
      name: 'query all users'
    },
    {
      name: 'users in last day'
    },
    {
      name: 'new users over time'
    },
  ]
}

function App() {
  return (
    <TreeView
      {...args}
      data={flattenTree(args.data)}
      aria-label="directory tree"
      nodeRenderer={({ element, isBranch, isExpanded, getNodeProps, level, isSelected }) => (
        <TreeViewItem
          isExpanded={isExpanded}
          isBranch={isBranch}
          isSelected={isSelected}
          level={level}
          xPadding={16}
          name={element.name}
          {...getNodeProps()}
        />
      )}
    />
  )
}

Examples

With directories

Use a children node in your data object to create a tree view with directories.

tsx

const data = {
  //..
  children: [
    {
      name: 'Current batch',
    },
    {
      name: 'Older queries',
      children: [
        {
          name: 'all countries',
        },
        {
          name: 'add new countries',
        },
      ],
    },
  ],
}

With inline editing

The Tree View can be edited in the app to enable different types of inline editing.

In this example, right click on any item to rename it, and we traverse the data object setting isEditing to true. TreeViewItem then accepts a isEditing prop to show and focus an inline input to edit.

With multi selection

Use the multiSelect, togglableSelect, clickAction set to "EXCLUSIVE_SELECT" to enable a multi-select tree view.

An example can be seen on the react-accessible-treeview docs.

tsx

<TreeView
  data={flattenTree(args.data)}
  aria-label="directory tree"
  multiSelect
  togglableSelect
  clickAction="EXCLUSIVE_SELECT"
  // other options..
/>