Register FilterService

[colinbes]

I have FilterService.register working with primevue 3.9.1 but am unable to figure out how to use with primevue 3.12.0.

Does anyone have or has actually used primevue > 3.10.0 with typescript? I would love to see some example of using FilterService.

I have

Code: Select all

<script setup lang="ts">

  import { ref } from 'vue'
  import { FilterMatchMode, FilterOperator, FilterService } from 'primevue/api'
  import { Action } from '../interfaces/actions'
  import { DataTableFilterMetaData, DataTableOperatorFilterMetaData } from 'primevue/datatable'
  
  FilterService.register("stagesGTE", (value: any, filter: any) => {
    if (filter == null) return true
    return value.length >= filter
  })
  FilterService.register("stageLT", (value: any, filter: any) => {
    if (filter == null) return true
    return value.length < filter
  })
  
  const matchModeOptions =ref( [
  	{label: 'GTE', value: 'stagesGTE'},
  	{label: 'LT', value: 'stageLT'}
  ])
 
  const filters = ref({
  	deleted: { value: null, matchMode: FilterMatchMode.EQUALS } as DataTableFilterMetaData,
  	name: {
    		operator: FilterOperator.AND,
    		constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }]
  	} as DataTableOperatorFilterMetaData, // [i]as DataTableOperatorFilterMetaData is required to not cause TypeScript errors (since 3.10.0)[/i]
  	program: {
    		operator: FilterOperator.AND,
    		constraints: [{ value: null, matchMode: "stagesGTE" }]
  	}
  })
</script>  
<template>
  <DataTable :value="actions" :rowHover="true" [b]v-model:filters="filters"[/b]></DataTable>
</template>  

where v-model_filters gives type error caused by constraints on matchMode being DataTableFilterMetaData | DataTableOperatorFilterMetaData and not string.

Code: Select all

Type '{ program: { operator: string; constraints: { value: null; matchMode: string; }[]; }; }' is not assignable to type 'DataTableFilterMeta'

I am either missing something in updating from 3.9.1 or something is very broken.

[tugce.kucukoglu]

Please try to use 3.12.1.