datatable filter error

UI Components for React
Post Reply
kuttubek
Posts: 6
Joined: 23 Sep 2014, 10:27

12 Jul 2022, 13:50

My datatable work correctly, but filter not work. Always throw exception below

Code: Select all

Uncaught TypeError: filters[field] is undefined
    onInputChange datatable.esm.js:2842
    onChange datatable.esm.js:3122
    React 15
        callCallback
        invokeGuardedCallbackDev
        invokeGuardedCallback
        invokeGuardedCallbackAndCatchFirstError
        executeDispatch
        processDispatchQueueItemsInOrder
        processDispatchQueue
        dispatchEventsForPlugins
        dispatchEventForPluginEventSystem
        batchedUpdates$1
        batchedUpdates
        dispatchEventForPluginEventSystem
        dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
        dispatchEvent
        dispatchDiscreteEvent
my code is

Code: Select all

import React, { useState, useEffect, useRef } from 'react';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { Dropdown } from 'primereact/dropdown';
import { Button } from 'primereact/button';
import { Panel } from 'primereact/panel';
import { Toast } from 'primereact/toast';
import { useNavigate } from "react-router-dom";
import { CompanyService } from '../service/CompanyService';
import { LegalFormService } from '../service/LegalFormService';
import AppNavbar from '../public/AppNavbar';

export const ProcurementList = () => {

    const [loading, setLoading] = useState(false);
    const [totalRecords, setTotalRecords] = useState(0);
    const [entities, setEntities] = useState(null);
    const [selectedEntity, setSelectedEntity] = useState(null);
    const [legalForms, setLegalForms] = useState(null);
    const toast = useRef(null);
    const [lazyParams, setLazyParams] = useState({
        first: 0,
        rows: 10,
        page: 1,
        sortField: null,
        sortOrder: null,
        filters: {
            'inn': { value: '', matchMode: 'contains' },
            'title': { value: '', matchMode: 'contains' },
            'form': { value: '', matchMode: 'contains' },
            'field': {value: '', matchMode: 'contains'}
        }
    });

    const service = new CompanyService();
    const navigate = useNavigate();


    let loadLazyTimeout = null;

    useEffect(() => {
        loadLazyData();
    },[lazyParams])

    const loadLazyData = () => {
        setLoading(true);

        if (loadLazyTimeout) {
            clearTimeout(loadLazyTimeout);
        }

        loadLazyTimeout = setTimeout(() => {
            service.getListParam(lazyParams, navigate).then(data => {
                setTotalRecords(data.totalElements);
                setEntities(data.content);
                setLoading(false);
            });

            new LegalFormService().grouped(navigate).then(data => setLegalForms(data));
        });
    }

    const onPage = (event) => {
        setLazyParams(event);
    }

    const onSort = (event) => {
        setLazyParams(event);
    }

    const onFilter = (event) => {
        event['first'] = 0;
        setLazyParams(event);
    }

    const statusRowFilterTemplate = (options) => {
        return <Dropdown value={options.value} options={legalForms} onChange={(e) => {
            console.log(e.value);
            options.filterApplyCallback(e.value);
        }} 
                    optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" optionGroupTemplate={groupedItemTemplate} 
                    placeholder="Select a Status" className="p-column-filter" showClear />;
    }

    const groupedItemTemplate = (option) => {
        return (
            <div>{option.label}</div>
        );
    }

    const onRowSelect = (event) => {
        navigate('/procurement_detail', {state: event.data});
    }

    const gotoUsers = (rowData) => {
        navigate('/procurement_users', {state: rowData});
    }

    const userBodyTemplate = (rowData) => {
        return <Button icon="pi pi-user" className="p-button-rounded p-button-info p-button-outlined" aria-label="User" onClick={() => gotoUsers(rowData)} />;
    }

    return (
        <div>
            <Toast ref={toast} />

            <Panel>
                <AppNavbar/>
            </Panel>
            <div className="card">
                <DataTable value={entities} lazy filterDisplay="row" responsiveLayout="scroll" dataKey="id"
                    paginator first={lazyParams.first} rows={10} totalRecords={totalRecords} onPage={onPage}
                    onSort={onSort} sortField={lazyParams.sortField} sortOrder={lazyParams.sortOrder}
                    globalFilterFields={['inn', 'title', 'form']}
                    onFilter={onFilter} filters={lazyParams.filters} loading={loading}
                    selectionMode="single" selection={selectedEntity} onSelectionChange={e => setSelectedEntity(e.value)}
                    onRowSelect={onRowSelect}>
                    <Column field="inn" header="Pin" sortable filter={true} filterField='inn' filterPlaceholder="Search by Pin" />
                    <Column field="title" header="Name" sortable filter={true} filterPlaceholder="Search by country" />
                    <Column field="form.title" sortable header="LegalForm" showFilterMenu={false} filterMenuStyle={{ width: '14rem' }} 
                        style={{ minWidth: '12rem' }}  filter filterElement={statusRowFilterTemplate} />
                    <Column field="action" header="Action" style={{ minWidth: '6rem' }} body={userBodyTemplate} />
                </DataTable>
            </div>
        </div>
    );
}

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

