LyteNyte Grid lets you filter data by applying filters to individual columns. Use the
filterModel
property on the grid to control which columns have filters applied.
The column filter model consists of key/value pairs, where each key is a column id
and each
value is the filter to apply. This section covers simple
filters, available in both Core
and
PRO
editions of LyteNyte Grid. The PRO
edition also supports:
Apply a column filter by setting the filter value for a column in the filterModel
property of
grid state. LyteNyte Grid offers several types of simple filters to
handle diverse filtering requirements. An example filter model may look like the code below:
const filterModel = {
job: {
simple: {
columnId: "job",
kind: "text",
operator: "contains",
value: "tech",
},
},
};
Use text filters to filter columns with textual values. These filters support common operations
like begins_with
and contains
. In the example below we filter for rows that have a job
field
value that contains "tech"
.
"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 FilterText() {
const ds = useClientDataSource({
data: bankDataSmall,
});
const grid = useLyteNytePro({
gridId: useId(),
rowDataSource: ds,
columns,
filterModel: {
job: {
simple: {
columnId: "job",
kind: "text",
operator: "contains",
value: "tech",
},
},
},
});
return (
<div style={{ height: 500, display: "flex", flexDirection: "column" }}>
<div style={{ flex: "1" }}>
<LyteNyteGrid grid={grid} />
</div>
</div>
);
}
Apply number filters to columns containing numeric values. Like text filters, number filters
support common operations such as less_than
or equal
. In the example below, we filter out
all the rows that have an age less than 30.
"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 FilterNumber() {
const ds = useClientDataSource({
data: bankDataSmall,
});
const grid = useLyteNytePro({
gridId: useId(),
rowDataSource: ds,
columns,
filterModel: {
age: {
simple: {
columnId: "age",
kind: "number",
operator: "greater_than_or_equal",
value: 30,
},
},
},
});
return (
<div style={{ height: 500, display: "flex", flexDirection: "column" }}>
<div style={{ flex: "1" }}>
<LyteNyteGrid grid={grid} />
</div>
</div>
);
}
Use date filters for columns containing date values. Beyond common filter operators, date filters allow filtering to specific time periods, such as the first quarter of the current year.
The date filter doesn't assume column values are dates. Your row data source must handle date
filtering. In some cases, such as with Client Row Data Sources, you'll need to supply a filterToDate
function to convert column values to dates. See the
Client Row Data Source guide for examples.
In the example below we filter the rows to only keep those rows that are in Q2 of the year or don't have a date value.
"use client";
import {
LyteNyteGrid,
useLyteNytePro,
useClientDataSource,
} from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import { ColumnProReact } from "@1771technologies/lytenyte-pro/types";
import { companiesWithPricePerf } from "@1771technologies/sample-data/companies-with-price-performance";
import { useId } from "react";
const columns: ColumnProReact[] = [
{ id: "Company" },
{
id: "YearEnd",
headerName: "Year End",
sortable: true,
type: "date",
uiHints: { sortButton: true },
},
{ id: "Employee Cnt" },
{ id: "Country" },
{ id: "Price" },
];
export function FilterDate() {
const ds = useClientDataSource({
data: companiesWithPricePerf,
filterToDate: (c) => {
if (!c) return new Date();
return parseMonthDay(c as string);
},
});
const grid = useLyteNytePro({
gridId: useId(),
rowDataSource: ds,
columns,
filterModel: {
YearEnd: {
simple: {
kind: "date",
columnId: "YearEnd",
datePeriod: "quarter-2",
operator: "all_dates_in_the_period",
value: "",
},
},
},
});
return (
<div style={{ height: 500, display: "flex", flexDirection: "column" }}>
<div style={{ flex: "1" }}>
<LyteNyteGrid grid={grid} />
</div>
</div>
);
}
function parseMonthDay(
dateString: string,
year: number = new Date().getFullYear()
): Date {
// Create a date from the string plus the current year
const date = new Date(`${dateString}, ${year}`);
console.log(date);
// Check if the date is valid
if (isNaN(date.getTime())) {
throw new Error("Invalid date string format");
}
return date;
}
When you need to filter a column using two conditions, use a combined filter. This lets you
create an and/or filter for a given column. The combined filter takes left and right operands
for filtering, with an operator that can be either and
or or
.
"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 FilterCombined() {
const ds = useClientDataSource({
data: bankDataSmall,
});
const grid = useLyteNytePro({
gridId: useId(),
rowDataSource: ds,
columns,
filterModel: {
age: {
simple: {
kind: "combined",
left: {
columnId: "age",
kind: "number",
operator: "greater_than_or_equal",
value: 30,
},
operator: "and",
right: {
columnId: "age",
kind: "number",
operator: "less_than_or_equal",
value: 35,
},
},
},
},
});
return (
<div style={{ height: 500, display: "flex", flexDirection: "column" }}>
<div style={{ flex: "1" }}>
<LyteNyteGrid grid={grid} />
</div>
</div>
);
}
While the filters above cover most use cases, sometimes you need custom control over filtering
behavior. Function filters serve this purpose. Write an arbitrary function predicate that returns
true
for rows you want to keep (not filter out). For example we can filter out all the rows that
have an odd age value.
"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 FilterFunction() {
const ds = useClientDataSource({
data: bankDataSmall,
});
const grid = useLyteNytePro({
gridId: useId(),
rowDataSource: ds,
columns,
filterModel: {
age: {
simple: {
kind: "function",
// only even ages
func: (api, row) => api.rowIsLeaf(row) && row.data.age % 2 === 0,
},
},
},
});
return (
<div style={{ height: 500, display: "flex", flexDirection: "column" }}>
<div style={{ flex: "1" }}>
<LyteNyteGrid grid={grid} />
</div>
</div>
);
}
The filterModel
property serves as the source of truth for simple filters in LyteNyte Grid.
Perform common operations by setting values on the grid state. For example, to delete a filter:
const model = grid.state.filterModel;
// Clear all filters
model.set({});
// Delete a specific filter
const columnId = "<id-of-column-to-remove>";
model.set((prev) => {
const next = { ...prev };
delete next[columnId];
return next;
});