Сортировка в таблицах

В библиотеке Vuetify сортировка данных в таблицах реализуется через компонент v-data-table, который предоставляет встроенные механизмы для управления порядком отображения строк. Основным свойством, отвечающим за сортировку, является sort-by, а порядок сортировки задаётся через sort-desc или динамически через события.

Настройка сортировки

Компонент v-data-table поддерживает два основных подхода:

  1. Сортировка по умолчанию Для указания поля, по которому будет производиться сортировка при инициализации таблицы, используется атрибут sort-by:
<v-data-table
  :headers="headers"
  :items="items"
  sort-by="name"
  :sort-desc="false"
>
</v-data-table>
  • sort-by — ключ столбца, по которому происходит сортировка.
  • sort-desc — логическое значение, определяющее направление: false — по возрастанию, true — по убыванию.
  1. Динамическая сортировка через пользовательский интерфейс Если не задавать sort-by и sort-desc, пользователь сможет сортировать таблицу, кликая по заголовкам столбцов. Для указания возможности сортировки в заголовках используется свойство sortable в объекте заголовка:
headers: [
  { text: 'Имя', value: 'name', sortable: true },
  { text: 'Возраст', value: 'age', sortable: true },
  { text: 'Город', value: 'city', sortable: false }
]
  • sortable: true — делает столбец кликабельным для сортировки.
  • sortable: false — отключает сортировку для данного столбца.

Сортировка по нескольким столбцам

Vuetify позволяет сортировать данные одновременно по нескольким столбцам. Для этого sort-by и sort-desc принимают массивы:

<v-data-table
  :headers="headers"
  :items="items"
  :sort-by="['city', 'age']"
  :sort-desc="[false, true]"
></v-data-table>
  • Первый элемент массива sort-by задаёт основной критерий.
  • Второй элемент массива задаёт дополнительный уровень сортировки для одинаковых значений в первом столбце.
  • Элементы sort-desc соответствуют каждому столбцу по индексу.

Кастомная сортировка

Иногда требуется нестандартная сортировка, например, по датам в специфичном формате или по числовым строкам. Для этого используется слот custom-sort или функция customSort в объекте таблицы:

methods: {
  customSort(items, sortBy, sortDesc) {
    return items.sort((a, b) => {
      let valA = a[sortBy];
      let valB = b[sortBy];

      // Преобразование даты
      if (sortBy === 'date') {
        valA = new Date(valA);
        valB = new Date(valB);
      }

      if (valA < valB) return sortDesc ? 1 : -1;
      if (valA > valB) return sortDesc ? -1 : 1;
      return 0;
    });
  }
}

Использование customSort:

<v-data-table
  :headers="headers"
  :items="items"
  :custom-sort="customSort"
></v-data-table>

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

Компонент v-data-table генерирует событие update:options при изменении порядка сортировки пользователем. Его можно использовать для реактивного обновления состояния:

<v-data-table
  :headers="headers"
  :items="items"
  :options.sync="tableOptions"
></v-data-table>
data() {
  return {
    tableOptions: {
      sortBy: ['name'],
      sortDesc: [false],
      page: 1,
      itemsPerPage: 10
    }
  }
}

Свойство options.sync позволяет отслеживать изменения сортировки и сохранять их в родительском компоненте для дальнейшей обработки или запроса данных с сервера.

Сортировка серверной стороны

Для больших массивов данных часто требуется сортировка на сервере. Vuetify поддерживает это через реактивное отслеживание параметров sortBy и sortDesc:

<v-data-table
  :headers="headers"
  :items="items"
  :server-items-length="totalItems"
  :options.sync="tableOptions"
  :loading="loading"
></v-data-table>

При изменении tableOptions.sortBy или tableOptions.sortDesc отправляется запрос на сервер с параметрами:

watch: {
  tableOptions: {
    handler(newOptions) {
      this.fetchData(newOptions.sortBy, newOptions.sortDesc);
    },
    deep: true
  }
}

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

Стилизация индикаторов сортировки

Vuetify автоматически отображает стрелки на заголовках сортируемых столбцов. Дополнительно можно кастомизировать визуализацию через слоты column.header и top для добавления своих иконок или текстовых подсказок:

<template v-slot:header.name="{ header, props }">
  <th v-bind="props">
    {{ header.text }}
    <v-icon v-if="props.options.sortBy[0] === 'name'">
      {{ props.options.sortDesc[0] ? 'mdi-arrow-down' : 'mdi-arrow-up' }}
    </v-icon>
  </th>
</template>
  • props.options.sortBy содержит текущий сортируемый столбец.
  • props.options.sortDesc указывает направление сортировки.

Итоговая структура для комплексной таблицы

В результате объединения всех вышеописанных механизмов можно создать таблицу с многоуровневой, кастомной и серверной сортировкой, полностью управляемую как со стороны пользователя, так и программно. Ключевые элементы: headers, items, sort-by, sort-desc, custom-sort, options.sync, события update:options, слоты для кастомной визуализации. Такой подход делает v-data-table максимально гибким и пригодным для любых сценариев работы с данными.

Оглавление