Grid Filters

Graphite Grid provides a filter expression model for filter rows in the grid. The filterModel defines the current filters that should be applied to the grid.

The filterModel is an array of FilterExpr objects. When a client row data source is used, filters are applied before row pivots or sorting the rows in the grid. Furthermore, filters are independent and may be applied in any order. When a controlled row data source is used, it is up to the data source to filter row data.

Below is a basic example. It will filter any row where the price column has a value greater than 100.

export function GridFiltersBasic() {
  const grid = useGraphiteGrid({
    initial: {
      filterModel: [
        {
          operator: "<",
          left: { operator: "column", columnId: "price" },
          right: { operator: "constant", value: 100 },
        },
      ],
      // other properties
    },
  });
 
  return (
    <div style={{ height: 400 }}>
      <GraphiteGridDom state={grid} />
    </div>
  );
}CopyCopied!

Filter Expression Values

A filter expression has the type FilterExpr which is a recursive union of filter types.

export type FilterExpr =
  | ExprConstant
  | ExprColumn
  | ExprUnaryLogical
  | ExprBinaryLogical
  | ExprBinary
  | ExprIn
  | ExprLogicalCombinator;CopyCopied!

ExprConstant

ExprConstant is a primitive value, like 100. Generally used in other filter expression types:

const constant: ExprConstant = { operator: "constant", value: 100 };CopyCopied!

ExprColumn

To use a column in a filter expression, the ExprColumn type may be used:

const column: ExprColumn = {
  operator: "column",
  columnId: "price",
};CopyCopied!

ExprUnaryLogical

Unary logical expressions can be represented using the ExprUnaryLogical type:

const unaryExpr: ExprUnaryLogical = {
  operator: "!",
  value: { columnId: "isOn", operator: "column" }, // Can be any FilterExpr
};CopyCopied!

ExprBinaryLogical

Binary logical expressions can be represented using the ExprBinaryLogical type:

const binaryLogicalExpr: ExprBinaryLogical = {
  operator: "<",
  left: { operator: "column", columnId: "price" },
  right: 100,
};CopyCopied!

ExprBinary

Binary expressions can be represented using the ExprBinary type:

const binaryExpr: ExprBinary = {
  operator: "+",
  left: { operator: "column", columnId: "price" },
  right: 200,
};CopyCopied!

ExprIn

The ExprIn type allows filters to test for membership.

const inExpr: ExprIn = {
  operator: "in", // may also be "notin"
  value: { operator: "column", columnId: "exchange" },
  set: new Set(["Nasdaq"]),
};CopyCopied!

The ExprIn will test for membership based on the column's inFilterKey value. Only columns that define an inFilterKey may be used for an ExprIn filter.

ExprLogicalCombinator

The ExprLogicalCombinator can be used to combine Boolean expressions.

const combination: ExprLogicalCombinator = {
  operator: "and",
  left: {
    operator: "<",
    left: { operator: "column", columnId: "price" },
    right: 100,
  },
  right: {
    operator: ">",
    left: { operator: "column", columnId: "price" },
    right: 50,
  },
};CopyCopied!