i have a problem with the global filter in a datatable.
when i run a search, the filter is not applied.
this is the code:
Code: Select all
import React, {useEffect, useState} from 'react';
import {useNavigate} from 'react-router-dom';
import AuthService from '../service/AuthService';
import {AnagGeneraliService} from '../service/AnagGeneraliService';
import {DataTable} from 'primereact/datatable';
import {Column} from 'primereact/column';
import {Button} from 'primereact/button';
import {InputText} from 'primereact/inputtext';
import {FilterMatchMode} from 'primereact/api';
const AnagraficheComponent = () => {
const navigate = useNavigate();
const authService = new AuthService();
const anagGeneraliService = new AnagGeneraliService();
const [anagrafiche, setAnagrafiche] = useState<any>([]);
const [globalFilterValue, setGlobalFilterValue] = useState('');
const [filters, setFilters] = useState(null);
const [loading, setLoading] = useState(true);
const paginatorLeft = <Button type="button" icon="pi pi-refresh" className="p-button-text"/>;
const paginatorRight = <Button type="button" icon="pi pi-cloud" className="p-button-text"/>;
useEffect(() => {
if (!authService.isLoggedIn()) {
navigate('/login');
}
anagGeneraliService.get()
.then((res) => {
setAnagrafiche(res);
setLoading(false)
});
initFilters();
}, []);
const onGlobalFilterChange = (e) => {
const value = e.target.value;
let _filters1 = {...filters};
_filters1['global'].value = value;
setFilters(_filters1);
setGlobalFilterValue(value);
}
const initFilters = () => {
setFilters({
'global': {value: null, matchMode: FilterMatchMode.CONTAINS}
});
setGlobalFilterValue('');
}
const clearFilter = () => {
initFilters();
}
const renderHeader = () => {
return (
<div className="flex justify-content-between">
<Button type="button" icon="pi pi-filter-slash" label="Clear" className="p-button-outlined" onClick={clearFilter}/>
<span className="p-input-icon-left">
<i className="pi pi-search"/>
<InputText value={globalFilterValue} onChange={onGlobalFilterChange} placeholder="Cerca..."/>
</span>
</div>
)
}
const header = renderHeader();
return (
<div className="grid table-demo">
<div className="col-12">
<div className="card">
<h5>ANAGRAFICHE</h5>
<DataTable value={anagrafiche}
showGridlines
stripedRows
paginator
paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords}"
rows={10}
rowsPerPageOptions={[10, 20, 50, anagrafiche.length]}
paginatorLeft={paginatorLeft}
paginatorRight={paginatorRight}
responsiveLayout="scroll"
emptyMessage="Nessun elemento trovato"
dataKey="ag_id"
loading={loading}
globalFilterFields={['ag_cod', 'ag_nome', 'ag_cognome']}
header={header}>
<Column field="ag_cod" header="Codice" sortable/>
<Column field="ag_nome" header="Nome" sortable/>
<Column field="ag_cognome" header="Cognome" sortable/>
</DataTable>
</div>
</div>
</div>
);
}
export default AnagraficheComponent;