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>
);
}
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.