The all new Clibu Tree - Demonstration. v0.15.09



This is a demonstration of the new Tree widget for Clibu. For full details see Unveiling our new Clibu Tree Widget
Its capabilities include:

  • Multiple tree views
    • Order by Name (the current Clibu view)
    • Order by Date Created (tree displays, year, month, week, day - tree item(s))
    • Order by Date Modified (tree displays, year, month, week, day - tree item(s))
    • Used defined order. Lets you order siblings (items at the same tree level)  however you want.
  • Rearrange the tree using drag and drop. (Excluded for the Date views)
  • Sort the current view ascending/descending.
  • Used selectable Tree Icons - displayed to the left of the tree item name.
  • Ability to select the background color for each tree row.
  • Tree item hoisting. Enables any tree item to become the root or top-level item in the tree.
  • Optional Tree lines - for easier tree visualization.
  • Expand/Collapse all descendants.
  • Branch Expand/Collapse state persists across sessions. (Excluded for the Date views)

Demo usage
Delete tree - Deletes all tree items.
Populate tree - Adds a set of items to the tree with random Date Created values.
Insert top level item - Inserts a new item at the top level of the tree.
Views - Lets you switch between tree views.
Drag and drop tree items to rearrange the tree (Excluded for the Date views).
Click on 'Hoist' to show the hoisted view or return to full view.
Click on tree item icon , etc. to change item text, background color, icon etc.
Click on tree item menu icon to create a Child item, Hoist, UnHoist, Delete a tree branch.
'Debug' display information to assist in locating issues.

* All testing has been done using the latest version of Google Chrome on Desktop, Tablet and Smartphone. Please use Chrome for now.

The new Clibu Tree has or is using the following code. Many thanks to the associated developers.
Lit-Element by Google - A simple base class for creating fast, lightweight web components
Scott Lott - nanoSQL - Universal database layer for the client, server & mobile devices
Emotion - CSS-in-JS library designed for high performance style composition
Bence Szabo - Material Design Components in Pure CSS
observer-util - Reactive State Management
Fred Daoud - Meiosis - Awesome State Management for Web Applications
Parcel.js - Blazing fast, zero configuration web application bundler

©Soft As It Gets P/L 2019