npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

of-tree

v1.0.14

Published

Full featured virtual tree for Angular

Downloads

51

Readme

Ooffice Virtual Tree 🥦

This is a virtual tree for angular 2+. It has excellent performance for 10s of thousands of items, supports search, expand/collapse all, templating, drag and drop, lazy load, keyboard navigation.

Features

  • Configurability - Easy out-of-the-box settings can be easily overridden to support exotic scenarios
  • No Dependencies - This is built on Angular alone, no other libraries needed
  • Keyboard Navigation - Supports standard arrow-key tree behavior
  • Search - Immediate or throttled, text or faceted search of a huge number of nodes
  • Expand/Collapse All - Expand all instantly even on 10s of thousands of nodes
  • Templatible - Have complete control over the appearance and behavior
  • Schemaless - Bind to data with a few known properties OR bind to any data whatsoever via simple configuration
  • Lazy load - Easily minimize data requests by loading child nodes on demand, by depth and ancestry
  • Drag and Drop - Reparent nodes by dragging
  • Navigate To - Expand and scroll immediately to any item in the tree, any depth

More Info

How does it work?

This tree component supports a huge number of nodes with minimal performance impact to the app hosting it. It does this by virtualizing the view of nodes, so that only the nodes visible in a scrollable container are rendered. However, virtualizing a hierarchical data structure is complicated. If the DOM structure were rendered hierarchically like the data, then it could not be virtualized. So, the data must be flattened before it is virtualized. Now, if the data is just flattened, then we the information about the depth and relationships of the hierarchical data is lost. So, before flattening the data, the metadata describing the relationships of the data must be stored.

To summarize, this tree is built around this recipe (which works for any hierarchical data view):

  1. Store hierarchy metadata
  2. Flatten the data
  3. Virtualize, render only visible items

Install

npm i of-tree obviously

Quick Setup

  1. Import the module
import { OfVirtualTreeModule } from 'of-tree';

@NgModule({
  imports: [..., OfVirtualTreeModule],
  ...
})
export class AppModule { }
  1. Use the of-basic-tree component
import { Component } from '@angular/core';

@Component({
    template: `
        <div class="container">
            <of-basic-tree [(selection)]="selectedItem" [data]="treeData"></of-basic-tree>
        </div>`,
    styles: [`
        .container { height: 400px; }
    `]
})
export class MyComponent {
    public selectedItem?: IMyDataType;
    public treeData: IMyDataType[] = [];
}

interface IMyDataType {
    name: string;
    children: IMyDataType[];
    type: 'Folder' | 'File';
}

For the most minimal setup expects, provide data with known properties, and put the tree inside a container of a non-zero height. However, the tree is very configurable. It has a robust public API and allows detailed configuration.

Browser Support

| Chrome | IE / Edge | Firefox | | --------- | --------- | --------- | | last version | Edge (Partial) | last version |

This virtual tree is intended for business applications where the on-call support can fix most problems by asking "did you try it in chrome?" Developing for one browser is very cost effective. One nice way to contribute is to fix support issues for others browsers or test them and report issues.

Other Options

Here are some other virtual tree implementations for angular.

  • angular-tree-component Demo Source
  • ...I'm sure there are others out there, just can't find them atm

Contribute

If you find a bug, the best thing is to fix it, and submit a pull request. The second best thing is to open an issue and provide a lot of details and rage emojis and venting. The worst best thing is to not do anything. Any contribution is appreciated :)

Run npm run ng serve of-demo

Open localhost:4200 in chrome