Multiple filters in one column

[vsSanti]

Is it possible to add multiple kinds of filters in a table?
My use case: the end user should be able to dynamically add filters to the displayed table and different filters over same columns (e.g. filter values equals to ABC - using select; or the ones that contains VX - normal input).

How this should work:

[jaekunchoi]

did you find any solution to this? I'm looking at same issue

[Knufle]

Hey, did you find a solution?

[emanual4real]

I found this example using react-select as a filter which is what I'm currently attempting. Haven't implemented it yet, but appears to work on codesandbox.

https://codesandbox.io/s/3x51yzollq

[emanual4real]

Oops, that doesn't look like react-table v7.

I'm still looking to pass a filter like this:
[{id: 'Category', value: 'English'}, {id: 'Category', value: 'Spanish'}]

[namantayal]

The solution I found is -

create custom filter -
function multiSelectFilter(rows: any, columnIds: any, filterValue: any) {
// Filters only if filters are selected
return filterValue.length === 0
? rows
: rows.filter((row: any) =>
filterValue.includes(String(row.original[columnIds]))
);
}

add custom filter
{
Header: "Name",
accessor: "organization_name",
filter: multiSelectFilter,
},

use multiple filter like -
column.useFilters([list of filter values])

[martitv]

use multiple filter like -
column.useFilters([list of filter values])

where is the useFilters function from?

[namantayal]

const tableInstance = useTable(
{
columns,
data: data,
},
useFilters, ---> Add this in your table instance
);

const tableInstance = useTable({ columns, data })

// code snippet from react table

3 const {
4 getTableProps,
5 getTableBodyProps,
6 headerGroups,
7 rows,
8 prepareRow,
9 } = tableInstance
10
11 return (
12 // apply the table props
13 <table {...getTableProps()}>
14
15 {// Loop over the header rows
16 headerGroups.map(headerGroup => (
17 // Apply the header row props
18 <tr {...headerGroup.getHeaderGroupProps()}>
19 {// Loop over the headers in each row
20 headerGroup.headers.map(column => (
21 // Apply the header cell props
22 <th {...column.getHeaderProps()}>
23 {// Render the header
24 column.render('Header')}

                ----> useFilter can be find in column here

25
26 ))}
27
28 ))}
29
30 {/* Apply the table body props */}
31 <tbody {...getTableBodyProps()}>
32 {// Loop over the table rows
33 rows.map(row => {
34 // Prepare the row for display
35 prepareRow(row)
36 return (
37 // Apply the row props
38 <tr {...row.getRowProps()}>
39 {// Loop over the rows cells
40 row.cells.map(cell => {
41 // Apply the cell props
42 return (
43 <td {...cell.getCellProps()}>
44 {// Render the cell contents
45 cell.render('Cell')}
46
47 )
48 })}
49
50 )
51 })}
52
53
54 )