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

Filtering Numbers

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

Note

Applying a number 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.

Basic Number Filtering

LyteNyte Grid provides flexible filter capabilities that let you define any type of number filter. You can check whether a value is equal to, less than, greater than, or evaluate any other numeric comparison.

To create a number 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 products and keeps only rows where the product price is greater than $50:

const filterPrice: Grid.T.FilterFn<GridSpec["data"]> = (row) => {
  return row.data.price > 50;
};

Click the Price Greater Than $300 switch to toggle the filter state.

Number Filtering

Fork code on stack blitzFork code on code sandbox

Number Filter Model

Define number 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 number 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 FilterNumberOperator =
  | "greater_than"
  | "greater_than_or_equals"
  | "less_than"
  | "less_than_or_equals"
  | "equals"
  | "not_equals";


export interface FilterNumber {
  readonly operator: FilterNumberOperator;
  readonly value: number;
}


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


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

Open the filter popover by clicking the funnel icon on the Price column.

Number Filter User Interface

Fork code on stack blitzFork code on code sandbox

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 evaluateNumberFilter = (operator: FilterNumberOperator, compare: number, value: number) => {
    if (operator === "equals") return value === compare;
    if (operator === "greater_than") return compare > value;
    if (operator === "greater_than_or_equals") return compare >= value;
    if (operator === "less_than") return compare < value;
    if (operator === "less_than_or_equals") return compare <= value;
    if (operator === "not_equals") return value !== compare;


    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 guide only covers number filters, so return false for non-number values.
      if (typeof value !== "number") return false;


      const compareValue = value;


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


      if (!filter.right) return leftResult;


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


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

Next Steps