Display Control

np-table supports visibility control for both table columns and form fields, configured via the column's display and formProps.display respectively.

Hiding a Table Column

Use the column's display to control whether the column is shown, defaulting to true. Columns set to false are completely hidden from the table and do not appear in the "Display Settings" popover. This is commonly used for fields that only appear in the add / edit form.

浏览器不支持，请手动复制 column-display.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
  email: string
  remark?: string
}

const mockData: User[] = [
  {
    id: 1,
    name: 'John',
    age: 30,
    address: 'New York',
    email: '[email protected]',
    remark: 'VIP user',
  },
  {
    id: 2,
    name: 'Jane',
    age: 25,
    address: 'Los Angeles',
    email: '[email protected]',
    remark: 'Regular user',
  },
  {
    id: 3,
    name: 'Bob',
    age: 35,
    address: 'Chicago',
    email: '[email protected]',
  },
]

const option: TableOption<User> = {
  columns: [
    {
      key: 'name',
      label: 'Name',
      formProps: { type: 'input' },
    },
    {
      key: 'age',
      label: 'Age',
      formProps: { type: 'number' },
    },
    {
      key: 'address',
      label: 'Address',
      formProps: { type: 'input' },
    },
    {
      key: 'email',
      label: 'Email',
      // display: false hides the column entirely in the table,
      // commonly used for fields that only appear in the add / edit form
      display: false,
      formProps: { type: 'input' },
    },
    {
      key: 'remark',
      label: 'Remark',
      // Not shown in the table
      display: false,
      formProps: {
        type: 'input',
        // Also hidden in the add form, only shown in the edit form
        addProps: { display: false },
      },
    },
  ],
  api: {
    fetch: async ({ page, pageSize }) => {
      return {
        items: mockData.slice((page - 1) * pageSize, page * pageSize),
        itemCount: mockData.length,
      }
    },
    add: async rowData => {
      mockData.unshift({ ...rowData, id: mockData.length + 1 })
    },
    edit: async rowData => {
      const idx = mockData.findIndex(item => item.id === rowData.id)
      if (idx !== -1) {
        mockData[idx] = { ...mockData[idx], ...rowData }
      }
    },
    del: async rowData => {
      const idx = mockData.findIndex(item => item.id === rowData.id)
      if (idx !== -1) {
        mockData.splice(idx, 1)
      }
    },
  },
}
</script>

The "Display Settings" button at the top right toggles the visibility of columns at runtime (for columns without display: false), keeping at least one column visible.

Combined with formProps.addProps / formProps.editProps, a field can be shown only in a specific action mode. For example, a field that only exists in the edit form (hidden in the table and the add form):

{
  key: 'remark',
  label: 'Remark',
  display: false, // hidden entirely in the table
  formProps: {
    type: 'input',
    addProps: { display: false }, // also hidden in the add form, only shown when editing
  },
}

The "Remark" field in the "Hiding a Table Column" example above demonstrates this: visible when clicking "Edit", hidden when clicking "Add".

Form Field Visibility

The visibility of CRUD form fields is controlled by the column's formProps.display, which accepts a boolean or a function. The function receives the current form data, so fields can be shown or hidden dynamically based on other fields.

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

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

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

type User = {
  id: number
  name: string
  gender: 'man' | 'feman'
  age: number
  address: string
}

const mockData: User[] = [
  { id: 1, name: 'John', gender: 'man', age: 30, address: 'New York' },
  { id: 2, name: 'Jane', gender: 'feman', age: 25, address: 'Los Angeles' },
  { id: 3, name: 'Bob', gender: 'man', age: 35, address: 'Chicago' },
]

const option: TableOption<User> = {
  columns: [
    {
      key: 'name',
      label: 'Name',
      formProps: { type: 'input' },
    },
    {
      key: 'gender',
      label: 'Gender',
      formProps: {
        type: 'radio',
        defaultValue: 'man',
        options: [
          { label: 'Male', value: 'man' },
          { label: 'Female', value: 'feman' },
        ],
      },
    },
    {
      key: 'age',
      label: 'Age',
      formProps: {
        type: 'number',
        // Only shown in the form when gender is "Male"
        display: data => data.gender === 'man',
      },
    },
    {
      key: 'address',
      label: 'Address',
      formProps: { type: 'input' },
    },
  ],
  api: {
    fetch: async ({ page, pageSize }) => {
      return {
        items: mockData.slice((page - 1) * pageSize, page * pageSize),
        itemCount: mockData.length,
      }
    },
    add: async rowData => {
      mockData.unshift({ ...rowData, id: mockData.length + 1 })
    },
    edit: async rowData => {
      const idx = mockData.findIndex(item => item.id === rowData.id)
      if (idx !== -1) {
        mockData[idx] = { ...mockData[idx], ...rowData }
      }
    },
    del: async rowData => {
      const idx = mockData.findIndex(item => item.id === rowData.id)
      if (idx !== -1) {
        mockData.splice(idx, 1)
      }
    },
  },
}
</script>

Types

TableColumn.display

Prop	Description	Type	Default
display	Whether to display the column in the table; false hides it entirely	boolean	true

TableColumn.formProps.display

Prop	Description	Type	Default
display	Whether to display the form field	boolean / (data) => boolean	true