Skip to content

ColumnFilterElementTemplateOptions.filterModel type mismatch: declared as ColumnFilterModelOptions but runtime passes ColumnFilterMetaData #8483

@TwistedAnckle

Description

@TwistedAnckle

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:

Image

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
Image

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.1

Steps 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;
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: Needs TriageIssue will be reviewed by Core Team and a relevant label will be added as soon as possible

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions