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

Naive UI предоставляет мощные инструменты для организации и сортировки данных в компонентах таблиц (n-data-table) и списков. Основным механизмом управления сортировкой является использование props columns и слотов для пользовательской сортировки.

В колонках таблицы каждая колонка может содержать объект с параметрами сортировки:

const columns = [
  {
    title: 'Имя',
    key: 'name',
    sortable: true,
    sortOrder: null, // 'ascend' | 'descend' | null
  },
  {
    title: 'Возраст',
    key: 'age',
    sortable: true,
    sortOrder: null,
  }
];
  • sortable — включает возможность сортировки по данной колонке.
  • sortOrder — текущий порядок сортировки: 'ascend' для по возрастанию, 'descend' для по убыванию, null для отсутствия сортировки.

Управление сортировкой через события

Для динамического контроля над сортировкой используется событие onUpdateSortOrder. Оно позволяет отслеживать изменение порядка и реализовывать кастомную логику:

const handleSort = (columnKey, order) => {
  if (order === 'ascend') {
    data.value.sort((a, b) => a[columnKey] > b[columnKey] ? 1 : -1);
  } else if (order === 'descend') {
    data.value.sort((a, b) => a[columnKey] < b[columnKey] ? 1 : -1);
  }
};

Использование этого подхода позволяет полностью контролировать сортировку на стороне клиента и при необходимости комбинировать несколько колонок.

Пользовательская сортировка

Naive UI поддерживает кастомные функции сортировки через sorter в колонках:

const columns = [
  {
    title: 'Имя',
    key: 'name',
    sortable: true,
    sorter: (a, b) => a.name.localeCompare(b.name),
  },
  {
    title: 'Возраст',
    key: 'age',
    sortable: true,
    sorter: (a, b) => a.age - b.age,
  }
];
  • sorter получает два элемента данных и возвращает число: отрицательное — первый элемент меньше, положительное — первый элемент больше, ноль — элементы равны.
  • Этот метод удобен при работе с текстовыми значениями, датами и кастомными объектами.

Множественная сортировка

Naive UI позволяет комбинировать сортировку по нескольким колонкам. Для этого используется multipleSort, который передает массив колонок с их порядком:

const handleMultiSort = (sortColumns) => {
  data.value.sort((a, b) => {
    for (const col of sortColumns) {
      const order = col.order === 'ascend' ? 1 : -1;
      const result = col.sorter(a, b);
      if (result !== 0) return result * order;
    }
    return 0;
  });
};
  • Позволяет реализовать сортировку с приоритетами: сначала по одной колонке, затем по второй.
  • Особенно полезно для таблиц с большим количеством данных, где важно сохранять логическую последовательность строк.

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

При работе с серверной сортировкой компонент n-data-table поддерживает передачу параметров запроса через onRequestSort.

const handleServerSort = async (columnKey, order) => {
  const response = await fetch(`/api/data?sort=${columnKey}&order=${order}`);
  data.value = await response.json();
};
  • Используется для обработки больших массивов данных, когда сортировка на клиенте неэффективна.
  • Комбинируется с пагинацией и фильтрацией.

Визуальные индикаторы сортировки

Naive UI автоматически отображает стрелки сортировки в заголовках колонок. Дополнительно можно использовать слоты sort-icon для кастомного оформления:

<n-data-table :columns="columns" :data="data">
  <template #sort-icon="{ column }">
    <n-icon v-if="column.sortOrder === 'ascend'" :component="ArrowUpIcon" />
    <n-icon v-else-if="column.sortOrder === 'descend'" :component="ArrowDownIcon" />
  </template>
</n-data-table>
  • Позволяет создавать собственные визуальные эффекты и стилизовать таблицу под проект.
  • Стрелки автоматически синхронизируются с порядком сортировки.

Резюме механизмов

  1. Колонки с sortable и sortOrder — базовая настройка сортировки.
  2. Кастомные sorter функции — точная логика сравнения значений.
  3. События onUpdateSortOrder и onRequestSort — контроль за сортировкой и интеграция с сервером.
  4. Множественная сортировка (multipleSort) — упорядочивание по нескольким колонкам с приоритетами.
  5. Кастомные индикаторы сортировки — визуальное оформление и удобство пользователя.

Эти инструменты позволяют строить гибкие и эффективные таблицы, где сортировка данных может быть как простой, так и сложной с множественными условиями и асинхронной обработкой.

Оглавление