T
TanStack•2y ago
future-harlequin

Filtering By Two Columns

Anyone could help with filtering? Basically, I have two columns, but at the moment they filter like AND operator, where both have to match in order to show the row. I need them to act like OR operator, where if either the first or second column matches to show that row. 
  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([
    { id: 'fullName', value: '' },
    { id: 'email', value: '' },
  ]);

  const [combinedFilterValue, setCombinedFilterValue] = React.useState<string>("");

  const handleCombinedFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
      const value = event.target.value;
      setCombinedFilterValue(value);
      const updatedFilters = [
          { id: 'fullName', value },
          { id: 'email', value },
      ];
      setColumnFilters(updatedFilters);
  };

<Input
  placeholder="Filter emails or full names..."
  value={combinedFilterValue}
  onChange={handleCombinedFilterChange}
  className="max-w-sm"
/>
  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([
    { id: 'fullName', value: '' },
    { id: 'email', value: '' },
  ]);

  const [combinedFilterValue, setCombinedFilterValue] = React.useState<string>("");

  const handleCombinedFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
      const value = event.target.value;
      setCombinedFilterValue(value);
      const updatedFilters = [
          { id: 'fullName', value },
          { id: 'email', value },
      ];
      setColumnFilters(updatedFilters);
  };

<Input
  placeholder="Filter emails or full names..."
  value={combinedFilterValue}
  onChange={handleCombinedFilterChange}
  className="max-w-sm"
/>
This is my current code for filtering
1 Reply
fascinating-indigo
fascinating-indigo•2y ago
I am also looking for a solution to this problem.

Did you find this page helpful?