npm package: @finastra/filter-tree
Description: FilterTree Web Component
Latest version: 1.8.1

# FilterTree

The fds-filter-tree provides a tree that could be used to display hierarchy data.

[![See it on NPM!](https://img.shields.io/npm/v/@finastra/filter-tree?style=for-the-badge)](https://www.npmjs.com/package/@finastra/filter-tree)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@finastra/filter-tree?style=for-the-badge)](https://bundlephobia.com/result?p=@finastra/filter-tree')
[![Storybook](https://shields.io/badge/-Play%20with%20this%20web%20component-2a0481?logo=storybook&style=for-the-badge)](https://finastra.github.io/finastra-design-system/?path=/story/components-filter-tree--default)

## Usage

### Import

```
npm i @finastra/filter-tree
```

```ts
import '@finastra/filter-tree';
...
<fds-filter-tree items=[
  {
    label: 'Consumer Banking',
    children: [
      {
        label: 'Alerts',
        isSelected: true
      },
      {
        label: 'Customer Management'
      }
    ],
  },
  {
    label: 'Money Movement'
  },
  {
    label: 'Financial Toolbox'
  }
]>
</fds-filter-tree>
```

### API

<!-- DOC -->
#### Properties

| Property | Attribute | Type         | Default | Description    |
|----------|-----------|--------------|---------|----------------|
| `items`  | `items`   | `treenode[]` | []      | List of items. |

#### Methods

| Method                         | Type                                             |
|--------------------------------|--------------------------------------------------|
| `checkDescendants`             | `(item: treenode, indexInTreeNode: any): void`   |
| `checkIndeterminate`           | `(nodeEl: HTMLElement): void`                    |
| `descendantsAllSelected`       | `(node: flattreenode): boolean`                  |
| `descendantsPartiallySelected` | `(node: flattreenode): boolean`                  |
| `deselectChildren`             | `(items: treenode[]): void`                      |
| `findIndex`                    | `(node: flattreenode): any`                      |
| `flatTreeTransformer`          | `(items: treenode[], level: number \| undefined, flatTreeTransf: flattreenode[]): flattreenode[]` |
| `getDescendants`               | `(node: flattreenode): flattreenode[]`           |
| `getNodeElementById`           | `(id: string): any`                              |
| `getParentNode`                | `(node: flattreenode): flattreenode \| null`     |
| `haveChildren`                 | `(item: treenode): boolean`                      |
| `init`                         | `(items: treenode[]): void`                      |
| `initSelection`                | `(item: treenode, indexInTreeNode: any): void`   |
| `isSelected`                   | `(node: flattreenode): boolean`                  |
| `notifyParent`                 | `(node: flattreenode): void`                     |
| `onExpandClick`                | `(item: treenode, index: number, event: CustomEvent<any>): void` |
| `onRequestSelected`            | `(item: treenode, index: number, event: CustomEvent<any>): void` |
| `onSelect`                     | `(item: treenode, nodeEl: HTMLElement, indexInTreeNode: number, indexInFlatTreeNode: number, eventType: string): void` |
| `renderChildren`               | `(items: treenode[]): any`                       |
| `selectChildren`               | `(items: treenode[]): void`                      |
| `toFlatTreeNode`               | `(item: treenode, index: any): flattreenode`     |

#### Events

| Event               | Type                     |
|---------------------|--------------------------|
| `filter-tree-check` | `CustomEvent<treestate>` |
<!-- /DOC -->