@openenergytools/tree-grid NPM

\

Installation

npm i tree-grid

Usage

<script type="module">
  import 'tree-grid';
</script>

<tree-grid filterLabel="Regular Expression"></tree-grid>

<script type="module">
  const oscdTree = document.querySelector('tree-grid');
  await oscdTree.updateComplete;

  const tree = await fetch('/tree.json').then(r => r.json());

  oscdTree.tree = tree;
</script>

TypeScript types

For use with TypeScript, tree-grid exports the following types:

export type TreeSelection = { [name: string]: TreeSelection };

export type Path = string[];

export type TreeNode = {
  children?: Tree;
  text?: string;
  mandatory?: boolean;
};

export type Tree = Partial<Record<string, TreeNode>>;

This webcomponent follows the open-wc recommendation.

`TreeGrid.ts`:

class: `TreeGrid`, `tree-grid`

Superclass

Name	Module	Package
`LitElement`		lit

Mixins

Name	Module	Package
`ScopedElementsMixin`		@open-wc/scoped-elements/lit-element.js

Static Fields

Name	Privacy	Type	Default	Description	Inherited From
`scopedElements`		`object`	`{

'md-list': MdList,
'md-icon': MdIcon,
'md-list-item': MdListItem,
'md-outlined-textfield': MdOutlinedTextField,

}` | | |

Fields

Name	Type	Default	Description
`tree`	`Tree`	`{}`	The `Tree` to be selected from
`selection`	`TreeSelection`	`{}`	Selected rows as `TreeSelection`
`paths`	`Path[]`		Selected rows as `Path[]`
`filter`	`string`		Regular expression by which to filter rows
`filterLabel`	`string`	`''`	Filter `TextField` label
`filterUI`	`MdOutlinedTextField \\| undefined`

Fields

Name	Privacy	Type	Default
`depth`	private	`number`
`filterRegex`	private	`RegExp`
`container`	private	`Element \\| undefined`
`collapsed`	private		`new Set<string>()`

Methods

Name	Privacy	Parameters	Return
`getPaths`	private	`maxLength: number`	`Path[]`
`treeNode`	private	`path: Path`	`TreeNode`
`rows`	private		`Path[]`
`clicked`	private	`el: HTMLElement`	`MdListItem`
`select`	private	`parentPath: Path, clicked: string`	`void`
`selectAll`	private	`clicked: MdListItem`	`void`
`scrollRight`	private		`Promise<void>`
`handleSelected`	private	`event: Event`	`Promise<void>`
`renderCell`	private	`path: Path, previousPath: Path`	`TemplateResult`
`renderColumn`	private	`column: (Path \\| undefined)[]`	`TemplateResult`
`toggleCollapse`	private	`serializedPath: string`
`renderExpandCell`	private	`path: Path`	`TemplateResult`
`renderExpandColumn`	private	`rows: Path[]`	`TemplateResult`
`renderCollapseCell`	private	`path: Path`	`TemplateResult`
`renderCollapseColumn`	private	`rows: Path[]`	`TemplateResult`
`renderColumns`	private		`TemplateResult`
`renderFilterField`	private

Exports

Kind	Name	Declaration	Module	Package
`js`	`TreeGrid`	TreeGrid	TreeGrid.ts

`tree-grid.ts`:

Exports

Kind	Name	Declaration	Module	Package
`custom-element-definition`	`tree-grid`	TreeGrid	/TreeGrid.js

@scopedelement/material-web @open-wc/scoped-elements lit

1.0.1

9 months ago

1.0.0

10 months ago

\

Installation

Usage

TypeScript types

TreeGrid.ts:

class: TreeGrid, tree-grid

Superclass

Mixins

Static Fields

Fields

Fields

Methods

Exports

tree-grid.ts:

Exports

`TreeGrid.ts`:

class: `TreeGrid`, `tree-grid`

`tree-grid.ts`: