stimulus-tree-table

A stimulus controller that attaches tree-like behavior to table.

Dependencies

* @hotwired/stimulus 3.0+

Installation

Install from npm:

$ npm install @kanety/stimulus-tree-table --save

Usage

Register controller:

``javascript
import { Application } from '@hotwired/stimulus';
import TreeTableController from '@kanety/stimulus-tree-table';

const application = Application.start();
application.register('tree-table', TreeTableController);
`

Import css:

`css
@import '@kanety/stimulus-tree-table';
`

Build html with data-node-id and data-node-pid as follows:

`html





















1	text of 1
1.1	text of 1.1
1.1.1	text of 1.1.1
1.1.2	text of 1.1.2


`

$3

#### margin-left

Set base margin-left of icon (default: 20).

`html


data-tree-table-margin-left-value="10">

`

#### store-key

Save node state to sessionStorage:

`html


data-tree-table-store-key-value="YOUR_KEY">

`

$3

Run callbacks when a node is opened or closed:

`javascript
let element = document.querySelector('[data-controller="tree-table"]');
element.addEventListener('tree-table:opened', (e) => {
// e.detail.node: opened node
console.log('opened: ' + e.detail.node.getAttribute('data-node-id'));
});
element.addEventListener('tree-table:closed', (e) => {
// e.detail.node: closed node
console.log('closed: ' + e.detail.node.getAttribute('data-node-id'));
});
`

$3

Expand or collapse tree nodes:

`html


data-action="tree-table:expand->tree-table#expand tree-table:collapse->tree-table#collapse">

`

`javascript
let element = document.querySelector('[data-controller="tree-table"]');
element.dispatchEvent(new CustomEvent('tree-table:expand'));
element.dispatchEvent(new CustomEvent('tree-table:collapse'));
``

License

The library is available as open source under the terms of the MIT License.