║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Filter Tree description: The Filter Tree component lets you update filters using a tree-based UI. It is especially useful for columns with a limited set of values. A filter tree can be flat or hierarchical-the example below shows both.

Data Source and Items

The row data source supplies the items for the filter tree. Each item has the following shape:

export interface FilterInFilterItem {
  readonly id: string;
  readonly label: string;
  readonly value: unknown;
  readonly groupPath?: string[];
}

LyteNyte Grid uses these items to construct the filter tree.

!demo:Filter Tree="./demos/filter-tree"

Filter Tree Component Parts

The Filter Tree is composed of the following parts:

• Root - Provides the root context. All other parts must be rendered within Root.
• Panel - Container for filter items.
• Leaf - Represents a single filter option.
• Branch - Represents a nested group of filter items. Branches support additional overrideable slots:
  • label - Displays the branch label text.
  • labelWrap - Wraps the branch label element.
  • expander - Toggles the expand/collapse state of the branch.
• Label - Displays the label text for a filter item.
• Checkbox - Toggles the filter state of the item.

This structure allows you to mix flat and nested filter trees and override individual parts for customized behavior and styling.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║