np-table Table

A configuration-driven table that dynamically generates the table through columns, simple to use and highly extensible.

Basic Usage

The table is dynamically generated by configuring columns through option, and data is fetched through api.fetch.

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

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

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

type User = {
  id: number
  name: string
  age: number
  address: string
}
// Mock API
const mockData: User[] = [
  { id: 1, name: 'John', age: 30, address: 'New York' },
  { id: 2, name: 'Jane', age: 25, address: 'Los Angeles' },
  { id: 3, name: 'Bob', age: 35, address: 'Chicago' },
]
for (let i = 4; i <= 100; i++) {
  mockData.push({
    id: i,
    name: `User ${i}`,
    age: 20 + (i % 30),
    address: `City ${i}`,
  })
}
const option: TableOption<User> = {
  columns: [
    {
      key: 'name',
      label: 'Name',
    },
    {
      key: 'age',
      label: 'Age',
      formProps: { type: 'number' },
    },
    {
      key: 'address',
      label: 'Address',
    },
  ],
  api: {
    fetch: async ({ page, pageSize }) => {
      await new Promise<void>(resolve => setTimeout(resolve, 500))
      return {
        items: mockData.slice((page - 1) * pageSize, page * pageSize),
        itemCount: mockData.length,
      }
    },
  },
}
</script>

Component Configuration

Props

Prop	Description	Type	Default
option	Configuration	TableOption	-

Methods

Get the table instance through ref, then call the following imperative methods. See Imperative Methods for details.

Method	Description	Type
reload	Reload the data, resetting to the first page	() => Promise<void>
refresh	Refresh the data of the current page	() => Promise<void>
params	Bound query params, passed to api.fetch as queryParams	Record<string, any>

Types

The component exports the following type definitions:

import type {
  TableOption,
  TableColumn,
  TableFilter,
  TableSearchOption,
  NpTableInst,
} from 'naive-plus'

TableOption

Prop	Description	Type	Default
columns	Table columns	Array<TableColumn>	-
api	Data API	{ fetch: (pageParams, otherParams) => Promise<{ items, itemCount? }> }	-
props	Table props, passed through to n-data-table. To prevent the table's internal vertical scroll from covering page content, scroll-related configs like maxHeight, flexHeight, and virtualScroll will be ignored	object	-
pagination	Pagination config; set to false to disable pagination	false / PaginationConfig	-
filters	Filter config	Array<TableFilter>	-
search	Search config; hidden when omitted or false	false / TableSearchOption	-
slots	Slot config, takes precedence over the same-named component slots	TableSlotOption	-

TableColumn

Prop	Description	Type	Default
key	Column field name	string	-
label	Column title	string	-
render	Custom render function	(rowData, rowIndex) => VNode	-
props	Column props passed through to n-data-table (e.g. width, minWidth, fixed)	object	-
display	Whether to display the column in the table; false hides it entirely (often for form-only fields)	boolean	true
formProps	Form field config, see CRUD	object	-