Treeview

This page is the demo for a series on how to create a treeview in react.

• Part 1 covers mouse interativity.
• Part 2 covers keyboard navigation and accessibility.
• Part 3 (Bonus) adds animations

Part 1

Structure

• components
  • toggle-group
    • index.ts
    • toggle-group.tsx
  • treeview
    • icons.tsx
    • index.tsx
    • treeview.tsx
  • roving-tabindex.tsx
  • index.tsx
• lib
  • treeview
    • index.ts
    • initialValue.ts
    • tree-state.tsx
    • useTreeNode.tsx
  • utils
    • chainable-map.ts
    • index.ts
• pages
  • _app.tsx
  • _document.tsx
  • index.tsx
  • toggle-group.tsx
  • treeview.tsx
• public
  • favicon.ico
  • file.png
  • folder.png
  • next.svg
  • thirteen.svg
  • vercel.svg
• styles
  • global.css
• .eslintrc.json
• .gitignore
• .prettierrc.js
• next-env.d.ts
• next.config.js
• package.json
• postcss.config.js
• README.md
• tailwind.config.js
• tsconfig.json
• yarn.lock

Open

• components
• lib
• pages
• public
• styles
• .eslintrc.json
• .gitignore
• .prettierrc.js
• next-env.d.ts
• next.config.js
• package.json
• postcss.config.js
• README.md
• tailwind.config.js
• tsconfig.json
• yarn.lock

Open state indicator

• components
• lib
• pages
• public
• styles
• .eslintrc.json
• .gitignore
• .prettierrc.js
• next-env.d.ts
• next.config.js
• package.json
• postcss.config.js
• README.md
• tailwind.config.js
• tsconfig.json
• yarn.lock

Selection

• components
• lib
• pages
• public
• styles
• .eslintrc.json
• .gitignore
• .prettierrc.js
• next-env.d.ts
• next.config.js
• package.json
• postcss.config.js
• README.md
• tailwind.config.js
• tsconfig.json
• yarn.lock

Part 2

Adding Roving tabindex

• components
• lib
• pages
• public
• styles
• .eslintrc.json
• .gitignore
• .prettierrc.js
• next-env.d.ts
• next.config.js
• package.json
• postcss.config.js
• README.md
• tailwind.config.js
• tsconfig.json
• yarn.lock

Up / Down keybindings

• components
• lib
• pages
• public
• styles
• .eslintrc.json
• .gitignore
• .prettierrc.js
• next-env.d.ts
• next.config.js
• package.json
• postcss.config.js
• README.md
• tailwind.config.js
• tsconfig.json
• yarn.lock

Right and Left keybindings

• components
• lib
• pages
• public
• styles
• .eslintrc.json
• .gitignore
• .prettierrc.js
• next-env.d.ts
• next.config.js
• package.json
• postcss.config.js
• README.md
• tailwind.config.js
• tsconfig.json
• yarn.lock

Updated focus styles

• components
• lib
• pages
• public
• styles
• .eslintrc.json
• .gitignore
• .prettierrc.js
• next-env.d.ts
• next.config.js
• package.json
• postcss.config.js
• README.md
• tailwind.config.js
• tsconfig.json
• yarn.lock

Home and end keybindings

• components
• lib
• pages
• public
• styles
• .eslintrc.json
• .gitignore
• .prettierrc.js
• next-env.d.ts
• next.config.js
• package.json
• postcss.config.js
• README.md
• tailwind.config.js
• tsconfig.json
• yarn.lock

Typeahead

• components
• lib
• pages
• public
• styles
• .eslintrc.json
• .gitignore
• .prettierrc.js
• next-env.d.ts
• next.config.js
• package.json
• postcss.config.js
• README.md
• tailwind.config.js
• tsconfig.json
• yarn.lock

Selection

• components
• lib
• pages
• public
• styles
• .eslintrc.json
• .gitignore
• .prettierrc.js
• next-env.d.ts
• next.config.js
• package.json
• postcss.config.js
• README.md
• tailwind.config.js
• tsconfig.json
• yarn.lock

ARIA

• components
• lib
• pages
• public
• styles
• .eslintrc.json
• .gitignore
• .prettierrc.js
• next-env.d.ts
• next.config.js
• package.json
• postcss.config.js
• README.md
• tailwind.config.js
• tsconfig.json
• yarn.lock

Part 3: Animation

• components
• lib
• pages
• public
• styles
• .eslintrc.json
• .gitignore
• .prettierrc.js
• next-env.d.ts
• next.config.js
• package.json
• postcss.config.js
• README.md
• tailwind.config.js
• tsconfig.json
• yarn.lock

Large dataset

• A - 1
• B - 17
• C - 17