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

Set Filtering

Create a filter that includes or excludes rows based on whether a cell value appears in a set.

Note

Applying a set 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 Set Filtering

A set filter checks whether a cell’s value is a member of a defined set of values. A set filter supports two possible checks, which are inverses of each other:

  • Inclusion: Checks whether the cell’s value exists in the set of allowed values.
  • Exclusion: Checks whether the cell’s value does not exist in the set of disallowed values.

Implementing a set filter in LyteNyte Grid involves creating a filter function that captures the set of values and accepts a row node. The filter function must return true to keep the row or false to remove it.

Type a filter query to select product Name values to display. The grid shows only rows that match the selected values.

Basic Set Filtering

Office Suite
Fork code on stack blitzFork code on code sandbox

Tree Set Filters

A tree set filter represents filter options as a structured tree. Each item in the tree has a parent-child relationship with other items. Tree set filters allow the grid to filter rows based on an arbitrary hierarchical relationship.

A common use case for tree set filters is date filtering. Date values are represented by year, month, and day. The demo below demonstrates a tree set filter. Click the funnel icon on the Sale Date column to open the filter popover.

Tree Set Filter

Fork code on stack blitzFork code on code sandbox

The tree set filter uses the Tree View component exported by LyteNyte Grid. The Tree View component creates a hierarchical structure from a set of paths. The following code, from the demo’s filter.tsx file, generates those paths.

export const saleDateItems = [...new Set(data.map((x) => x.saleDate))].sort(compareDesc).map((x) => ({
  id: x,
  name: String(getDate(x)),
  path: [String(getYear(x)), monthToName[getMonth(x) as keyof typeof monthToName]],
}));

LyteNyte Grid represents selection state using the RowSelectionLinked type. By default, all items are selected, and the grid filters out any items that users deselect. The code below determines which rows should be excluded.

The main logic lives in the excludeSets memo. The code traverses the selection tree to identify deselected items. As the traversal progresses, the logic tracks the selection state of each node to determine whether a row should be filtered out.

const [model, setModel] = useState<Record<string, Grid.T.RowSelectionLinked>>({});
const filterModel = usePiece(model, setModel);
const [expansions, setExpansions] = useState<Record<string, Record<string, boolean | undefined>>>({});
const treeSetExpansions = usePiece(expansions, setExpansions);


const excludeSets = useMemo(() => {
  const selectEntries = Object.entries(model)
    .map(([columnId, state]) => {
      // For this demo, only the saleDate column is handled.
      if (columnId !== "saleDate") return null;


      // Convert the selection tree into a set of excluded ids
      const unselectedItems = saleDateItems.filter((x) => {
        const path = x.path;


        let node: Grid.T.RowSelectionLinked | Grid.T.RowSelectNode = state;
        let selection = node.selected;


        // Traverse the selection tree while tracking the selection state.
        // If traversal stops before the full path, the parent selection
        // state applies to all remaining children.
        for (let i = 0; i < path.length; i++) {
          const p = path.slice(0, i + 1).join("/");


          const n = node.children?.get(p);
          if (!n) break;


          node = n;
          if (node.selected !== undefined) selection = node.selected;
        }


        if (node.children?.get(x.id)?.selected !== undefined) {
          selection = node.children.get(x.id)!.selected!;
        }


        return !selection;
      });


      return [columnId, new Set(unselectedItems.map((x) => x.id))] as const;
    })
    .filter((x) => x && x[1].size !== 0);


  return selectEntries as [string, Set<any>][];
}, [model]);


const filterFn = useMemo<Grid.T.FilterFn<GridSpec["data"]> | null>(() => {
  if (excludeSets.length === 0) return null;


  return (row) => {
    for (const [columnId, set] of excludeSets) {
      const field = row.data[columnId as keyof DataItem];
      if (set.has(field)) return false;
    }


    return true;
  };
}, [excludeSets]);

Note

Tree View wraps LyteNyte Grid, so it uses the same row selection model. For details, see the Row Selection guide.

Next Steps