NpFilter

A table filter component that supports a two-level filter interaction.

Basic Usage

浏览器不支持，请手动复制 index.en.vue

<script setup lang="tsx">
import { ref } from 'vue'
import { NpFilter } from '../index'

const params = ref({})

const items = [
  {
    label: 'Status',
    key: 'status',
    options: [
      { label: 'In Progress', value: 'ongoing' },
      { label: 'Paused', value: 'paused' },
      { label: 'Done', value: 'done' },
    ],
  },
  {
    label: 'Priority',
    key: 'priority',
    searchable: true,
    multiple: false,
    options: [
      { label: 'High', value: 'high' },
      { label: 'Medium', value: 'medium' },
      { label: 'Low', value: 'low' },
    ],
  },
  {
    label: 'Creator',
    key: 'creator',
    searchable: true,
    options: [
      { label: 'Alice', value: 'alice' },
      { label: 'Bob', value: 'bob' },
      { label: 'Carol', value: 'carol' },
    ],
  },
]

const handleChange = (newParams: Record<string, any>) => {
  console.log('filter change:', newParams)
}
</script>

<template>
  <div>
    <NpFilter v-model:params="params" :items="items" @change="handleChange">
      <n-button>Filter</n-button>
    </NpFilter>

    <pre>{{ JSON.stringify(params, null, 2) }}</pre>
  </div>
</template>

Grouped Options

浏览器不支持，请手动复制 group.en.vue

<script setup lang="ts">
import { ref } from 'vue'
import { NpFilter } from '../index'

const params = ref({})

const items = [
  {
    label: 'Priority',
    key: 'priority',
    searchable: true,
    options: [
      { title: 'Urgent', options: [{ label: 'High', value: 'high' }] },
      {
        title: 'Normal',
        options: [
          { label: 'Medium', value: 'medium' },
          { label: 'Low', value: 'low' },
        ],
      },
    ],
  },
]

const handleChange = (newParams: Record<string, any>) => {
  console.log('filter change:', newParams)
}
</script>

<template>
  <div>
    <NpFilter v-model:params="params" :items="items" @change="handleChange">
      <n-button>Filter</n-button>
    </NpFilter>

    <pre>{{ JSON.stringify(params, null, 2) }}</pre>
  </div>
</template>

Placement

浏览器不支持，请手动复制 placement.en.vue

<script setup lang="ts">
import { ref } from 'vue'
import { NpFilter } from '../index'

const leftParams = ref({})
const rightParams = ref({})

const items = [
  {
    label: 'Status',
    key: 'status',
    options: [
      { label: 'In Progress', value: 'ongoing' },
      { label: 'Paused', value: 'paused' },
      { label: 'Done', value: 'done' },
    ],
  },
  {
    label: 'Priority',
    key: 'priority',
    multiple: false,
    options: [
      { label: 'High', value: 'high' },
      { label: 'Medium', value: 'medium' },
      { label: 'Low', value: 'low' },
    ],
  },
]
</script>

<template>
  <div style="display: flex; gap: 16px; justify-content: space-between">
    <div>
      <NpFilter v-model:params="leftParams" :items="items" placement="right">
        <n-button>Pop to the right</n-button>
      </NpFilter>
      <pre>{{ JSON.stringify(leftParams, null, 2) }}</pre>
    </div>

    <div style="text-align: right">
      <NpFilter v-model:params="rightParams" :items="items" placement="left">
        <n-button>Pop to the left</n-button>
      </NpFilter>
      <pre>{{ JSON.stringify(rightParams, null, 2) }}</pre>
    </div>
  </div>
</template>

Props

Prop	Description	Type	Default
params	Filter params	Record<string, any>	{}
options	Filter option configs	FilterOption[]	[]
trigger	Trigger mode	'click' | 'hover'	'click'
placement	Popover placement	'left' | 'right'	-

FilterOption

Prop	Description	Type	Default
label	Category label	string | () => VNode	-
key	Corresponding key in params	string	-
icon	Category icon	VNode | () => VNode	-
multiple	Whether multi-select is supported (default true)	boolean	true
searchable	Whether search is supported	boolean	false
options	Option configs	Array<ParamsOption> | Array<{title, options}>	-

Events

Event	Description	Callback
change	Triggered when filters change	(params: Record<string, any>) => void
update:params	Triggered when params update	(params: Record<string, any>) => void