A Javascript library for the browser, tree-finder exports a custom element named <tree-finder>, which can be used to easily render filebrowers or other hierarchical trees. Only visible cells are rendered.

Features

• [x] lazy data model and virtualized rendering -> can support billions of rows
• [x] tree-like columns
• [x] multi-sort
• [x] multi-selection
• [x] multi-filter
• [x] built in breadcrumbs
• [x] full clipboard model, with support for copy/cut/paste between multiple <tree-finder> instances
• [ ] command hooks to support 3rd party integrations
  • [ ] basic actions
    • [x] open
    • [x] delete
    • [ ] rename
    • [x] copy
    • [x] cut
    • [x] paste
  • [x] integration of command hooks with selection model
• [ ] icon support
  • [ ] icons-as-svg-elements
  • [ ] icons-as-css-classes
• [ ] drag-n-drop

Examples - try <tree-finder> out live

|| |:--| |basic| ||

Installation

Include via a CDN like JSDelivr:

  <script src="https://cdn.jsdelivr.net/npm/@tree-finder/base/dist/tree-finder.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tree-finder/base/dist/tree-finder.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tree-finder/base/dist/theme/material.css">

Or, add to your project via pnpm:

pnpm add @tree-finder/base

... then import into your asset bundle.

import "@tree-finder/base";
import "@tree-finder/base/style/theme/material.css";

Development

• First, ensure that you have nodejs >= 20.0.0 and pnpm installed
• Clone this repo
• Build and run the "simple" example

  cd examples/simple
  pnpm
  pnpm run start

pnpm run start will launch a dev server. Open the url it supplies in any browser in order to view the example. While the dev server is running, any changes you make to the source code (ie any .ts or .less files) will trigger a rebuild, and the example will automatically reload in your browser.

Data Model

A tree-finder instance should be inited with a root directory:

  await treeFinder.init({
    root,
    gridOptions: {
      doWindowResize: true,
      showFilter: true,
    },
  });

Starting from the root, objects should contain at least the field kind which will be dir for directory, or another file type (e.g. text). For directories, it should have a method async getChildren to get the contents of that directory.