Tiny jQuery Tree Table Plugin with Virtual Scrolling

TreeTable is a lightweight virtual scrolling tree table jQuery plugin that enables you to display hierarchical data structures with unlimited nesting levels.

Instead of rendering thousands of rows at once, it only creates DOM elements for the visible portion of the table, recycling them as you scroll. This keeps the UI responsive, even with a massive number of nodes.

Features:

• Unlimited nesting levels: Support for deeply nested tree structures without performance limitations.
• Virtual scrolling: Renders only visible rows to maintain performance with large datasets.
• Level-based checkboxes: Cascading selection behavior with parent-child relationship awareness.
• Expand/collapse controls: Interactive tree navigation with smooth animations.
• Data reloading: Dynamic content updates without full component reinitialization.
• Pure CSS icons: Lightweight visual indicators without external icon dependencies.
• Responsive layout: Adaptive design that works across different screen sizes.
• Custom column support: Flexible column configuration with template functions.
• Event callbacks: Comprehensive event system for interaction handling.
• Streaming loading: Progressive data loading for improved initial render performance.

Use Cases

• File and Folder Management: When you need to build a UI that mimics a desktop file explorer, TreeTable can render the directory structure efficiently.
• Product Category Trees: For an e-commerce admin panel, managing a deep hierarchy of product categories can be slow. TreeTable displays the entire tree without overwhelming the browser.
• Organizational Charts: Displaying a company's reporting structure is a perfect fit. The parent-child relationships map directly to the tree structure.
• Permission Management Systems: When assigning user roles and permissions that are often nested, this plugin can display the entire permission tree clearly, with checkboxes for easy selection.

How to use it:

1. Download and load the TreeTable plugin's script after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/treeTable.js"></script>

2. Create an empty DIV element that serves as the container for your tree table.

<div id="treeTable"></div>

3. Initialize TreeTable on the container element with hierarchical data:

$('#treeTable').treeList({
  data: [
    {
      id: 1,
      name: 'root',
      children: [
        {
          id: 2,
          name: 'child',
          children: []
        }
      ]
      // ...
    }
  ]
});

4. Available configuration parameters to customize the behavior and appearance of your tree table:

• data (Array, default: []): The array of objects used as the data source for the tree.
• idField (String, default: 'id'): The property name for the unique identifier of each node.
• parentField (String, default: 'pid'): The property name for the parent node's ID.
• childrenField (String, default: 'children'): The property name for the array of child nodes.
• nameField (String, default: 'name'): The property name for the text displayed for each node.
• checkbox (Boolean, default: true): Toggles the visibility of checkboxes for each node.
• expandAll (Boolean, default: false): If set to true, all nodes will be expanded by default on initialization.
• virtualScroll (Boolean, default: true): Enables or disables the virtual scrolling feature for performance optimization.
• itemHeight (Number, default: 36): The height in pixels for each row, used for virtual scrolling calculations.
• visibleItems (Number, default: 30): The number of rows to render in the visible area at one time.
• showHeader (Boolean, default: true): Toggles the visibility of the table header.
• showAction (Boolean, default: true): Toggles the visibility of the action column.
• actionIcon (String, default: ''): The icon or text to display in the action column.
• columns (Array, default: []): An array of objects to define custom columns, overriding default column generation.

$('#treeTable').treeList({
  data: [], 
  idField: 'id',
  parentField: 'pid',  
  childrenField: 'children', 
  nameField: 'name', 
  checkbox: true,
  expandAll: false,
  virtualScroll: true,
  itemHeight: 36,
  visibleItems: 30,
  loadThreshold: 20,
  showHeader: true,
  showAction: true,
  actionIcon: ' ',
  checkedIds: [],
  columns: [
    // { type: 'checkbox', width: '80px', title: '' },
    // { key: 'name', title: 'Name', templet: null },
    // { title: 'Actions', width: '80px', align: 'center', templet: null }
  ],
});

5. Available callback functions:

