DataTable global filter does not work

UI Components for React
Post Reply
mpprime
Posts: 4
Joined: 10 Apr 2016, 17:47

03 Oct 2022, 17:01

hi everybody!

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;

pagination and sorting work!

habubey
Posts: 32
Joined: 24 Aug 2022, 13:17

04 Oct 2022, 09:28

Hi!,
Thank you for your report. We'll let you know if there's a bug that needs to be fixed

habubey
Posts: 32
Joined: 24 Aug 2022, 13:17

08 Oct 2022, 22:00

Hello,
I have checked your code and I think your issue has been fixed already. Please see attached link below (you will see a codesandbox links bottom of the page ).

https://github.com/primefaces/primereact/issues/2903

If you think that this is not as same as your issue. Could you please provide us with a reproducer based on the template below;

https://codesandbox.io/s/primereact-test-forked-bbns8k

Melloware
Posts: 3373
Joined: 22 Apr 2013, 15:48

11 Oct 2022, 16:24

I think its this one and its fixed: https://github.com/primefaces/primereact/issues/3430
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 12.0.0 / PF Extensions 12.0.1
PrimeReact 8.6.1

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest