np-table Search

Configure a search input via search. It renders at the leftmost of the table header (headerLeft area) and coexists with the headerLeft slot content.

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

<template>
  <np-table :option="option" />
</template>

<script setup lang="ts">
import type { TableOption } from 'naive-plus'

const mockData = Array.from({ length: 50 }, (_, i) => ({
  id: i + 1,
  name: `User ${i + 1}`,
  age: 20 + (i % 30),
  status: i % 3 === 0 ? 'enabled' : i % 3 === 1 ? 'disabled' : 'pending',
}))

const option: TableOption = {
  columns: [
    { key: 'name', label: 'Name' },
    { key: 'age', label: 'Age' },
    { key: 'status', label: 'Status' },
  ],
  search: {
    key: 'keyword',
    placeholder: 'Search name',
  },
  api: {
    fetch: async ({ page, pageSize }, queryParams) => {
      await new Promise<void>(resolve => setTimeout(resolve, 500))

      let items = [...mockData]

      // filter by keyword
      if (queryParams.keyword) {
        items = items.filter(item => item.name.includes(queryParams.keyword))
      }

      return {
        items: items.slice((page - 1) * pageSize, page * pageSize),
        itemCount: items.length,
      }
    },
  },
}
</script>

Basic Usage

import type { TableOption } from 'naive-plus'

const option: TableOption = {
  columns: [
    { key: 'name', label: 'Name' },
    { key: 'age', label: 'Age' },
  ],
  search: {
    key: 'keyword',
    placeholder: 'Search name',
  },
  api: {
    fetch: async ({ page, pageSize }, { keyword }) => {
      // keyword is the search input value
      return { items: [], itemCount: 0 }
    },
  },
}

The search value is merged into the second argument of api.fetch under search.key (defaults to keyword), coexisting with filters and tableRef.params. The field is removed when the input is cleared.

Auto Search

The input watches value changes and triggers a search automatically, no Enter key or click needed. Use debounce to control the debounce time (default 300ms) to avoid frequent requests while typing.

const option: TableOption = {
  // ...
  search: {
    debounce: 500,
  },
}

Types

import type { TableSearchOption } from 'naive-plus'

TableSearchOption

Prop	Description	Type	Default
key	Query param name passed to api.fetch	string	keyword
placeholder	Input placeholder	string	Please enter keyword
width	Input width	string | number	220
clearable	Whether the input is clearable	boolean	true
debounce	Debounce time (ms); search triggers automatically after typing stops	number	300
props	Other props passed through to n-input	InputProps	-