15 Jul 2022, 14:30

You didn't post your React version or your PrimeReact version?
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 11.0.3 / PF Extensions 11.0.3
PrimeReact 8.0.0

kuttubek
Posts: 6
Joined: 23 Sep 2014, 10:27

03 Aug 2022, 12:31

My React version 18 primereact version 8.1.1

here my dependencies from package.json

"dependencies": {
"axios": "^0.27.2",
"jwt-decode": "^3.1.2",
"moment": "^2.29.4",
"primeicons": "^5.0.0",
"primereact": "^8.1.1",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-final-form": "^6.5.9",
"react-native-uuid": "^2.0.1",
"react-router-dom": "^6.3.0",
"web-vitals": "^2.1.4"
}

result of in the console command
npm view react version
18.2.0

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

03 Aug 2022, 21:07

I think your bug is here:

Code: Select all

filters: {
            'inn': { value: '', matchMode: 'contains' },
            'title': { value: '', matchMode: 'contains' },
            'form': { value: '', matchMode: 'contains' },
            'field': {value: '', matchMode: 'contains'}
        }
"field" doesn't look like its in your JSON and i think "form" should be "form.title" based on your columns?
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 11.0.3 / PF Extensions 11.0.3
PrimeReact 8.0.0

kuttubek
Posts: 6
Joined: 23 Sep 2014, 10:27

05 Aug 2022, 11:23

I removed title, form and field in the columns and filters object, left only 'inn' field.
But get some error

Code: Select all

Uncaught TypeError: filters[field] is undefined
    onInputChange datatable.esm.js:2842
    onChange datatable.esm.js:3122
    React 23
    js index.js:8
    factory react refresh:6
    Webpack 3
After removed my code below

Code: Select all

import React, { useState, useEffect, useRef } from 'react';
import { DataTable } from 'primereact/datatable';
import { FilterMatchMode } from 'primereact/api';
import { Column } from 'primereact/column';
import { Panel } from 'primereact/panel';
import { Toast } from 'primereact/toast';
import { useNavigate } from "react-router-dom";
import { CompanyService } from '../service/CompanyService';
import AppNavbar from '../public/AppNavbar';

export const ProcurementList = () => {

    const [loading, setLoading] = useState(false);
    const [totalRecords, setTotalRecords] = useState(0);
    const [entities, setEntities] = useState(null);
    const toast = useRef(null);
    const [lazyParams, setLazyParams] = useState({
        first: 0,
        rows: 10,
        page: 1,
        sortField: null,
        sortOrder: null,
        filters: {
            'inn': { value: null, matchMode: FilterMatchMode.CONTAINS}
        }
    });

    const service = new CompanyService();
    const navigate = useNavigate();


    let loadLazyTimeout = null;

    useEffect(() => {
        loadLazyData();
    },[lazyParams])

    const loadLazyData = () => {
        setLoading(true);

        if (loadLazyTimeout) {
            clearTimeout(loadLazyTimeout);
        }

        loadLazyTimeout = setTimeout(() => {
            service.getListParam(lazyParams, navigate).then(data => {
                setTotalRecords(data.totalElements);
                setEntities(data.content);
                setLoading(false);
            });
        });
    }

    const onPage = (event) => {
        setLazyParams(event);
    }

    const onFilter = (event) => {
        setLazyParams(event);
    }

    return (
        <div>
            <Toast ref={toast} />

            <Panel>
                <AppNavbar/>
            </Panel>
            <DataTable value={entities} lazy filterDisplay="row" responsiveLayout="scroll" dataKey="id"
                paginator first={lazyParams.first} rows={10} totalRecords={totalRecords} onPage={onPage}
                onFilter={onFilter} filters={lazyParams.filters} loading={loading}>
                    <Column field="inn" header="INN" filter={true} filterField='inn' filterPlaceholder="Search by INN" />
            </DataTable>
        </div>
    );
}

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

05 Aug 2022, 14:27

Create a code sandbox reproducer so I can see the problem: https://codesandbox.io/s/primereact-test-forked-bbns8k
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 11.0.3 / PF Extensions 11.0.3
PrimeReact 8.0.0

kuttubek
Posts: 6
Joined: 23 Sep 2014, 10:27

08 Aug 2022, 09:41

Melloware I created codesandbox please check the code, link of the below

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

kuttubek
Posts: 6
Joined: 23 Sep 2014, 10:27

12 Aug 2022, 07:27

Please help me!

An error occurred when I used <React.StrictMode> but didn't help me in the my real application.

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

16 Aug 2022, 13:53

Fixed your example: https://codesandbox.io/s/primereact-tes ... entList.js

try mine it filters fine.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 11.0.3 / PF Extensions 11.0.3
PrimeReact 8.0.0

kuttubek
Posts: 6
Joined: 23 Sep 2014, 10:27

27 Aug 2022, 14:05

Thank you very much!

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest