Detailed tree-view

• Simple API that can return a user-friendly tree view for given data
• Works very well with JSON
• Can present even complex, nested data
• All styling can be easily customized!

➤ Table of Contents

• ➤ Description
• ➤ 0. Installation
• ➤ 1. Set your data
• ➤ 2. Feed the module with data
• ➤ 3. Customize styling
• ➤ License

➤ Description

Tree-view is a simple API allowing to present json data in a user-friendly way. This component uses LitHTML and LitELement. You can both use the tree-view component as a new class importing it from the file, as well as the HTML tag . The component has two properties: data and headline. You can use them to customize the component and to feed it with your own data.

➤ 0. Installation

Install the component...

npm install detailed-tree-view

...and import it afterwards

import "detailed-tree-view";

➤ 1. Set your data

Depending on whether you need to present a small piece of data or your whole database, you start with either fetching the data from the outside source or writing it in the json format. Below you can see, how I arranged the mock-up data, presented in the demo.

let myData = {Component: { What: { Name: "Tree View" }, Why: { Purpose: "To present fetched data in a user-friendly way" } },Creator: { Name: "Anastazja Galuza", City: "Copenhagen" }}

➤ 2. Feed the module with data

After importing the component, you can freely use it as an HTML tag. Feed it with data using data as a property or attribute, depending on whether you write simple HTML and JS script or you prefer to use LitHTML library.

Vanila JS:

const treeView = document.getElementById("mytreeview");
treeView.data = myData;

Using LitHTML & LitElement Library:

render(){
html`
<detailed-tree-view id="mytreeview" data="${myData}"></detailed-tree-view>
`}
 

➤ 3. Customize styling

The module can be easily customized according to your style needs, just like in the example below:

In order to implement your own styling, all you need is to define the css variables mentioned in the code below. The font is inherited, so you can simply assign it to the module f.ex. through a unique id.

:host{
 --tree-view-summary-background-color-open: #e0c7db;
--tree-view-summary-background-color-close: #f9d9f3;
--tree-view-summary-border-bottom: 1px solid grey;
--tree-view-value-background-color: #f9d9f3;
}
#mytreeview {
font-family: "Dosis", sans-serif;
color: purple;
}

If you decide not to apply any styling, the module will fallback to the default styling:

➤ License

Licensed under MIT.