Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
  • Có gì không ổn?
#8,483 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
52/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
react, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

So sánh khai báo ColumnFilterElementTemplateOptions với cách sử dụng trong thời gian chạy ở ColumnFilter.js, đặc biệt là filterModel được truyền vào filterElement quanh các dòng 50, 432 và 512. Xác minh reproducer TypeScript được cung cấp và cập nhật khai báo để khớp với đối tượng siêu dữ liệu trong thời gian chạy; hoàn thành khi việc truy cập matchMode không còn gây ra lỗi kiểu.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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

Ngôn ngữ chính
CSS
Star
8.3k
Fork
1.2k
Không có pull request nào được merge trong 30 ngày

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của primefaces/primereact

Tất cả issue của primefaces/primereact

Issue tương tự

Thêm issue về Web Dev

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.