Как сделать сортировку в таблице по отдельной кнопке?

Question

[Anton8989]

Добрый день) Есть таблица в Vuetify. Необходимо, чтобы сортировка по полю в таблице осуществлялась отдельной кнопкой за пределами таблицы. Сейчас сортировка реализуется стандартным образом
(при клике на header), нужно повторить алгоритм, чтобы происходило та же самая сортировка по полю только при клике на отдельную кнопку. Заранее спасибо.

Answer 1

[0xD34F]

data: () => ({
  sortBy: '',
  ...
}),

<v-btn @click="sortBy = 'имя_свойства_по_которому_надо_выполнить_сортировку'">click me</v-btn>

<v-data-table :sort-by.sync="sortBy">...</v-data-table>

Если при повторном клике надо переключать порядок сортировки, тогда так:

data: () => ({
  sortBy: [],
  sortDesc: [],
  ...
}),
methods: {
  sort(colName) {
    const sameCol = this.sortBy[0] === colName;
    const sortDesc = this.sortDesc[0];

    this.sortBy = sameCol && sortDesc ? [] : [ colName ];
    this.sortDesc = sameCol && sortDesc ? [] : [ sameCol ];
  },
  ...
},

<v-btn @click="sort('имя_свойства_по_которому_надо_выполнить_сортировку')">click me</v-btn>

<v-data-table :sort-by.sync="sortBy" :sort-desc.sync="sortDesc">...</v-data-table>

В случае же сортировки по нескольким свойствам, метод sort будет выглядеть следующим образом:

sort(colName) {
  const index = this.sortBy.indexOf(colName);
  if (index === -1) {
    this.sortBy.push(colName);
    this.sortDesc.push(false);
  } else if (this.sortDesc[index]) {
    this.sortBy.splice(index, 1);
    this.sortDesc.splice(index, 1);
  } else {
    this.$set(this.sortDesc, index, true);
  }
},

А вообще, можно сделать совсем просто. Имитируется клик по заголовку указанного столбца, дальше компонент таблицы сам всё исполнит в лучшем виде:

<v-btn @click="sort('имя_свойства_по_которому_надо_выполнить_сортировку')">click me</v-btn>

<v-data-table ref="table">...</v-data-table>

methods: {
  sort(colName) {
    const index = this.свойство_описывающее_столбцы_таблицы.findIndex(n => n.value === colName);
    this.$refs.table.$el.querySelector('thead tr').cells[index].click();
  },
  ...
},

Answer 2

[Дима Паутов]

Просто возьмите данные, создайте вычисляемое свойство(computed) укажите его для таблицы, создайте флаг(boolean для указания, отсортирован или нет), по клику на кнопку меняйте флаг. Ну а в вычисляемом свойстве на основе флага выводите стандартный массив или сортированный используя метод sort