KendoReact

React TreeView

  • This versatile React TreeView component enables user interaction (selection, reordering) with hierarchical data in a tree structure through mouse or touch events.
  • Part of the KendoReact library along with 100+ professional UI components built with React for React, from the ground up.
  • Get started quickly with our award-winning support, detailed documentation, interactive demos and instructor-led training.
  • Overview

    The React TreeView displays hierarchical data in a traditional tree structure, supports user interaction through mouse and touch events and allows for reordering nodes by using the built-in drag and drop functionality.

    See React TreeView demo

    React TreeView - Overview, KendoReact UI Library
  • Data Binding

    Thanks to the ability to map required fields with ease, the KendoReact TreeView can be bound to various types of data.

    See React TreeView demo: Data Binding

    React TreeView - Data Binding, KendoReact UI Library
  • Expanding Items

    Nodes within the React TreeView can be expanded and collapsed by simply clicking on a node. Expansion state can also be set programmatically, allowing nodes to be expanded upon initial render or dynamically updated.

    See React TreeView demo: Expanding Items

    React TreeView - Expanding Items, KendoReact UI Library
  • Selection

    With selection enabled, the KendoReact TreeView allows for nodes to be selected by a simple click, or through built-in checkboxes.

    See React TreeView demo: Selection

    React TreeView - Selection, KendoReact UI Library
  • Checkboxes

    The KendoReact TreeView allows for checkboxes to be rendered next to each node to assist with selecting nodes throughout the entire TreeView.

    See React TreeView demo: Checkboxes

    React TreeView - Checkboxes, KendoReact UI Library
  • Dragging & Dropping

    The drag-and-drop feature of the KendoReact TreeView enables users to move TreeView items around by dragging and dropping them within a single tree, or across multiple trees.

    See React TreeView demo: Dragging & Dropping

    React TreeView - Dragging & Dropping, KendoReact UI Library
  • Persisting Focus on Data Reload

    The KendoReact TreeView enables developers to keep the focus on the currently focused item while reloading data.

    See React TreeView demo: Persisting Focus

    React TreeView - Persisting Focus, KendoReact UI Library
  • Custom Rendering

    Nodes within the React TreeView can be completely customized by providing a custom renderer, giving full control over the content for each node.

    See React TreeView demo: Custom Rendering

    React TreeView - Custom Rendering, KendoReact UI Library
  • Keyboard Navigation

    The KendoReact TreeView has built-in keyboard navigation to help traverse and interact with all the nodes available within the tree.

    See React TreeView demo: Keyboard Navigation

  • Accessibility

    The KendoReact TreeView is compliant with Section 508 and WAI-ARIA standards and is AAA rated with WCAG 2.0.

    See React TreeView demo: Accessibility

    React Accessibility - KendoReact

All KendoReact Components

waves bg

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.