# xtal-tree

> Provide flat, virtual snapshot of a tree

Latest version **0.0.173** (published 2023-07-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install xtal-tree
pnpm add xtal-tree
yarn add xtal-tree
bun add xtal-tree
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.173 |
| Published | 2023-07-17 |
| First published | 2018-02-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 31.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | bahrus |
| Maintainers | bahrus |
| Keywords | web-components, web-component, custom-element, custom-elements |

## Links

- npm: https://www.npmjs.com/package/xtal-tree
- Repository: https://github.com/bahrus/xtal-tree
- Homepage: https://github.com/bahrus/xtal-tree#readme
- Issues: https://github.com/bahrus/xtal-tree/issues
- npm.io page: https://npm.io/package/xtal-tree

## Dependencies (2)

- [trans-render](https://npm.io/package/trans-render.md) 0.0.699
- [xtal-element](https://npm.io/package/xtal-element.md) 0.0.574

## Recent versions

- 0.0.173 (latest) — 2023-07-17
- 0.0.172 — 2023-07-04
- 0.0.171 — 2023-06-29
- 0.0.170 — 2022-10-29
- 0.0.169 — 2022-10-19
- 0.0.168 — 2022-10-19
- 0.0.167 — 2022-10-16
- 0.0.166 — 2022-09-07
- 0.0.165 — 2022-08-28
- 0.0.164 — 2022-08-28
- 0.0.163 — 2022-08-28
- 0.0.162 — 2022-08-23
- 0.0.161 — 2022-08-16
- 0.0.160 — 2022-08-06
- 0.0.159 — 2022-08-06
- … 141 more at https://npm.io/package/xtal-tree/versions

## README

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/bahrus/xtal-tree)

<a href="https://nodei.co/npm/xtal-tree/"><img src="https://nodei.co/npm/xtal-tree.png"></a>

[![Actions Status](https://github.com/bahrus/xtal-tree/workflows/CI/badge.svg)](https://github.com/bahrus/xtal-tree/actions?query=workflow%3ACI)

[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/xtal-tree?style=for-the-badge)](https://bundlephobia.com/result?p=xtal-tree)

<img src="http://img.badgesize.io/https://cdn.jsdelivr.net/npm/xtal-tree?compression=gzip">

# \<xtal-tree\>

[Demo](https://codepen.io/bahrus/pen/GROLwBV)

Often we want to take advantage of a nice flat list generator component, like dom-repeat, or iron-list, but we want to use it to display and manipulate hierarchical tree data.

This scenario seems to come up so frequently with various components, that this component strives to genericize that requirement.

**NB I** This component takes a JS / JSON - centric approach.  An alternative way of generating an expandable tree is to use [server side HTML rendering or static site generation](https://bahrus.github.io/xtal-tree-deco/cdn.html), tapping into the power of the  details / summary element.  Some experiments with this approach have been done [here](https://github.com/bahrus/xtal-tree-deco), where similar support for expand all / search / sort is supported. In fact, the search capability is better with this approach.  This will tend to have smaller first paint / time to interactive times, if the tree starts out in collapsed mode.  However,as the amount of data increases, if you want to support expand all and global search capabilities, it may be better to use a virtual list combined with this JS-based component.

For simplicity and better performance, xtal-tree does make some assumptions about the structure of the data.  It assumes each node has the following fields (some of which are optional):

```TypeScript
export interface ITreeNode{
    children?: ITreeNode[];
    name: string;
    path: string;
    value: any;
    asString?: string;
    type: string;
    parent?: ITreeNode;
    open?: boolean;
}
```

Some of the properties are computed dynamically by the component.  This can result in adding unexpected properties to a user-defined data structure.  To avoid this, set property "clone" to true.

Think of xtal-tree as a reusable "View Model" component.  

xtal-tree also provides an option to turn any object graph JSON structure, and turn it into a regular tree structure that can be rendered quickly using a virtual list.


## Viewing This Element Locally

```
$ npm install
$ npm run serve
```

---
_Source: https://npm.io/package/xtal-tree · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._