Using Filter property of PrimeReact DataTable

Question

One of the columns of the DataTable implemented is somewhat like this

{ field: 'FieldValuesAsText#XYZ', header: 'XYZ', width: '150px', sort: true, filterElement: 'No' }

<Column key={col.field} 
        field={col.field} 
        header={col.header}
        body={this.trimContent}
        filter={true}
        filterMatchMode="contains"
        sortable={col.sort}/>

The FieldValuesAsText is a object with XYZ as one of it's attribute. The custom function used in the body property successfully retrieves the value but the problem is when I try to do the filter operation. Since the filter defaults to field which in this case is FieldValuesAsText#XYZ, so it is obviously going to return undefined. How will I be able to make my filter properly work?

Apostolos · Answer 1 · 2020-06-17T09:55:27.267

0

You need to implement a custom filter function. Here is a custom function that I have used to filter a similar column in my Datatable.

filterMatchMode="custom" filterFunction={customFunction}


export const customFunction = (value, filter) => {
  return value.toUpperCase().indexOf(filter.toUpperCase()) >= 0
}

edited Jun 17 '20 at 09:55

answered Jun 12 '20 at 06:19

Apostolos

10,033
5
24
39

what is value and filter parameters here? Is this automatically detects by the Prime React or you need to pass a data here? – John Paulo A. Geronimo Feb 11 '23 at 12:49
if i remember correctly `value` is the value of the column and filter is the typed search string. – Apostolos Feb 14 '23 at 08:08

Using Filter property of PrimeReact DataTable

1 Answers1