Quick Search Filters

Graphite Grid provides a quick filter search for rows containing a specific value. To quickly search across values, provide the quickSearch property on the grid state.

Graphite Grid considers any column with a quickSearchKey property defined in its definition when searching across rows.

export function QuickSearchExample() {
  const grid = useGraphiteGrid({
    initial: {
      columnDefinitions: [
        { id: "exchange", quickSearchKey: "exchange" },
        { id: "symbol", quickSearchKey: "symbol" },
        { id: "currency", quickSearchKey: "currency" },
        // ... other columns
      ],
      quickSearch: "NAS",
      // other properties
    },
  });
 
  const quickSearchValue = grid.api.useApiSlice((s) => s.getQuickSearch());
 
  return (
    <div>
      <label>
        Quick Search:
        <input
          value={quickSearchValue ?? ""}
          onChange={(e) => grid.api.setQuickSearch(e.target.value)}
        />
      </label>
      <div>
        <GraphiteGridDom state={grid} />
      </div>
    </div>
  );
}CopyCopied!

The quick search filter is applied before pivoting or sorting rows and columns. It is useful when the data is relatively small and contains much textual information. When using the Controlled Data Source, handle the quick filter within the data source.