$('#treeTable').treeList({
  onCheck: function(node, checked) {
    console.log('Node selection changed:', node, checked);
  },
  onToggle: function(node, expanded) {
    console.log('Node expansion state changed:', node, expanded);
  },
  onNodeClick: function(node) {
    console.log('Node clicked:', node);
  },
  onActionClick: function(node, event) {
    console.log('Action button clicked:', node, event);
  },
  onNodeExpand: function(node) {
    console.log('Node expanded:', node);
  },
  onNodeCollapse: function(node) {
    console.log('Node collapsed:', node);
  }
});

6. Access the API to control the tree programmatically.

• expandAll(): Expands all nodes in the tree.
• collapseAll(): Collapses all nodes in the tree.
• expandNode(nodeId): Expands a single node specified by its ID.
• collapseNode(nodeId): Collapses a single node specified by its ID.
• checkNode(nodeId, checked): Sets the checked state of a single node. The second argument is a boolean (true for checked, false for unchecked).
• uncheckNode(nodeId): Unchecks a single node specified by its ID.
• getCheckedNodes(): Returns an array of all node objects that are currently checked.
• getExpandedNodes(): Returns an array of all node objects that are currently expanded.
• getNodeById(nodeId): Retrieves the full data object for a single node by its ID.
• reloadNodes(nodeIds, newData): Reloads the data for one or more specified nodes.
• refresh(): Forces a re-render of the entire tree to reflect any changes.

const treeApi = $('#treeTable').data('treeApi');

// Expand or collapse all nodes
treeApi.expandAll();
treeApi.collapseAll();

// Control individual nodes
treeApi.expandNode(nodeId);
treeApi.collapseNode(nodeId);

// Checkbox operations
treeApi.checkNode(nodeId, true); // true to check, false to uncheck
treeApi.uncheckNode(nodeId);
const checkedNodes = treeApi.getCheckedNodes();

// Data retrieval
const expandedNodes = treeApi.getExpandedNodes();
const specificNode = treeApi.getNodeById(nodeId);

// Data manipulation
treeApi.reloadNodes(nodeIds, newData);
treeApi.refresh();

Related Resources:

• 9 Best Tree Table Plugins In JavaScript
• 10 Best Tree View Plugins In JavaScript And Pure CSS

FAQs

Q: How does TreeTable handle large datasets with thousands of nodes?
A: TreeTable uses virtual scrolling to render only visible rows, maintaining consistent performance regardless of dataset size. The plugin calculates visible viewport boundaries and renders approximately 30-40 rows at any time, with smooth scrolling achieved through DOM element recycling and CSS positioning.

Q: Can I customize the expand/collapse icons without using external icon fonts?
A: TreeTable uses pure CSS to create triangle-shaped expand/collapse indicators, eliminating external dependencies. You can customize these icons by overriding the CSS rules for .tree-row .toggle::before and .tree-row .toggle.expanded::before to create different shapes, colors, or animations.

Q: How do I handle dynamic data loading for tree branches?
A: Use the reloadNodes() method to update specific tree branches with new data while preserving the current expansion and selection states. The method accepts an array of node IDs and corresponding new data, automatically handling child node updates and maintaining tree structure integrity.

Q: What happens to checkbox selection states when nodes are collapsed?
A: Selection states remain intact when nodes are collapsed or expanded. TreeTable maintains selection information in the node data structure independent of visibility state. The cascading selection behavior continues to work correctly, with parent nodes showing indeterminate states when some but not all children are selected.

Q: Can TreeTable work with flat data structures instead of nested objects?
A: TreeTable primarily works with nested data structures through the children field, but you can adapt flat data by using the parentField configuration option. Set this to the field name that contains parent node references, and TreeTable will construct the tree hierarchy automatically during initialization.

Q: How do I implement custom column templates with interactive elements?
A: Define custom column templates using the templet function in column configuration. Return HTML strings containing buttons or other interactive elements, then use event delegation to handle clicks. Add lay-event attributes to custom elements, and TreeTable will automatically trigger the onActionClick callback with the appropriate event information.

---

This awesome jQuery plugin is developed by wh-kerwin. For more Advanced Usages, please check the demo page or visit the official website.