Filterbar
Add filter to your datatable easy-way.
Usage
Simple Usage
Created At
Status
vue
<template>
<p-filterbar :schema="schema" v-model="query" />
</template>
<script setup>
import { defineFilter } from '@privyid/persona/core'
const query = ref({})
const schema = defineFilter([
{
type: 'toggle',
key : 'is_active',
},
{
type: 'date',
key : 'created_at',
},
{
type : 'select',
key : 'status',
options: [
'Draft',
'Pending',
'Completed',
],
},
])
</script>
Types
Toggle
preview
vue
<template>
<p-filterbar :schema="schema" v-model="query" />
</template>
<script setup>
import { defineFilter } from '@privyid/persona/core'
const schema = defineFilter([
{
type: 'toggle',
key : 'is_active',
},
])
</script>
Select
Location
vue
<template>
<p-filterbar :schema="schema" v-model="query" />
</template>
<script setup>
import { defineFilter } from '@privyid/persona/core'
const schema = defineFilter([
{
type : 'select',
key : 'location',
options: [
'Jakarta',
'Bandung',
'Yogyakarta',
],
},
])
</script>
Multiselect
Status
vue
<template>
<p-filterbar :schema="schema" v-model="query" />
</template>
<script setup>
import { defineFilter } from '@privyid/persona/core'
const schema = defineFilter([
{
type : 'multiselect',
key : 'status',
options: [
'Draft',
'Pending',
'Completed',
],
},
])
</script>