Table и его конфигурация

Компонент Table в библиотеке Naive UI предназначен для отображения табличных данных с гибкой конфигурацией колонок, сортировкой, фильтрацией и пагинацией. Он полностью настраиваемый и поддерживает реактивные данные Vue 3, что делает его идеальным инструментом для построения интерфейсов с динамическими таблицами.

import { NTable } from 'naive-ui'

Для базового использования требуется передать массив объектов в проп data и массив колонок в проп columns.

const columns = [
  { title: 'Имя', key: 'name' },
  { title: 'Возраст', key: 'age' },
  { title: 'Город', key: 'city' }
];

const data = [
  { name: 'Иван', age: 28, city: 'Москва' },
  { name: 'Мария', age: 24, city: 'Санкт-Петербург' }
];
<n-table :columns="columns" :data="data" />

Настройка колонок

Каждая колонка задается объектом с ключевыми свойствами:

  • title – заголовок колонки.
  • key – ключ для доступа к данным.
  • width – фиксированная ширина колонки (например, '150px').
  • align – выравнивание содержимого: 'left' | 'center' | 'right'.
  • render – функция для кастомного рендеринга ячейки.
const columns = [
  {
    title: 'Имя',
    key: 'name',
    width: '200px',
    render(row) {
      return `<strong>${row.name}</strong>`;
    }
  },
  { title: 'Возраст', key: 'age', align: 'center' }
];

Сортировка данных

Naive UI поддерживает сортировку по колонкам с помощью объекта sorter в конфигурации колонки:

const columns = [
  { title: 'Имя', key: 'name' },
  { title: 'Возраст', key: 'age', sorter: (a, b) => a.age - b.age }
];

Свойство sorter принимает функцию сравнения, аналогичную той, что используется в Array.prototype.sort.

<n-table :columns="columns" :data="data" :remote-sort="false" />
  • remote-sort – если true, таблица не выполняет сортировку локально, а сигнализирует о необходимости сортировки на сервере.

Фильтрация данных

Фильтрация задается через свойство filters колонки. Оно представляет собой массив объектов:

  • label – отображаемое значение фильтра.
  • value – значение, по которому выполняется фильтрация.
const columns = [
  {
    title: 'Город',
    key: 'city',
    filters: [
      { label: 'Москва', value: 'Москва' },
      { label: 'Санкт-Петербург', value: 'Санкт-Петербург' }
    ],
    filterMethod: (value, row) => row.city === value
  }
];
  • filterMethod – функция для фильтрации данных, которая принимает значение фильтра и текущую строку таблицы.

Кастомизация ячеек через render

Свойство render позволяет полностью контролировать отображение содержимого. Функция принимает объект с текущей строкой и колонкой:

const columns = [
  {
    title: 'Возраст',
    key: 'age',
    render(row) {
      return row.age > 25 ? `<span style="color:red">${row.age}</span>` : row.age;
    }
  }
];

Для Vue-компонентов можно использовать JSX или h:

import { h } from 'vue'

render(row) {
  return h('span', { style: { color: row.age > 25 ? 'red' : 'black' } }, row.age)
}

Пагинация

Компонент NTable не включает встроенную пагинацию, но тесно интегрируется с NPagination:

<n-table :columns="columns" :data="paginatedData" />
<n-pagination
  v-model:page="currentPage"
  :page-count="totalPages"
  :page-size="pageSize"
/>

Для реализации пагинации необходимо:

  1. Хранить текущую страницу и размер страницы в реактивных переменных.
  2. Создавать вычисляемый массив paginatedData, который содержит только данные текущей страницы.
import { computed, ref } from 'vue'

const currentPage = ref(1)
const pageSize = ref(10)

const paginatedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return data.slice(start, end)
})

Слоты для расширенного контроля

Naive UI поддерживает слоты для кастомизации заголовков и ячеек:

  • header – кастомный рендер заголовка колонки.
  • default – рендер содержимого ячейки.
  • footer – рендер футера таблицы.
<n-table :columns="columns" :data="data">
  <template #header="{ column }">
    <strong>{{ column.title }}</strong>
  </template>
  <template #default="{ row, column }">
    <span v-if="column.key === 'age' && row.age > 30" style="color: red">{{ row.age }}</span>
    <span v-else>{{ row[column.key] }}</span>
  </template>
</n-table>

Расширенные свойства

  • bordered – добавляет рамки вокруг таблицы и ячеек.
  • size – размеры таблицы: 'small' | 'medium' | 'large'.
  • loading – отображение индикатора загрузки.
  • scroll – позволяет задать горизонтальный или вертикальный скролл с фиксированными размерами.
<n-table
  :columns="columns"
  :data="data"
  :bordered="true"
  size="medium"
  :scroll="{ x: 800, y: 400 }"
/>

Итоговая структура

Комбинирование всех этих свойств позволяет строить сложные таблицы с:

  • локальной и серверной сортировкой,
  • фильтрацией,
  • кастомными рендерингами,
  • пагинацией и скроллингом,
  • полным контролем через слоты и вычисляемые данные.

Эта гибкость делает Table Naive UI мощным инструментом для реализации профессиональных интерфейсов с большими объемами данных.

Оглавление