for eg. I have covid data and I display it in the react table it contains the columns like continent, country, new cases, total cases, active cases, deaths etc. now I want to do filtering on the table where it returns row if I enter county or continent name if I enter any other key in input field it should not return anything in the table just show result not found.
global filter function:
function GlobalFilter({filter, setFilter}) {
const[value, setValue] = useState(filter);
const onChange = useAsyncDebounce((value)=>{
setFilter(value || undefined);
}, 1000);
return (
<div className='filter'>
<input value={filter || ''} onChange={(e)=>{
setFilter(e.target.value)
onChange(e.target.value)}} placeholder='Enter Country or Continent'/>
</div>
column of the table:
COLUMNS = [
{
Header : 'Continent',
accessor : 'continent',
},
{
Header : 'Country',
accessor : 'country',
},
{
Header : 'Total Cases',
accessor : 'totalcases',
},
{
Header : 'Active Cases',
accessor : 'activecases',
},
{
Header : 'Total Recovery',
accessor : 'recovery',
},
{
Header : 'Total Death',
accessor : 'deaths',
},
{
Header : 'New Cases',
accessor : 'newcases',
},
]
This is how I usually do this:
const CovidData = () => {
const [data, setData] = useState([//your data goes here])
const [filter, setFilter] = useState(null) //null = show all items
const filteredItems = filter ? data.filter(elem => elem.country === filter) : data
return (
<>
<input onChange={e => setFilter(e.target.value)} />
<TableComp items={filteredItems} />
</>
)
}
This is untested, but you should get the gist :)