Custom Operation Column

Use the operation config to flexibly control the display and behavior of the operation column.

Hide the Operation Column

Set operation to false to hide both the operation column and the top "Add" button.

浏览器不支持，请手动复制 operation-hide.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 }

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' },
]

const option: TableOption<User> = {
  columns: [
    { key: 'name', label: 'Name' },
    { key: 'age', label: 'Age' },
    { key: 'address', label: 'Address' },
  ],
  api: {
    fetch: async ({ page, pageSize }) => ({
      items: mockData.slice((page - 1) * pageSize, page * pageSize),
      itemCount: mockData.length,
    }),
  },
  // set false to hide the operation column and the top add button
  operation: false,
}
</script>

Prefix and Suffix Slots

Use prefixRender and suffixRender to insert custom content before and after the default action buttons.

浏览器不支持，请手动复制 operation-render.en.vue

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

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

type User = { id: number; name: string; age: number; address: string }

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' },
]

const option: TableOption<User> = {
  columns: [
    { key: 'name', label: 'Name' },
    { key: 'age', label: 'Age' },
    { key: 'address', label: 'Address' },
  ],
  api: {
    fetch: async ({ page, pageSize }) => ({
      items: mockData.slice((page - 1) * pageSize, page * pageSize),
      itemCount: mockData.length,
    }),
  },
  operation: {
    label: 'Actions',
    width: 200,
    // insert custom content before the action buttons
    prefixRender: rowData =>
      h(
        NButton,
        { size: 'small', type: 'info', style: 'margin-right:4px' },
        () => `View #${rowData.id}`
      ),
    // insert custom content after the action buttons
    suffixRender: rowData =>
      h(
        NButton,
        { size: 'small', type: 'warning', style: 'margin-left:4px' },
        () => `Logs`
      ),
  },
}
</script>

Custom Options and onSelect

Use options to configure dropdown menu items, and use onSelect to handle clicks on custom items.

• { type: 'edit' } / { type: 'del' } reuses the built-in edit/delete logic (triggers onBefore, opens the dialog, etc.)
• Custom key options trigger the onSelect callback on click

浏览器不支持，请手动复制 operation-custom.en.vue

<template>
  <div>
    <n-alert v-if="lastKey" type="success" style="margin-bottom: 12px">
      onSelect triggered, key =
      <strong>{{ lastKey }}</strong>
    </n-alert>
    <np-table :option="option" />
  </div>
</template>

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

type User = { id: number; name: string; age: number; address: string }

const lastKey = ref('')

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' },
]

const option: TableOption<User> = {
  columns: [
    { key: 'name', label: 'Name' },
    { key: 'age', label: 'Age' },
    { key: 'address', label: 'Address' },
  ],
  api: {
    fetch: async ({ page, pageSize }) => ({
      items: mockData.slice((page - 1) * pageSize, page * pageSize),
      itemCount: mockData.length,
    }),
  },
  operation: {
    label: 'Actions',
    // custom dropdown menu options; using built-in type reuses the default edit/delete logic
    options: [
      { type: 'edit' },
      { type: 'del', label: 'Delete (Danger)' },
      { key: 'detail', label: 'Detail' },
      { key: 'export', label: 'Export' },
    ],
    // handle click on custom options; built-in edit/delete first trigger onBefore and bypass this callback
    onSelect: key => {
      lastKey.value = key
    },
  },
}
</script>

Types

operation

operation?:
  | false
  | {
      label?: string
      width?: number | string
      prefixRender?: (rowData: T, rowIndex: number) => VNode
      suffixRender?: (rowData: T, rowIndex: number) => VNode
      options?: TableOperationOption[]
      onSelect?: (key: string) => void | boolean
      onBefore?: (rowData: T, type: 'add' | 'edit' | 'del') => boolean | T | void | Promise<...>
    }

TableOperationOption

Field	Description	Type
type	Built-in type, reuses the edit/delete logic	'edit' | 'del'
key	Custom option identifier, triggers the onSelect callback	string | number
label	Custom option display label	string | (() => VNode)

Built-in types and custom keys can be mixed, e.g. [{ type: 'edit' }, { type: 'del' }, { key: 'export', label: 'Export' }].