DataTable sorting not working

[chessparov]

Vuestic-ui version: 1.10.3

Description

Describe bug here:

• Sorting event doesn't get fired. If you put sortable set to true in the column options, the column effectively become sortable, but nothing actually happens. By checking the event: @sorted="(event) => console.log('Sort change:', event)" it doesn' get fired.

Reproduction

Here's the sample code you can use to reproduce the issue.

<script lang="ts">

export default {
  data() {
    return {
      currentTab: "tab1",
      currentSeries: 0,
      tabs: ["tab1", "tab2"],
      columns: {
        tab1: [
          { key: "name", label: "Name", sortable: true },
          { key: "test", label: "Test Column", sortable: true }
        ],
        tab2: [
          { key: "name", label: "Name", sortable: true },
          { key: "test", label: "Test Column", sortable: true }
        ]
      },
      items: {
        tab1: [[
          { name: "Alice", test: 3 },
          { name: "Bob", test: 2 },
          { name: "Charlie", test: 1 },
        ]],
        tab1: [[
          { name: "Alice", test: 3 },
          { name: "Bob", test: 2 },
          { name: "Charlie", test: 1 },
        ]]
      },
    };
  },
};
</script>

<template>
  <div>
    <VaDataTable
        :columns="columns[currentTab]"
        :items="items[currentTab][currentSeries]"
    />
  </div>
</template>

The same happens if you try using a custom handler or try passing a ref as items.

[m0ksem]

Hi, @chessparov . Can you reproduce it in https://ui.vuestic.dev/play and share playground here?

I can't see any issues:
https://ui.vuestic.dev/play#eNrNVE1z2jAQ/SsanZIZggvcXJJpQnNoD2mnYXqJOAh7A0pkyaMPSofhv3clWzYQmnMuIO2+t/u82t0dva3r4cYDzenUFkbUjkiuVteMOsvoDVNMwbbWxpESnrmXjuyYIqQCt9alzZsbYU7qVU4u4JJc35BCK6slDNGGlgEJkP0g/Jbc8YvLlkQMOG9UuhFSeGNAuTlf5gTz8+WI0Ug7cD6CEYB5P3UOxOH9qSM01DGji56rpa9UpzbRRoHWGQjZkVf4G1IrXkGIJPkSZDA8tAaLheBLCTlxxkP7UW/oDqw7os/RQGZRxLkofZBechQ4/ngC07GPLBxUZ0t7Ij1oDrlupSii1qAiJ5M3IhPwTi972Pi/sNmaGykOIo6OoIuTmn4kZafF3H9OoxJO06wZyDiEU6xyLbkDvBEyLcUmHvD4m3/FqcKhkdDHztuWxzluT0/9dC0YPUDG90Nc/D9EpXMzckekL6FDoEQWznhyZI20rNE2zTrFdEBFFXbIVcXr4YvVCrdN7BfMGh24aroOYhTXkXWiuPIimBldO1fbPMu8CJsquIYlbLIE095lFRcKIzdSsF/3mNNZXETPYnWSsdBVLSSYH7UTuKiOMnMp9Z/v0RY6v30W5KyheD1jf7HbRuJPAxbMJrx18jluVoBjFtz3jw+wDSOXnJUuPb7Xe85fgEvUB40N7M6rEmUf4KLab7GAQq3m9n7rQNn0UUFov3ljVWfvfHovdzKcdFXc/wMhSdfM

[chessparov]

In the playground it actually works, you're right. But using the same exact code in my projects doesn't. Any ideas of what might be the cause?

[m0ksem]

In the playground it actually works, you're right. But using the same exact code in my projects doesn't. Any ideas of what might be the cause?

Can you share what's your vue or nuxt version?

[chessparov]

I'm using:

• vuestic-admin: 3.1.0
• vuestic-ui: 1.10.3
• vue: 3.5.13