Filtering

Column Filters

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:

In Filters, also known as set filters or tree set filters
Quick Filters, also known as quick search filters

Applying Column Filters

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

Text Filter

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".

Text Filter

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

Number Filter

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.

Number Filter

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

Date Filter

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.

Date Filter

"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;
}

Combined Filter

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.

Combined Filter

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

Function Filter

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.

Function Filter

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

Managing Filters

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

PreviousColumn Pivoting

Next Column In Filter