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

Server Row Filtering

Send a custom filter model to the server to filter rows before returning them to the client.

Note

This guide covers filtering for the server row data source. For details on client-side filtering, start with the Filter Text guide.

Filtering Rows

To filter rows on the server, define a filter model and include it in each data request. The useServerDataSource hook accepts a queryKey array. When any value in the array changes, the server data source resets and fetches new rows.

Include the filter model in the queryKey dependency array. The data source passes the queryKey value to the queryFn. The queryFn then sends the filter model to the server, which applies the filter before returning the data.

The following demo passes a custom filter model to the queryKey property. Click the funnel icon in the column header to apply a filter.

Server Row Filtering

Fork code on stack blitzFork code on code sandbox

To filter rows, the demo creates a filter model and sends it to the server. The filter model interface appears below. The server uses the GridFilter type to evaluate and filter rows.

export type FilterStringOperator = "equals" | "not_equals" | "not_contains" | "contains";


export interface FilterString {
  readonly operator: FilterStringOperator;
  readonly value: string;
  readonly kind: "text";
}


export type FilterNumberOperator =
  | "equals"
  | "not_equals"
  | "less_than"
  | "greater_than"
  | "less_than_or_equal"
  | "greater_than_or_equal";
export interface FilterNumber {
  readonly operator: FilterNumberOperator;
  readonly value: number;
  readonly kind: "number";
}


export type FilterDateOperator = "before" | "after";


export interface FilterDate {
  readonly operator: FilterDateOperator;
  readonly value: string;
  readonly kind: "date";
}


export type GridFilter = FilterString | FilterDate | FilterNumber;

To send the filter model to the server, add it to the queryKey as shown below. The server then evaluates the filter model and returns only the matching rows.

const [filters, setFilters] = useState<Record<string, GridFilter>>({});


const ds = useServerDataSource({
  queryFn: (params) => Server(params.requests, params.queryKey[0]),
  queryKey: [filters] as const,
  blockSize: 50,
});

This is just one approach to server-side filtering. We recommend aligning your client-side filter model with your existing server format to maintain consistency.

Next Steps