I want to be able to disbale the sort temporily

[melvinbethel]

In QTable, I want to be able to suspend sorting during data mutations so the visible row order stays stable during edit.

Problem
Rows keep jumping around whilst editing.

What I tried
Clearing or toggling pagination.sortBy / pagination.descending per the docs.

Result: the table still reorders during mutations. Sort function gets called multiple times. Apparently, too many reactive propperties.

Workaround I used
Custom column sort function + a “suspend” flag to neutralize comparisons.

const handleSorting = (rows: readonly LocationWithMapping [], sortBy: string, descending: boolean): LocationWithMapping [] => {
 if (tableSortSuspended.value) {
   frozenTableRows.value = frozenTableRows.value.map((row) => {
     if (row.locationId === locationUpdated.value?.locationId) {
       return {
         ...row,
         locationDesc: locationUpdated.value?.locationDesc,
       };
     }
     return row;
   });
   return [...frozenTableRows.value];
 }

 const sortedRows = [...rows].sort((a: any, b: any) => {
   if (sortBy === 'assignedDate') {
     const aDate = a.mappingStart;
     const bDate = b.mappingStart;

     if (aDate === bDate) return 0;
     if (aDate === null || aDate === undefined) return 1;
     if (bDate === null || bDate === undefined) return -1;

     if (aDate < bDate) return descending ? 1 : -1;
     if (aDate > bDate) return descending ? -1 : 1;
     return 0;
   }
   
   const aValue = a[sortBy as keyof LocationWithMapping];
   const bValue = b[sortBy as keyof LocationWithMapping];

   if (aValue === bValue) return 0;
   if (aValue === null || aValue === undefined) return 1;
   if (bValue === null || bValue === undefined) return -1;

   if (aValue < bValue) return descending ? 1 : -1;
   if (aValue > bValue) return descending ? -1 : 1;
   return 0;
 });

 frozenTableRows.value = [...sortedRows];

 return [...sortedRows];
};

Request
A built-in way to pause and resume sorting (e.g., a prop or API) so edits don’t reorder the table and user is able to copy and paste similar values into multiple rows.

Docs reference: https://quasar.dev/vue-components/table/