Filter Manager

LyteNyte Grid offers a Filter Manager component that helps you add, change, and remove filters for specific columns. The Filter Manager supports both simple filtering and tree set filtering. It automatically selects appropriate filter inputs based on each column's type property.

Here's a complete demonstration of the Filter Manager functionality:

TODO;

Filter Manager Components

You can assemble Filter Manager components to create either a full-featured filter interface or a simplified version.

Import these components with:

import { FilterManager } from "@1771technologies/lytenyte-pro/filter-manager";

The basic layout for the Filter Manager is:

<FilterManager.Root grid={grid} column={column}>
  <FilterManager.SimpleRoot>
    <FilterManager.SimpleOperator />
    <FilterManager.SimpleValue />
  </FilterManager.SimpleRoot>
 
  <FilterManager.SimpleSwitch />
 
  <FilterManager.SimpleRoot isAdditional>
    <FilterManager.SimpleOperator />
    <FilterManager.SimpleValue />
  </FilterManager.SimpleRoot>
 
  <FilterManager.InFilterRoot>
    <FilterManager.InFilterContainer>
      <FilterManager.InFilterViewport />
    </FilterManager.InFilterContainer>
  </FilterManager.InFilterRoot>
 
  <FilterManager.ApplyButton />
  <FilterManager.ClearButton />
</FilterManager.Root>

Filter Root

The FilterManager.Root provides contextual state that other filter manager components need to manage and apply filters in the grid. You must render all other components under a Filter Manager root. Do not nest Filter Manager roots.

FilterManager.Root requires both the grid state object and the column to filter. The component uses the column's type property to determine which filter operators are available.

Simple Root

LyteNyte Grid refers to basic filters as 'simple filters.' These are standard grid filters like x > 23. A simple filter always has an operator and a value.

Use the FilterManager.SimpleRoot component to create a simple filter. Always include FilterManager.SimpleOperator and FilterManager.SimpleValue components as children. You can apply up to two simple filters to each column. Use the isAdditional property to mark a FilterManager.SimpleRoot as the secondary filter.

The FilterManager.SimpleSwitch controls how two simple filters interact - either with and or or logic. With and, rows must pass both filters to display. With or, rows pass if they meet either filter.

The Filter Manager discards incomplete simple filters when applying filters. Here's a complete simple filter setup:

<>
  <FilterManager.SimpleRoot>
    <FilterManager.SimpleOperator />
    <FilterManager.SimpleValue />
  </FilterManager.SimpleRoot>
 
  <FilterManager.SimpleSwitch />
 
  <FilterManager.SimpleRoot isAdditional>
    <FilterManager.SimpleOperator />
    <FilterManager.SimpleValue />
  </FilterManager.SimpleRoot>
</>

In Filter (Set Filter)

The FilterManager.InFilterRoot component displays the In filter for a column. In filters (also known as set or tree set filters) allow users to filter a column for specific values.

FilterManager.InFilterRoot displays the In filter but doesn't create the filter input. The grid provides this support - see the In Filter guide for more details on adding support for in filters.

FilterManager.InFilterRoot requires a FilterManager.InFilterContainer child, which in turn requires FilterManager.InFilterViewport. The FilterManager.InFilterViewport displays a tree view of selectable filter items.

The FilterManager.InFilterViewport accepts these optional configuration properties:

Here's a complete in filter setup:

<FilterManager.InFilterRoot>
  <FilterManager.InFilterContainer>
    <FilterManager.InFilterViewport />
  </FilterManager.InFilterContainer>
</FilterManager.InFilterRoot>

Filter Controls

The FilterManager.ApplyButton renders a button that applies filters to the grid.

The FilterManager.ClearButton renders a button that clears existing filters for the column.

You can place these buttons anywhere within the FilterManager.Root component.