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

@ui-grid/tree-view

v4.12.7

Published

This ui-grid module provides a tree view of the data, with nodes and leaves

Downloads

11

Readme

UI-Grid Tree View

The tree view plugin for UI-Grid provides the ability to create a tree from your grid, specifying which of your data rows are nodes and which are leaves.

The tree structure itself is documented at treeBase.

Getting Started

You can install @ui-grid/tree-view via:

npm i --save @ui-grid/tree-view

Once you install you need to load the respective JS and CSS files as seen bellow:

<link rel="stylesheet" href="/node_modules/@ui-grid/core/css/ui-grid.min.css" type="text/css">
<link rel="stylesheet" href="/node_modules/@ui-grid/tree-base/css/ui-grid.tree-base.min.css" type="text/css">
<link rel="stylesheet" href="/node_modules/@ui-grid/tree-view/css/ui-grid.tree-view.min.css" type="text/css">
<script src="/node_modules/@ui-grid/core/js/ui-grid.core.min.js">
<script src="/node_modules/@ui-grid/tree-base/js/ui-grid.tree-base.min.js">
<script src="/node_modules/@ui-grid/tree-view/js/ui-grid.tree-view.min.js">

Alternatively, if you are using Webpack or RequireJS to load your dependencies, you can do the following at the top of the file that needs it:

require('@ui-grid/core');
require('@ui-grid/tree-base');
require('@ui-grid/tree-view');

Once you load the file, you need to include 'ui.grid.treeView' module in your angularJS app's dependencies, and add the ui-grid-tree-view directive to your grid element.

angular.module('myApp', [
    'ui.grid',
    'ui.grid.treeBase',
    'ui.grid.treeView'
]);
<div ui-grid="$ctrl.gridOptions" ui-grid-tree-view>

In your data you tell us the nodes by setting the property $$treeLevel on a given row. Levels start at 0 and increase as you move down the tree.

If you wish to load your tree incrementally, you can listen to the rowExpanded event, which will tell you whenever a row is expanded. You can then retrieve additional data from the server and splice it into the data array at the right point, the grid will automatically render the data when it arrives.

Tree View allows sorting, and implements it as a recursive tree sort - it sorts the children of each of the nodes of the tree.

Tree View allows filtering, it filters all the rows (nodes and leaves) and then makes sure that all parents of any visible row are also visible. Note that filtering doesn't change expand/collapse states, your users will still need to expand the nodes to get to the filtered rows.

Tree View includes aggregation logic, which is implemented by setting the aggregation property on the columnDef. The aggregation property is documented at columnDef. Refer to complex trees for more detail.

Tree View is still beta, and under development, however it is included in the distribution files to allow people to start using it. Notable outstandings are:

  • it would be nice to display an hourglass or icon whilst additional data was loading, the current arrangement means the grid doesn't know whether or not you're adding additional data

Options to watch out for include:

  • treeIndent: the expand buttons are indented by a number of pixels (default 10) as the tree level gets deeper. Larger values look nicer
  • treeRowHeaderBaseWidth: the base width of the tree row header (default 30)
  • showTreeExpandNoChildren: defaults to true. Shows the + even if there are no children, allows you to dynamically load children. If set to false there'll be no + if there are no children

Example

You can find an example of this plugin in action on our website

We also have a more complex example here.

API Documentation

Documentation for this plugin is provided in the api documentation, both under treeView itself, and shared functions in the treeBase documentation. In particular:

Issues

You can find issues that are specific to this UI-Grid plugin by looking for the label grid-tree-view in the ui-grid github issues page.

License

MIT