fix(data-table#4048): disable-client-side-sorting prop (#4050)

packages/ui/src/components/va-data-table/VaDataTable.stories.ts

@@ -1,8 +1,9 @@
 import { DataTableColumns, DataTableItems, defineVaDataTableColumns, defineVaDataTableItems } from './fabrics'
-import { defineComponent } from 'vue'
+import { defineComponent, ref, watch } from 'vue'
 import VaDataTableDemo from './VaDataTable.demo.vue'
 import { VaDataTable } from '..'
 import { VaPagination } from '../va-pagination'
+import { StoryFn } from '@storybook/vue3'
 
 export default {
   title: 'VaDataTable',
@@ -25,12 +26,12 @@ const columns = defineVaDataTableColumns([
 type Items = DataTableItems<typeof columns>
 
 const items = defineVaDataTableItems<typeof columns>([
-  { name: 'Aaa', email: '' },
-  { name: 'Bbb', email: '', test: '' },
-  { name: 'Ccc', email: '' },
-  { name: 'Ddd', email: '', test: '' },
-  { name: 'Eee', email: '' },
-  { name: 'Fff', email: '', test: '' },
+  { name: 'Aaa', email: '[email protected]' },
+  { name: 'Bbb', email: '[email protected]', test: '' },
+  { name: 'Ccc', email: '[email protected]' },
+  { name: 'Ddd', email: '[email protected]', test: '' },
+  { name: 'Eee', email: '[email protected]' },
+  { name: 'Fff', email: '[email protected]', test: '' },
 ]) satisfies Items
 
 export const Default = defineComponent({
@@ -105,3 +106,41 @@ export const PaginationAnimation = () => ({
   </VaDataTable>
   `,
 })
+
+// Expect no sorting animation when clicking on the table header
+export const disableClientSideSorting: StoryFn = () => ({
+  components: { VaDataTable },
+  setup () {
+    const sortBy = ref('name')
+    const sortingOrder = ref('asc')
+    const loading = ref(false)
+
+    const sortedItems = ref(items)
+
+    watch([sortBy, sortingOrder], () => {
+      loading.value = true
+      setTimeout(() => {
+        sortedItems.value = [...items].sort((a, b) => {
+          const sortingOrderRatio = sortingOrder.value === 'desc' ? -1 : 1
+
+          return sortingOrderRatio * (a[sortBy.value] > b[sortBy.value] ? 1 : -1)
+        })
+        loading.value = false
+      }, 1000)
+    }, { immediate: true })
+
+    const columns = defineVaDataTableColumns([
+      { key: 'name', sortable: true },
+      { key: 'email', sortable: true },
+    ]) satisfies Columns
+
+    return {
+      loading,
+      columns,
+      sortedItems,
+      sortBy,
+      sortingOrder,
+    }
+  },
+  template: '<VaDataTable v-model:sort-by="sortBy" :loading="loading" v-model:sorting-order="sortingOrder" :items="sortedItems" :columns="columns" disable-client-side-sorting />',
+})

packages/ui/src/components/va-data-table/hooks/useSortable.ts

@@ -15,6 +15,7 @@ export const useSortableProps = {
   sortBy: { type: String as PropType<string | undefined> },
   columnSorted: { type: Object as PropType<any | undefined> },
   sortingOrder: { type: String as PropType<DataTableSortingOrder | undefined> },
+  disableClientSideSorting: { type: Boolean, default: false },
 }
 
 export type TSortedArgs = { sortBy: string, sortingOrder: DataTableSortingOrder, items: DataTableItem[], itemsIndexes: number[] }
@@ -74,6 +75,10 @@ export const useSortable = (
   // provided. Otherwise uses that very sortingFn. If sortingOrder is `null` then restores the initial sorting order of
   // the rows.
   const sortedRows = computed(() => {
+    if (props.disableClientSideSorting) {
+      return filteredRows.value
+    }
+
     if (filteredRows.value.length <= 1) {
       return filteredRows.value
     }