Datatable Error when using Dropdown filter

[jm-immotech]

Hey, i used the examples from: https://primereact.org/datatable/. Got primereact version 10.8.2

I set up an datatable and try to filter a column as dropdown. Whenever i select something in the filter i get an error in console:

TypeError: Cannot set properties of undefined (setting 'value') at filterCallback2 (primereact_datatable.js?v=9c6d576f:7763:128) at Object.filterApplyCallback2 [as filterApplyCallback] (primereact_datatable.js?v=9c6d576f:7770:13) at Object.onChange (Customers.jsx?t=1723028732378:136:113) at selectItem2 (chunk-336MC4CE.js?v=79c01e69:2325:15) at Object.onOptionClick2 [as onClick] (chunk-336MC4CE.js?v=79c01e69:2270:7) at onClick (chunk-336MC4CE.js?v=79c01e69:1378:13) at onClick (chunk-336MC4CE.js?v=79c01e69:1398:14) at HTMLUnknownElement.callCallback2 (chunk-3QTN4EH6.js?v=79c01e69:3674:22) at Object.invokeGuardedCallbackDev (chunk-3QTN4EH6.js?v=79c01e69:3699:24) at invokeGuardedCallback (chunk-3QTN4EH6.js?v=79c01e69:3733:39)

My code:

const customerData = [ { id: '1', name: 'test1', mail: '[email protected]', created: '1717749194', access: '1723019594', status: 'aktiv', }, { id: '2', name: 'test2', mail: '[email protected]', created: '1717749194', access: '1723019594', status: 'gesperrt', }, ];

const [filters, setFilters] = useState({ global: { value: null, matchMode: FilterMatchMode.CONTAINS }, name: { value: null, matchMode: FilterMatchMode.STARTS_WITH }, mail: { value: null, matchMode: FilterMatchMode.STARTS_WITH }, status: { value: null, matchMode: FilterMatchMode.EQUALS } });

const [statuses] = useState(['gesperrt', 'aktiv']);

`const getSeverity = (customer) => {
switch (customer.status) {
case 'aktiv':
return 'success';

    case 'gesperrt':
        return 'danger';

    default:
        return null;
}

};`

const statusBodyTemplate = (customer) => { return <Tag value={customer.status} severity={getSeverity(customer)}></Tag>; };

const statusItemTemplate = (option) => { return <Tag value={option} severity={getSeverity(option)} />; };

const statusRowFilterTemplate = (options) => { return ( <Dropdown value={options.value} options={statuses} onChange={(e) => options.filterApplyCallback(e.value)} itemTemplate={statusItemTemplate} placeholder="Select One" className="p-column-filter" showClear style={{ minWidth: '12rem' }} /> ); };

<DataTable value={customerData} paginator rows={10} dataKey="id" filters={filters} filterDisplay="row" loading={loading} globalFilterFields={['name', 'mail']} header={header} emptyMessage="No customers found."> <Column field="id" header="#"></Column> <Column field="name" header="Name" filter filterPlaceholder="Name..." style={{ minWidth: '12rem' }} /> <Column field="mail" header="E-Mail" filter filterPlaceholder="E-Mail..." style={{ minWidth: '12rem' }} /> <Column field="created" header="Erstellt am"></Column> <Column field="access" header="Letzter Zugriff"></Column> <Column header="Status" showFilterMenu={false} filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter filterElement={statusRowFilterTemplate} /> </DataTable>

Anyone got an idea?

Thx & greetings!