Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#8,483 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
52/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Estancado
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

Compara la declaración de ColumnFilterElementTemplateOptions con el uso en tiempo de ejecución en ColumnFilter.js, especialmente con el filterModel que se pasa a filterElement alrededor de las líneas 50, 432 y 512. Verifica el reproductor de TypeScript proporcionado y actualiza la declaración para que coincida con el objeto de metadatos del tiempo de ejecución; se considera completado cuando el acceso a matchMode ya no produce un error de tipos.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Status: Needs Triage
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;
}

Lenguaje dominante
CSS
Estrellas
8.3k
Forks
1.2k
Sin PR fusionados en 30 d

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de primefaces/primereact

Todos los issues de primefaces/primereact

Issues similares

Más issues de Web Dev

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.