<tree-grid>

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 | Privacy | Type | Default | Description | Inherited From | | ------------- | ------- | ---------------------------------- | ------- | ------------------------------------------ | -------------- | | 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 | | | |

Events

| Name | Type | Description | Inherited From | | --------------- | ------------- | ----------- | -------------- | | node-selected | CustomEvent | | |

Fields

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

Methods

| Name | Privacy | Description | Parameters | Return | Inherited From | | ---------------------- | ------- | ----------- | ----------------------------------- | ---------------- | -------------- | | 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 | |

© 2023 OMICRON electronics GmbH