Filtering

Column In Filter

An in-filter (also known as a set filter or tree-set filter) lets users filter data by selecting specific values from a list. You can apply an in-filter to a column through the filterModel alongside normal column filters.

To use an in-filter, your row data source must support it since the data source provides the possible filter values. All row data sources included with LyteNyte Grid support in-filters. Defining the in-filter on a model is straightforward:

const filterModel = {
  job: {
    set: {
      kind: "in",
      columnId: "job",
      operator: "in",
      set: new Set(["technician", "services"]),
    },
  },
};
In Filter

Set Filter Specifics

LyteNyte Grid treats set filters and tree set filters the same way - both are in-filters. A set filter is simply a special case of a tree set filter where all values are leaf nodes.

Your row data source determines whether in-filter values form a tree structure. The data source returns a set of ColumnInFilter items that follow this interface:

export type ColumnInFilterItemLeaf = {
  readonly kind: "leaf";
  readonly label: string;
  readonly value: unknown;
};
 
export type ColumnInFilterItemParent = {
  readonly kind: "parent";
  readonly label: string;
  readonly children: ColumnInFilterItem[];
};
export type ColumnInFilterItem =
  | ColumnInFilterItemLeaf
  | ColumnInFilterItemParent;

This structure defines the tree-like relationship between items that LyteNyte Grid uses for rendering.

If you're creating a custom component instead of using LyteNyte Grid's built-in filter component, use the columnInFilterItems API method to retrieve the tree items for a given column.