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	-

Types

The component exports the following type definitions:

import type { TableOption, TableColumn, TableFilter } 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>	-

TableColumn

Prop	Description	Type	Default
key	Column field name	string	-
title	Column title	string / ComputedRef<string>	-
render	Custom render function	(rowData, rowIndex) => VNode	-
type	Column type	'selection' / 'index' / 'expand'	-
width	Column width	string / number	-
minWidth	Min column width	string / number	-
fixed	Fixed column	'left' / 'right'	-
display	Whether to display the column	boolean	true