Filterbar

Add filter to your datatable easy-way.

Usage

Simple Usage

Created At

Status

preview

<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

<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

preview

<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

preview

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