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"]),
    },
  },
};

"use client";
 
import {
  LyteNyteGrid,
  useLyteNytePro,
  useClientDataSource,
} from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import { ColumnProReact } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/sample-data/bank-data-smaller";
import { useId } from "react";
 
const columns: ColumnProReact[] = [
  { id: "age", type: "number" },
  { id: "job" },
  { id: "balance", type: "number" },
  { id: "education" },
  { id: "marital" },
  { id: "default" },
  { id: "housing" },
  { id: "loan" },
  { id: "contact" },
  { id: "day", type: "number" },
  { id: "month" },
  { id: "duration" },
  { id: "campaign" },
  { id: "pdays" },
  { id: "previous" },
  { id: "poutcome" },
  { id: "y" },
];
 
export function FilterIn() {
  const ds = useClientDataSource({
    data: bankDataSmall,
  });
 
  const grid = useLyteNytePro({
    gridId: useId(),
    rowDataSource: ds,
    columns,
 
    filterModel: {
      job: {
        set: {
          kind: "in",
          columnId: "job",
          operator: "in",
          set: new Set(["technician", "services"]),
        },
      },
    },
  });
 
  return (
    <div style={{ height: 500, display: "flex", flexDirection: "column" }}>
      <div style={{ flex: "1" }}>
        <LyteNyteGrid grid={grid} />
      </div>
    </div>
  );
}

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.