-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Description
Describe the bug
When using custom filterElement in DataTable column, runtime argument passed to rendering function is not of type declared in ColumnFilterElementTemplateOptions.filterModel but actually ColumnFilterMetaData | ColumnFilterMetaDataWithConstraint, example:
The TypeScript definition for ColumnFilterElementTemplateOptions.filterModel incorrectly declares it as ColumnFilterModelOptions (a dictionary type), but the runtime implementation in ColumnFilter.js actually passes a single ColumnFilterMetaData object.
This forces developers to either:
- Use any type to bypass TypeScript errors
- Apply incorrect type casts
- Lose type safety when implementing custom filter elements
In ColumnFilter.js:
Line 50 - Extracts single field's metadata:
const filterModel = props.filters[field];
Line 512 - Passes single metadata object to user's filterElement:
ObjectUtils.getJSXElement(getColumnProp('filterElement'), { field, index, filterModel: model, // 'model' is ColumnFilterMetaData, not ColumnFilterModelOptions value, filterApplyCallback, filterCallback })
Line 432 - Returns array of individual ColumnFilterMetaData objects:
const fieldConstraints = () => { return filterModel ? filterModel.constraints || [filterModel] : []; };
Line 91 - Uses .matchMode directly:
const isRowMatchModeSelected = (matchMode) => { return filterModel && filterModel.matchMode === matchMode; };
Language
TypeScript 5.x
Build / Runtime
[ ] Angular
[ ] Vue
[x] React
[ ] Other
Browser(s)
All (this is a TypeScript definition issue)
Reproducer
No response
System Information
Binaries:
Node: 20.11.0
Yarn: 1.22.19
npm: 10.2.4
Browsers:
Edge: Chromium (140.0.3485.81)
Internet Explorer: 11.0.26100.1882
npmPackages:
primereact: ^10.9.2 => 10.9.2
react: ^18.3.1 => 18.3.1Steps to reproduce the behavior
import { Column } from 'primereact/column';
import { DataTable } from 'primereact/datatable';
import { ColumnFilterElementTemplateOptions } from 'primereact/column';
import { InputText } from 'primereact/inputtext';
import { FilterMatchMode} from "primereact/api";
<Column
field="name"
filter
filterElement={(options: ColumnFilterElementTemplateOptions) => {
// TypeScript error: Property 'matchMode' does not exist on type 'ColumnFilterModelOptions'
const isCustomMode = options.filterModel.matchMode === FilterMatchMode.CUSTOM;
// To access matchMode, developers must do:
// const filterData = options.filterModel[options.field] as ColumnFilterMetaData;
// filterModel is already the single field's metadata
return <InputText value={options.value} />;
}}
/>
Expected behavior
interface ColumnFilterElementTemplateOptions {
field: string;
index: number;
filterModel: ColumnFilterMetaData; // Correct type ?
value: any;
filterApplyCallback(value?: any, index?: number): void;
filterCallback(value?: any, index?: number): void;
}