LyteNyte Grid logo for light mode. Links back to the documentation home page.
Github repository for this project. 1771 Technologies home page
Filtering

Filtering Dates

Create custom date filters in LyteNyte Grid. This guide covers common filters for date cell values.

Note

Applying a date filter varies depending on the row source. Refer to the guides below for each supported row data source:

While this guide focuses on using client row filtering, these filter concepts apply to all row sources.

Date Filters

LyteNyte Grid provides flexible filter capabilities that let you define custom date filters. You can check whether two dates are equal, whether a date falls within a specific range, or whether a date falls within a specific time period, such as the first quarter of the year.

Filtering dates is more complex than filtering other data types, since dates can have many representations, formats, and timezones to contend with. In this guide, dates are represented as ISO 8601 date strings.

Note

The demos and code in this section use the data-fns library to simplify date filter implementations. The data-fns library is not required for date filters, but it is recommended. You may also use an alternative library, such as Luxon.

To create a date filter, define a function that receives a row node and returns true to keep the row or false to remove it.

For example, the following function filters a list of orders and keeps only orders with a sale date in 2025.

import { getYear } from "data-fns";


const filter2025: Grid.T.FilterFn<GridSpec["data"]> = (row) => {
  return getYear(row.data.saleDate) === 2025;
};

Click the Sales in 2025 switch to toggle the filter state.

Date Filter

Fork code on stack blitzFork code on code sandbox

Date Filter Model

Define date filters dynamically rather than relying on predefined logic. LyteNyte Grid lets you define a filter model and a set of operations to build custom filters. This section presents one approach. Design the filter model that best fits your application’s requirements.

Begin by defining the type representation for your date filter. The code below defines a basic filter model you can use to create a filter function for the client row data source:

export type FilterDateOperator = "equals" | "before" | "after" | "quarter" | "month";


export interface FilterDate {
  readonly operator: FilterDateOperator;
  readonly value: string | number;
}


export interface GridFilter {
  readonly left: FilterDate;
  readonly right: FilterDate | null;
  readonly operator: "AND" | "OR";
}


export interface GridSpec {
  readonly data: DataItem;
  readonly api: {
    readonly filterModel: PieceWritable<Record<string, GridFilter>>;
  };
}

Open the filter popover by clicking the funnel icon on the Sale Date column.

Date Filter User Interface

Fork code on stack blitzFork code on code sandbox

Note

The demo dynamically generates date values for each row based on the current date. It demonstrates the full range of supported date filters. Since the demo generates dates at runtime, the values change depending on the current date.

The code below defines the filter model. It creates filter model state and passes it to the grid API as an extension. The demo also includes a filter UI for applying filters interactively.

When a user applies a filter, useMemo creates a new filterFn, which you then pass to the client data source. See the filter.tsx file in the demo’s expanded code for the logic that builds the filter UI.

const [filter, setFilter] = useState<Record<string, GridFilter>>({});
const filterModel = usePiece(filter, setFilter);


const filterFn = useMemo(() => {
  const entries = Object.entries(filter);


  const evaluateDateFilter = (operator: FilterDateOperator, compare: string, value: string | number) => {
    if (operator === "equals") return isEqual(compare, value);
    if (operator === "after") return isAfter(compare, value);
    if (operator === "before") return isBefore(compare, value);
    if (operator === "month") return getMonth(compare) === value;
    if (operator === "quarter") return getQuarter(compare) === value;
    return false;
  };


  return entries.map<Grid.T.FilterFn<GridSpec["data"]>>(([column, filter]) => {
    return (row) => {
16 collapsed lines
      const value = row.data[column as keyof GridSpec["data"]];


      // This filter operates on date strings, so return early for non-string values
      if (typeof value !== "string") return false;


      const compareValue = value;


      const leftResult = evaluateDateFilter(filter.left.operator, compareValue, filter.left.value);


      if (!filter.right) return leftResult;


      if (filter.operator === "OR") {
        return leftResult || evaluateDateFilter(filter.right.operator, compareValue, filter.right.value);
      }


      return leftResult && evaluateDateFilter(filter.right.operator, compareValue, filter.right.value);
    };
  });
}, [filter]);

Next Steps