src/shared/components/DataTable.test.ts

@@ -72,7 +72,7 @@ describe('DataTable column preferences', () => {
   it('restores column order and visibility while locking the actions column', async () => {
     localStorage.setItem(preferenceStorageKey('table', 'user-1', 'orders-table'), JSON.stringify({
       version: 1,
-      order: ['actions', 'status', 'name'],
+      order: ['status', 'name', 'actions'],
       hidden: ['name', 'actions'],
     }))
     const wrapper = mountTable()

src/shared/components/DataTable.vue

@@ -101,15 +101,28 @@ function columnHideable(column: DataTableColumn) {
 const configurableColumns = computed(() => props.columns.filter((column) => columnId(column)))
 const columnKeys = computed(() => configurableColumns.value.map((column) => columnId(column) as string))
 
+function anchorSystemColumns(order: readonly string[]) {
+  const columnsByKey = new Map(configurableColumns.value.map((column) => [columnId(column) as string, column]))
+  const movableKeys = order.filter((key) => {
+    const column = columnsByKey.get(key)
+    return column && columnMovable(column)
+  })
+  let movableIndex = 0
+  return configurableColumns.value.map((column) => (
+    columnMovable(column) ? movableKeys[movableIndex++] : columnId(column) as string
+  ))
+}
+
 function applyPreference() {
   const defaultHidden = configurableColumns.value.flatMap((column) => column.defaultVisible === false ? [columnId(column) as string] : [])
-  preference.value = readLayoutPreference(
+  const snapshot = readLayoutPreference(
     'table',
     preferenceScope.value,
     props.preferenceKey || '',
     columnKeys.value,
     defaultHidden,
   )
+  preference.value = { ...snapshot, order: anchorSystemColumns(snapshot.order) }
 }
 
 watch(
@@ -159,7 +172,10 @@ function moveColumn(key: string, targetIndex: number) {
   movableKeys.splice(Math.min(Math.max(targetIndex, 0), movableKeys.length), 0, key)
   const movableSet = new Set(movableKeys)
   let nextMovableIndex = 0
-  const order = preference.value.order.map((id) => movableSet.has(id) ? movableKeys[nextMovableIndex++] : id)
+  const order = orderedColumns.value.map((column) => {
+    const id = columnId(column) as string
+    return movableSet.has(id) ? movableKeys[nextMovableIndex++] : id
+  })
   persistPreference(order)
 }