search

epicmaxco / vuestic-ui

Vuestic UI is an open-source Vue 3 component library designed for rapid development, easy maintenance, and high accessibility. Maintained by Epicmax (@epicmaxco).
https://vuestic.dev
MIT License
3.49k stars 337 forks source link

VaDataTable Not Sorting #4189

Open jordin-marshall opened 7 months ago

jordin-marshall commented 7 months ago

Vuestic-ui version: 1.9.7

Description

I've copied in one of the example sorting data tables directly from the documentation and sorting still doesn't work for me. I've attached a gif showing me clicking the columns to sort them, the column being sorted field and the asc/desc field update each time I click, but the table doesn't sort.

I've also attempted to sort after the disableClientSideSorting prop, but it still doesn't work

I'm using

https://i.gyazo.com/a8ce735eff170cf648f3263f7da70ca2.gif

Reproduction

Copy in the example code from the docs and try to sort the table 

<template>
    <div class="grid sm:grid-cols-2 gap-6 mb-6">
      <VaSelect v-model="sortBy" label="Sort by" :options="sortByOptions()" />
      <VaSelect
        v-model="sortingOrder"
        label="Sorting order"
        :options="sortingOrderOptions"
        :value-by="(option) => option.value"
      />
    </div>

    <VaDataTable
      v-model:sort-by="sortBy"
      v-model:sorting-order="sortingOrder"
      :items="items"
      :columns="columns"
      hoverable
    />
</template>

<script>
import { defineComponent } from "vue";
import shuffle from "lodash/shuffle";

export default defineComponent({
  data() {
    const users = [
      {
        id: 1,
        name: "Leanne Graham",
        username: "Bret",
        email: "Sincere@april.biz",
        address: {
          street: "Kulas Light",
          suite: "Apt. 556",
          city: "Gwenborough",
          zipcode: "92998-3874",
          geo: {
            lat: "-37.3159",
            lng: "81.1496",
          },
        },
        phone: "1-770-736-8031 x56442",
        website: "hildegard.org",
        company: {
          name: "Romaguera-Crona",
          catchPhrase: "Multi-layered client-server neural-net",
          bs: "harness real-time e-markets",
        },
      },
      {
        id: 2,
        name: "Ervin Howell",
        username: "Antonette",
        email: "Shanna@melissa.tv",
        address: {
          street: "Victor Plains",
          suite: "Suite 879",
          city: "Wisokyburgh",
          zipcode: "90566-7771",
          geo: {
            lat: "-43.9509",
            lng: "-34.4618",
          },
        },
        phone: "010-692-6593 x09125",
        website: "anastasia.net",
        company: {
          name: "Deckow-Crist",
          catchPhrase: "Proactive didactic contingency",
          bs: "synergize scalable supply-chains",
        },
      },
      {
        id: 3,
        name: "Clementine Bauch",
        username: "Samantha",
        email: "Nathan@yesenia.net",
        address: {
          street: "Douglas Extension",
          suite: "Suite 847",
          city: "McKenziehaven",
          zipcode: "59590-4157",
          geo: {
            lat: "-68.6102",
            lng: "-47.0653",
          },
        },
        phone: "1-463-123-4447",
        website: "ramiro.info",
        company: {
          name: "Romaguera-Jacobson",
          catchPhrase: "Face to face bifurcated interface",
          bs: "e-enable strategic applications",
        },
      },
      {
        id: 4,
        name: "Patricia Lebsack",
        username: "Karianne",
        email: "Julianne.OConner@kory.org",
        address: {
          street: "Hoeger Mall",
          suite: "Apt. 692",
          city: "South Elvis",
          zipcode: "53919-4257",
          geo: {
            lat: "29.4572",
            lng: "-164.2990",
          },
        },
        phone: "493-170-9623 x156",
        website: "kale.biz",
        company: {
          name: "Robel-Corkery",
          catchPhrase: "Multi-tiered zero tolerance productivity",
          bs: "transition cutting-edge web services",
        },
      },
      {
        id: 5,
        name: "Chelsey Dietrich",
        username: "Kamren",
        email: "Lucio_Hettinger@annie.ca",
        address: {
          street: "Skiles Walks",
          suite: "Suite 351",
          city: "Roscoeview",
          zipcode: "33263",
          geo: {
            lat: "-31.8129",
            lng: "62.5342",
          },
        },
        phone: "(254)954-1289",
        website: "demarco.info",
        company: {
          name: "Keebler LLC",
          catchPhrase: "User-centric fault-tolerant solution",
          bs: "revolutionize end-to-end systems",
        },
      },
    ];

    const columns = [
      { key: "id", sortable: true, sortingOptions: ["desc", "asc"] },
      { key: "username", sortable: true },
      { key: "name", sortable: true },
      { key: "address.city", name: "city", label: "City", sortable: true },
      { key: "phone" },
    ];

    const sortingOrderOptions = [
      { text: "asc", value: "asc" },
      { text: "desc", value: "desc" },
      { text: "no sorting", value: null },
    ];

    return {
      items: shuffle(users),
      columns,
      sortBy: "username",
      sortingOrder: "asc",
      sortingOrderOptions,
    };
  },

  methods: {
    sortByOptions() {
      return this.columns
        .map(({ name, key, sortable }) => sortable && (name || key))
        .filter(Boolean);
    },
  },
});
</script>
m0ksem commented 6 months ago

Make sure you have lodash installed in your application.

I run it in playground without lodash and it works: https://ui.vuestic.dev/play#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

kangcy28 commented 2 months ago

Make sure you have lodash installed in your application.

I run it in playground without lodash and it works: https://ui.vuestic.dev/play#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

It works well in the playground, but it isn't work in my vue environment.

jordin-marshall commented 2 months ago

@kangcy28 unfortunately glad to see another user has entered the chat

m0ksem commented 1 month ago

Make sure you have lodash installed in your application. I run it in playground without lodash and it works: ui.vuestic.dev/play#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

It works well in the playground, but it isn't work in my vue environment.

Hi. Can you make minimal reproduction repository?