# Example: tree grid with keyboard navigation, DnD, and editing capabilites

Bringing it all together: this sample combines different extensions and custom events to implement an editable tree grid:

- 'ext-dnd' to re-order nodes using drag-and-drop.
- 'ext-table' + 'ext-gridnav' to implement a tree grid.
  Try `UP / DOWN / LEFT / RIGHT`, `TAB`, `Shift+TAB` to navigate between grid cells. Note that embedded input controls remain functional.
- 'ext-edit': inline editing.
  Try `F2` to rename a node.
  `Ctrl+N`, `Ctrl+Shift+N` to add nodes (Quick-enter: add new nodes until [enter] is hit on an empty title).
- Extended keyboard shortcuts:
  `Ctrl+C`, `Ctrl+X`, `Ctrl+P` for copy/paste,
  `Ctrl+UP`, `Ctrl+DOWN`, `Ctrl+LEFT`, `Ctrl+RIGHT` to move nodes around and change indentation.
- 3rd-party contextmenu for additional edit commands

Skin:

# Table Tree

Fake input:

| # |  | Ed1 | Ed2 | Rb1 | Rb2 | Cb
--- | --- | --- | --- | --- | --- | --- | ---

jquery.fancytree.js project home Link to this page Example Browser View source code