T
TanStack•14mo ago
extended-salmon

Single input field to filter multiple columns

Hi all, I have been trying to filter multiple columns from a single input field, but am unable to get it to work. Below is how my table is initialised. 
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    onSortingChange: setSorting,
    getSortedRowModel: getSortedRowModel(),
    onColumnFiltersChange: setColumnFilters,
    getFilteredRowModel: getFilteredRowModel(),
    onColumnVisibilityChange: setColumnVisibility,
    onRowSelectionChange: setRowSelection,
    state: {
      sorting,
      columnFilters,
      columnVisibility,
      rowSelection,
    },
  });
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    onSortingChange: setSorting,
    getSortedRowModel: getSortedRowModel(),
    onColumnFiltersChange: setColumnFilters,
    getFilteredRowModel: getFilteredRowModel(),
    onColumnVisibilityChange: setColumnVisibility,
    onRowSelectionChange: setRowSelection,
    state: {
      sorting,
      columnFilters,
      columnVisibility,
      rowSelection,
    },
  });
this is my input 
<Input
  placeholder={`Filter by //columns column(s)`}
  // value={
  // onChange=
  className='max-w-sm dark:bg-boxdark dark:text-white'
/>
<Input
  placeholder={`Filter by //columns column(s)`}
  // value={
  // onChange=
  className='max-w-sm dark:bg-boxdark dark:text-white'
/>
1 Reply
extended-salmon
extended-salmonOP•14mo ago
Solution: Input component: 
<Input
  placeholder='Search...'
  value={filterValue}
  onChange={handleFilterChange}
  className='max-w-sm dark:bg-boxdark dark:text-white'
/>
<Input
  placeholder='Search...'
  value={filterValue}
  onChange={handleFilterChange}
  className='max-w-sm dark:bg-boxdark dark:text-white'
/>
const [filterValue, setFilterValue] = useState('');

const handleFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  setFilterValue(e.target.value);
  table.setGlobalFilter(e.target.value);
};
const [filterValue, setFilterValue] = useState('');

const handleFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  setFilterValue(e.target.value);
  table.setGlobalFilter(e.target.value);
};
In the column def, set 
enableColumnFilter: false
enableColumnFilter: false
for columns you dont want to filter

Did you find this page helpful?