Custom filter for DataTable

[larrasu]

I have a custom filter outside the Column component and I would like to create a custom filter menu. It won't work. Here's what I have so far:

const filters = ref({
    global: { value: null, matchMode: FilterMatchMode.CONTAINS },
    status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] }
})

const selected = ref()
const filter = ref()
const filterStatus = ref([
    { name: 'Active', key: 'active' },
    { name: 'Inactive', key: 'inactive' }
])

const apply = () => {
    selected.value = selectedFilterStatus.value
    console.log(selectedFilterStatus.value)
}

const toggleFilter = (event) => {
    filter.value.toggle(event)
}

<DataTable v-model:filters="filters">
    <template #header> 
        <Button type="button" icon="pi pi-filter" label="Filter" size="small" @click="toggleFilter"
            :pt-options="{ mergeProps: true }" :pt="{
                root: {
                    class: '!bg-blue-100 !text-blue-500 !border-blue-100 hover:!bg-blue-200 hover:!border-blue-200'
                }
            }" />
        <Menu ref="filter" :popup="true" :pt="{
            content: {
                class: ['bg-transparent hover:!bg-transparent']
            }
        }">
            <template #start>
                <p class="font-bold px-6 py-3 border-b">Filter Options</p>
                <div class="my-4 px-6 space-y-2">
                    <div v-for="(status, index) of filterStatus" :key="index" class="flex items-center gap-2">
                        <Checkbox v-model="selectedFilterStatus" :id="status.key" :name="status.key" :value="status.key" />
                        <label :for="status.key">{{ status.name }}</label>
                    </div>
                </div>
            </template>
            <template #end>
                <div class="flex justify-end gap-1 px-6 py-3 border-t">
                    <Button label="Reset" severity="white" size="small" rounded @click="selectedFilterStatus = null" />
                    <Button label="Apply" size="small" rounded @click="apply" />
                </div>
            </template>
        </Menu>
    </template>
    ...
</DataTable>

[tugcekucukoglu]

Could you send a reproducer link?