From 852c0ee550b15a360fbe30cb0830c1d4dd610dd8 Mon Sep 17 00:00:00 2001
From: Pedro Lamas <pedrolamas@gmail.com>
Date: Sun, 24 Nov 2024 18:18:07 +0000
Subject: [PATCH] feat: column reordering (#1539)

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
---
 components.d.ts                               |   1 +
 src/components/ui/AppColumnPicker.vue         |  67 +++-
 src/components/ui/AppDataTableRow.vue         |  52 +++
 .../widgets/filesystem/FileRowItem.vue        |  46 ---
 .../widgets/filesystem/FileSystem.vue         | 203 +++++++---
 .../widgets/filesystem/FileSystemBrowser.vue  | 378 ++++++++----------
 src/components/widgets/history/JobHistory.vue | 202 +++++-----
 src/components/widgets/job-queue/JobQueue.vue |  50 ++-
 .../widgets/job-queue/JobQueueBrowser.vue     |  25 +-
 .../widgets/spoolman/SpoolSelectionDialog.vue |  99 +++--
 src/store/config/actions.ts                   |  11 +-
 src/store/config/getters.ts                   |  32 +-
 src/store/config/mutations.ts                 |  29 +-
 src/store/config/state.ts                     |  41 +-
 src/types/tableheaders.ts                     |   3 -
 15 files changed, 682 insertions(+), 557 deletions(-)
 create mode 100644 src/components/ui/AppDataTableRow.vue
 delete mode 100644 src/components/widgets/filesystem/FileRowItem.vue

diff --git a/components.d.ts b/components.d.ts
index ff05cf4dcd..018fe2aa97 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -19,6 +19,7 @@ declare module 'vue' {
     AppChart: typeof import('./src/components/ui/AppChart.vue')['default']
     AppColorPicker: typeof import('./src/components/ui/AppColorPicker.vue')['default']
     AppColumnPicker: typeof import('./src/components/ui/AppColumnPicker.vue')['default']
+    AppDataTableRow: typeof import('./src/components/ui/AppDataTableRow.vue')['default']
     AppDialog: typeof import('./src/components/ui/AppDialog.vue')['default']
     AppDraggable: typeof import('./src/components/ui/AppDraggable.vue')['default']
     AppDragOverlay: typeof import('./src/components/ui/AppDragOverlay.vue')['default']
diff --git a/src/components/ui/AppColumnPicker.vue b/src/components/ui/AppColumnPicker.vue
index 635059a1ab..245fe249fb 100644
--- a/src/components/ui/AppColumnPicker.vue
+++ b/src/components/ui/AppColumnPicker.vue
@@ -11,7 +11,6 @@
       <v-tooltip bottom>
         <template #activator="{ on: tooltip }">
           <v-btn
-            :disabled="disabled"
             fab
             small
             text
@@ -26,45 +25,71 @@
         <span>{{ $t('app.general.btn.select_columns') }}</span>
       </v-tooltip>
     </template>
+
     <v-list
       dense
       class="overflow-y-auto"
     >
-      <template v-for="header in headers">
-        <v-list-item
-          v-if="header.text !== '' && header.configurable"
-          :key="header.value"
-          @click="handleToggleHeader(header)"
-        >
-          <v-list-item-action class="my-0">
-            <v-checkbox :input-value="header.visible" />
-          </v-list-item-action>
-          <v-list-item-content>
-            <v-list-item-title>{{ header.text }}</v-list-item-title>
-          </v-list-item-content>
-        </v-list-item>
-      </template>
+      <app-draggable
+        v-model="configurableHeaders"
+        :options="{
+          animation: '200',
+          handle: '.handle',
+          group: 'jobQueue',
+          ghostClass: 'ghost',
+        }"
+      >
+        <template v-for="header in configurableHeaders">
+          <v-list-item
+            :key="header.value"
+            @click="handleToggleHeader(header)"
+          >
+            <v-list-item-action class="my-0">
+              <v-icon class="handle">
+                $drag
+              </v-icon>
+            </v-list-item-action>
+            <v-list-item-content>
+              <v-list-item-title>{{ header.text }}</v-list-item-title>
+            </v-list-item-content>
+            <v-list-item-action class="my-0">
+              <v-checkbox :input-value="header.visible" />
+            </v-list-item-action>
+          </v-list-item>
+        </template>
+      </app-draggable>
     </v-list>
   </v-menu>
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Prop } from 'vue-property-decorator'
-import StateMixin from '@/mixins/state'
+import { Component, Vue, Prop } from 'vue-property-decorator'
 import type { AppTableHeader } from '@/types'
+import type { AppTablePartialHeader } from '@/types/tableheaders'
 
 @Component({})
-export default class AppColumnPicker extends Mixins(StateMixin) {
+export default class AppColumnPicker extends Vue {
   @Prop({ type: String, required: true })
   readonly keyName!: string
 
   @Prop({ type: Array<AppTableHeader>, required: true })
   readonly headers!: AppTableHeader[]
 
-  @Prop({ type: Boolean })
-  readonly disabled?: boolean
+  get configurableHeaders (): AppTableHeader[] {
+    return this.headers
+  }
+
+  set configurableHeaders (value: AppTableHeader[]) {
+    const headers = value
+      .map(({ value, visible }): AppTablePartialHeader => ({
+        value,
+        visible
+      }))
+
+    this.$store.dispatch('config/updateHeaders', { name: this.keyName, headers })
+  }
 
-  handleToggleHeader (header: AppTableHeader) {
+  handleToggleHeader (header: AppTablePartialHeader) {
     header.visible = !header.visible
     this.$store.dispatch('config/updateHeader', { name: this.keyName, header })
   }
diff --git a/src/components/ui/AppDataTableRow.vue b/src/components/ui/AppDataTableRow.vue
new file mode 100644
index 0000000000..ab21df0d4b
--- /dev/null
+++ b/src/components/ui/AppDataTableRow.vue
@@ -0,0 +1,52 @@
+<template>
+  <tr
+    v-bind="$attrs"
+    :class="{
+      'v-data-table__selected': isSelected
+    }"
+    v-on="$listeners"
+  >
+    <template v-for="header in headers">
+      <td
+        :key="header.value"
+        :class="[
+          `text-${header.align || 'start'}`,
+          header.cellClass,
+          {
+            'v-data-table__divider': header.divider
+          }
+        ]"
+      >
+        <slot
+          :name="`item.${header.value}`"
+          :header="header"
+          :value="getValue(header)"
+        >
+          {{ getValue(header) ?? '--' }}
+        </slot>
+      </td>
+    </template>
+  </tr>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+import { get } from 'lodash-es'
+import type { DataTableHeader } from 'vuetify'
+
+@Component({})
+export default class AppDataTableRow extends Vue {
+  @Prop({ type: Array<DataTableHeader> })
+  readonly headers!: DataTableHeader[]
+
+  @Prop({ type: Object })
+  readonly item!: unknown
+
+  @Prop({ type: Boolean })
+  readonly isSelected!: boolean
+
+  getValue (header: DataTableHeader) {
+    return get(this.item, header.value)
+  }
+}
+</script>
diff --git a/src/components/widgets/filesystem/FileRowItem.vue b/src/components/widgets/filesystem/FileRowItem.vue
deleted file mode 100644
index 304070ed7e..0000000000
--- a/src/components/widgets/filesystem/FileRowItem.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-  <td
-    v-if="isVisible"
-    :nowrap="nowrap"
-    :class="{ 'text-end': right }"
-  >
-    <slot />
-    <span v-if="!$slots.default">--</span>
-  </td>
-</template>
-
-<script lang="ts">
-import type { AppTableHeader } from '@/types'
-import { Component, Vue, Prop } from 'vue-property-decorator'
-
-@Component({})
-export default class FileRowItem extends Vue {
-  @Prop({ type: String })
-  readonly itemValue?: string
-
-  @Prop({ type: Array<AppTableHeader> })
-  readonly headers?: AppTableHeader[]
-
-  @Prop({ type: Boolean, default: true })
-  readonly nowrap?: boolean
-
-  @Prop({ type: Boolean })
-  readonly right?: boolean
-
-  /**
-   * Self check if it should appear or not based on the headers
-   * collection and provided name. If either are not provided,
-   * don't check.
-   */
-  get isVisible () {
-    if (this.headers !== undefined && this.itemValue !== undefined) {
-      const i = this.headers.findIndex(header => {
-        const headerKey = (header.key) ? header.key : header.value
-        return this.itemValue === headerKey
-      })
-      return (i >= 0)
-    }
-    return true
-  }
-}
-</script>
diff --git a/src/components/widgets/filesystem/FileSystem.vue b/src/components/widgets/filesystem/FileSystem.vue
index b7e70b9c37..b5686da95a 100644
--- a/src/components/widgets/filesystem/FileSystem.vue
+++ b/src/components/widgets/filesystem/FileSystem.vue
@@ -19,7 +19,7 @@
       :path="visiblePath"
       :disabled="disabled"
       :loading="filesLoading"
-      :headers="headers"
+      :headers="configurableHeaders"
       @root-change="handleRootChange"
       @refresh="refreshPath(currentPath)"
       @add-file="handleAddFileDialog"
@@ -41,7 +41,7 @@
     <file-system-browser
       v-if="headers"
       v-model="selected"
-      :headers="visibleHeaders"
+      :headers="headers"
       :root="currentRoot"
       :dense="dense"
       :loading="filesLoading"
@@ -159,6 +159,7 @@ import type { AppTableHeader, FileWithPath } from '@/types'
 import { getFilesFromDataTransfer, hasFilesInDataTransfer } from '@/util/file-system-entry'
 import { getFileDataTransferDataFromDataTransfer, hasFileDataTransferTypeInDataTransfer, setFileDataTransferDataInDataTransfer } from '@/util/file-data-transfer'
 import consola from 'consola'
+import type { DataTableHeader } from 'vuetify'
 
 /**
  * Represents the filesystem, bound to moonrakers supplied roots.
@@ -304,61 +305,163 @@ export default class FileSystem extends Mixins(StateMixin, FilesMixin, ServicesM
     }
   }
 
-  // The available headers, based on the current root and system configuration.
-  get headers (): AppTableHeader[] {
-    // Base headers. All roots have these.
-    let headers: any = [
-      { text: '', value: 'data-table-icons', sortable: false, width: '24px' },
+  get configurableHeaders (): AppTableHeader[] {
+    const isNotDashboard = this.name !== 'dashboard'
+
+    const headers: AppTableHeader[] = [
+      ...this.currentRoot === 'gcodes'
+        ? [
+            {
+              text: this.$tc('app.general.table.header.status'),
+              value: 'history.status',
+              visible: isNotDashboard,
+              cellClass: 'text-no-wrap'
+            },
+            {
+              text: this.$tc('app.general.table.header.height'),
+              value: 'object_height',
+              visible: isNotDashboard,
+              cellClass: 'text-no-wrap'
+            },
+            {
+              text: this.$tc('app.general.table.header.first_layer_height'),
+              value: 'first_layer_height',
+              visible: false,
+              cellClass: 'text-no-wrap'
+            },
+            {
+              text: this.$tc('app.general.table.header.layer_height'),
+              value: 'layer_height',
+              visible: isNotDashboard,
+              cellClass: 'text-no-wrap'
+            },
+            {
+              text: this.$tc('app.general.table.header.filament_name'),
+              value: 'filament_name',
+              visible: isNotDashboard,
+              cellClass: 'text-no-wrap'
+            },
+            {
+              text: this.$tc('app.general.table.header.filament_type'),
+              value: 'filament_type',
+              visible: isNotDashboard,
+              cellClass: 'text-no-wrap'
+            },
+            {
+              text: this.$tc('app.general.table.header.filament'),
+              value: 'filament_total',
+              visible: isNotDashboard,
+              cellClass: 'text-no-wrap'
+            },
+            {
+              text: this.$tc('app.general.table.header.filament_weight_total'),
+              value: 'filament_weight_total',
+              visible: isNotDashboard,
+              cellClass: 'text-no-wrap'
+            },
+            {
+              text: this.$tc('app.general.table.header.filament_used'),
+              value: 'history.filament_used',
+              visible: false,
+              cellClass: 'text-no-wrap'
+            },
+            {
+              text: this.$tc('app.general.table.header.nozzle_diameter'),
+              value: 'nozzle_diameter',
+              visible: isNotDashboard,
+              cellClass: 'text-no-wrap'
+            },
+            {
+              text: this.$tc('app.general.table.header.slicer'),
+              value: 'slicer',
+              visible: isNotDashboard,
+              cellClass: 'text-no-wrap'
+            },
+            {
+              text: this.$tc('app.general.table.header.slicer_version'),
+              value: 'slicer_version',
+              visible: false,
+              cellClass: 'text-no-wrap'
+            },
+            {
+              text: this.$tc('app.general.table.header.estimated_time'),
+              value: 'estimated_time',
+              visible: isNotDashboard,
+              cellClass: 'text-no-wrap'
+            },
+            {
+              text: this.$tc('app.general.table.header.print_duration'),
+              value: 'history.print_duration',
+              visible: false,
+              cellClass: 'text-no-wrap'
+            },
+            {
+              text: this.$tc('app.general.table.header.total_duration'),
+              value: 'history.total_duration',
+              visible: isNotDashboard,
+              cellClass: 'text-no-wrap'
+            },
+            {
+              text: this.$tc('app.general.table.header.first_layer_bed_temp'),
+              value: 'first_layer_bed_temp',
+              visible: false,
+              cellClass: 'text-no-wrap'
+            },
+            {
+              text: this.$tc('app.general.table.header.first_layer_extr_temp'),
+              value: 'first_layer_extr_temp',
+              visible: false,
+              cellClass: 'text-no-wrap'
+            },
+            {
+              text: this.$tc('app.general.table.header.chamber_temp'),
+              value: 'chamber_temp',
+              visible: false,
+              cellClass: 'text-no-wrap'
+            },
+            {
+              text: this.$tc('app.general.table.header.last_printed'),
+              value: 'print_start_time',
+              cellClass: 'text-no-wrap'
+            }
+          ]
+        : [],
       {
-        text: this.$t('app.general.table.header.name'),
-        value: 'name'
+        text: this.$tc('app.general.table.header.modified'),
+        value: 'modified',
+        cellClass: 'text-no-wrap',
+        width: '1%'
+      },
+      {
+        text: this.$tc('app.general.table.header.size'),
+        value: 'size',
+        cellClass: 'text-no-wrap',
+        width: '1%'
       }
     ]
 
-    // If this is a gcode root, then metadata is available, including potentially history data.
-    if (this.currentRoot === 'gcodes') {
-      headers = [
-        ...headers,
-        { text: this.$t('app.general.table.header.status'), value: 'history.status', configurable: true },
-        { text: this.$t('app.general.table.header.height'), value: 'object_height', configurable: true },
-        { text: this.$t('app.general.table.header.first_layer_height'), value: 'first_layer_height', configurable: true },
-        { text: this.$t('app.general.table.header.layer_height'), value: 'layer_height', configurable: true },
-        { text: this.$t('app.general.table.header.filament_name'), value: 'filament_name', configurable: true },
-        { text: this.$t('app.general.table.header.filament_type'), value: 'filament_type', configurable: true },
-        { text: this.$t('app.general.table.header.filament'), value: 'filament_total', configurable: true },
-        { text: this.$t('app.general.table.header.filament_weight_total'), value: 'filament_weight_total', configurable: true },
-        { text: this.$t('app.general.table.header.filament_used'), value: 'history.filament_used', configurable: true },
-        { text: this.$t('app.general.table.header.nozzle_diameter'), value: 'nozzle_diameter', configurable: true },
-        { text: this.$t('app.general.table.header.slicer'), value: 'slicer', configurable: true },
-        { text: this.$t('app.general.table.header.slicer_version'), value: 'slicer_version', configurable: true },
-        { text: this.$t('app.general.table.header.estimated_time'), value: 'estimated_time', configurable: true },
-        { text: this.$t('app.general.table.header.print_duration'), value: 'history.print_duration', configurable: true },
-        { text: this.$t('app.general.table.header.total_duration'), value: 'history.total_duration', configurable: true },
-        { text: this.$t('app.general.table.header.first_layer_bed_temp'), value: 'first_layer_bed_temp', configurable: true },
-        { text: this.$t('app.general.table.header.first_layer_extr_temp'), value: 'first_layer_extr_temp', configurable: true },
-        { text: this.$t('app.general.table.header.chamber_temp'), value: 'chamber_temp', configurable: true },
-        {
-          text: this.$t('app.general.table.header.last_printed'),
-          value: 'print_start_time',
-          configurable: true
-        }
-      ]
-    }
-
-    // Final headers. All roots have these.
-    headers = [
-      ...headers,
-      { text: this.$t('app.general.table.header.modified'), value: 'modified', width: '1%', configurable: true },
-      { text: this.$t('app.general.table.header.size'), value: 'size', width: '1%', configurable: true }
-    ]
-
-    // Return headers
     const key = `${this.currentRoot}_${this.name}`
-    return this.$store.getters['config/getMergedTableHeaders'](headers, key)
+    const mergedTableHeaders = this.$store.getters['config/getMergedTableHeaders'](headers, key) as AppTableHeader[]
+
+    return mergedTableHeaders
   }
 
-  get visibleHeaders (): AppTableHeader[] {
-    return this.headers.filter(header => header.visible || header.visible === undefined)
+  // The available headers, based on the current root and system configuration.
+  get headers (): DataTableHeader[] {
+    return [
+      {
+        text: '',
+        value: 'data-table-icons',
+        sortable: false,
+        width: '24px'
+      },
+      {
+        text: this.$tc('app.general.table.header.name'),
+        value: 'name'
+      },
+      ...this.configurableHeaders
+        .filter(header => header.visible !== false)
+    ]
   }
 
   // The current path for the given root.
diff --git a/src/components/widgets/filesystem/FileSystemBrowser.vue b/src/components/widgets/filesystem/FileSystemBrowser.vue
index 75b1fa3b3d..5f86772dcc 100644
--- a/src/components/widgets/filesystem/FileSystemBrowser.vue
+++ b/src/components/widgets/filesystem/FileSystemBrowser.vue
@@ -28,13 +28,15 @@
       fixed-header
       @input="handleSelected"
     >
-      <template #item="{ item, isSelected, select }">
-        <tr
+      <template #item="{ headers, item, isSelected, select }">
+        <app-data-table-row
+          :headers="headers"
+          :item="item"
+          :is-selected="isSelected && item.name !== '..'"
           :class="{
             'is-disabled': disabled,
-            'v-data-table__selected': (isSelected && item.name !== '..')
+            'px-1': true
           }"
-          class="row-select px-1"
           :draggable="isItemDraggable(item)"
           @click.prevent="$emit('row-click', item, $event)"
           @contextmenu.prevent="$emit('row-click', item, $event)"
@@ -45,7 +47,7 @@
           @dragleave.prevent="handleDragLeave"
           @drop.prevent="handleDrop(item, $event)"
         >
-          <td v-if="bulkActions">
+          <template #[`item.data-table-select`]>
             <v-simple-checkbox
               v-if="item.name !== '..'"
               v-ripple
@@ -54,9 +56,9 @@
               class="mt-1"
               @click.stop="select(!isSelected)"
             />
-          </td>
-          <td>
-            <!-- icons are 16px small, or 24px for standard size. -->
+          </template>
+
+          <template #[`item.data-table-icons`]>
             <v-layout
               justify-center
               class="no-pointer-events"
@@ -74,203 +76,169 @@
                 :src="getThumbUrl(item, root, item.path, thumbnailSize > 16, item.modified)"
               >
             </v-layout>
-          </td>
+          </template>
 
-          <file-row-item :nowrap="false">
-            {{ item.name }}
-          </file-row-item>
+          <template #[`item.name`]="{ value }">
+            {{ value }}
+          </template>
 
-          <template v-if="root === 'gcodes'">
-            <file-row-item
-              :headers="headers"
-              item-value="history.status"
-            >
-              <span v-if="item.history && item.history.status !== undefined">
-                <job-history-item-status :job="item.history" />
-              </span>
-            </file-row-item>
-
-            <file-row-item
-              :headers="headers"
-              item-value="object_height"
-            >
-              <span v-if="item.object_height !== undefined">
-                {{ $filters.getReadableLengthString(item.object_height) }}
-              </span>
-            </file-row-item>
-
-            <file-row-item
-              :headers="headers"
-              item-value="first_layer_height"
-            >
-              <span v-if="item.first_layer_height !== undefined">
-                {{ item.first_layer_height }} mm
-              </span>
-            </file-row-item>
-
-            <file-row-item
-              :headers="headers"
-              item-value="layer_height"
-            >
-              <span v-if="item.layer_height !== undefined">
-                {{ item.layer_height }} mm
-              </span>
-            </file-row-item>
-
-            <file-row-item
-              :headers="headers"
-              item-value="filament_name"
-            >
-              <span v-if="item.filament_name !== undefined">
-                {{ item.filament_name }}
-              </span>
-            </file-row-item>
-
-            <file-row-item
-              :headers="headers"
-              item-value="filament_type"
-            >
-              <span v-if="item.filament_type !== undefined">
-                {{ item.filament_type }}
-              </span>
-            </file-row-item>
-
-            <file-row-item
-              :headers="headers"
-              item-value="filament_total"
-            >
-              <span v-if="item.filament_total !== undefined">
-                {{ $filters.getReadableLengthString(item.filament_total) }}
-              </span>
-            </file-row-item>
-
-            <file-row-item
-              :headers="headers"
-              item-value="filament_weight_total"
-            >
-              <span v-if="item.filament_weight_total !== undefined">
-                {{ $filters.getReadableWeightString(item.filament_weight_total) }}
-              </span>
-            </file-row-item>
-
-            <file-row-item
-              :headers="headers"
-              item-value="history.filament_used"
-            >
-              <span v-if="item.history && item.history.filament_used !== undefined">
-                {{ $filters.getReadableLengthString(item.history.filament_used) }}
-              </span>
-            </file-row-item>
-
-            <file-row-item
-              :headers="headers"
-              item-value="nozzle_diameter"
-            >
-              <span v-if="item.nozzle_diameter !== undefined">
-                {{ item.nozzle_diameter }} mm
-              </span>
-            </file-row-item>
-
-            <file-row-item
-              :headers="headers"
-              item-value="slicer"
-            >
-              <span v-if="item.slicer !== undefined">
-                {{ item.slicer }}
-              </span>
-            </file-row-item>
-
-            <file-row-item
-              :headers="headers"
-              item-value="slicer_version"
-            >
-              <span v-if="item.slicer_version !== undefined">
-                {{ item.slicer_version }}
-              </span>
-            </file-row-item>
-
-            <file-row-item
-              :headers="headers"
-              item-value="estimated_time"
-            >
-              <span v-if="item.estimated_time !== undefined">
-                {{ $filters.formatCounterSeconds(item.estimated_time) }}
-              </span>
-            </file-row-item>
-
-            <file-row-item
-              :headers="headers"
-              item-value="history.print_duration"
-            >
-              <span v-if="item.history && item.history.print_duration !== undefined">
-                {{ $filters.formatCounterSeconds(item.history.print_duration) }}
-              </span>
-            </file-row-item>
-
-            <file-row-item
-              :headers="headers"
-              item-value="history.total_duration"
-            >
-              <span v-if="item.history && item.history.total_duration !== undefined">
-                {{ $filters.formatCounterSeconds(item.history.total_duration) }}
-              </span>
-            </file-row-item>
-
-            <file-row-item
-              :headers="headers"
-              item-value="first_layer_bed_temp"
-            >
-              <span v-if="item.first_layer_bed_temp !== undefined">
-                {{ item.first_layer_bed_temp }}<small>°C</small>
-              </span>
-            </file-row-item>
-
-            <file-row-item
-              :headers="headers"
-              item-value="first_layer_extr_temp"
-            >
-              <span v-if="item.first_layer_extr_temp !== undefined">
-                {{ item.first_layer_extr_temp }}<small>°C</small>
-              </span>
-            </file-row-item>
-
-            <file-row-item
-              :headers="headers"
-              item-value="chamber_temp"
-            >
-              <span v-if="item.chamber_temp !== undefined">
-                {{ item.chamber_temp }}<small>°C</small>
-              </span>
-            </file-row-item>
-
-            <file-row-item
-              :headers="headers"
-              item-value="print_start_time"
-            >
-              <span v-if="item.print_start_time !== undefined && item.print_start_time !== null">
-                {{ $filters.formatDateTime(item.print_start_time * 1000) }}
-              </span>
-            </file-row-item>
+          <template #[`item.history.status`]="{ value }">
+            <job-history-item-status
+              v-if="value != null"
+              :job="item.history"
+            />
+            <template v-else>
+              --
+            </template>
+          </template>
+
+          <template #[`item.object_height`]="{ value }">
+            {{
+              value != null
+                ? $filters.getReadableLengthString(value)
+                : '-- '
+            }}
+          </template>
+
+          <template #[`item.first_layer_height`]="{ value }">
+            {{
+              value != null
+                ? `${value} mm`
+                : '--'
+            }}
+          </template>
+
+          <template #[`item.layer_height`]="{ value }">
+            {{
+              value != null
+                ? `${value} mm`
+                : '--'
+            }}
+          </template>
+
+          <template #[`item.filament_name`]="{ value }">
+            {{ value ?? '--' }}
           </template>
 
-          <file-row-item
-            :headers="headers"
-            item-value="modified"
-          >
-            <span v-if="item.modified !== undefined && item.name !== '..'">
-              {{ $filters.formatDateTime(item.modified * 1000) }}
-            </span>
-          </file-row-item>
-
-          <file-row-item
-            :headers="headers"
-            item-value="size"
-          >
-            <span v-if="item.size !== undefined && item.name !== '..'">
-              {{ $filters.getReadableFileSizeString(item.size) }}
-            </span>
-          </file-row-item>
-        </tr>
+          <template #[`item.filament_type`]="{ value }">
+            {{ value ?? '--' }}
+          </template>
+
+          <template #[`item.filament_total`]="{ value }">
+            {{
+              value != null
+                ? $filters.getReadableLengthString(value)
+                : '--'
+            }}
+          </template>
+
+          <template #[`item.filament_weight_total`]="{ value }">
+            {{
+              value != null
+                ? $filters.getReadableWeightString(value)
+                : '--'
+            }}
+          </template>
+
+          <template #[`item.history.filament_used`]="{ value }">
+            {{
+              value != null
+                ? $filters.getReadableLengthString(value)
+                :'--'
+            }}
+          </template>
+
+          <template #[`item.nozzle_diameter`]="{ value }">
+            {{
+              value != null
+                ? `${value} mm`
+                : '--'
+            }}
+          </template>
+
+          <template #[`item.slicer`]="{ value }">
+            {{ value ?? '--' }}
+          </template>
+
+          <template #[`item.slicer_version`]="{ value }">
+            {{ value ?? '--' }}
+          </template>
+
+          <template #[`item.estimated_time`]="{ value }">
+            {{
+              value != null
+                ? $filters.formatCounterSeconds(value)
+                : '--'
+            }}
+          </template>
+
+          <template #[`item.history.print_duration`]="{ value }">
+            {{
+              value != null
+                ? $filters.formatCounterSeconds(value)
+                : '--'
+            }}
+          </template>
+
+          <template #[`item.history.total_duration`]="{ value }">
+            {{
+              value != null
+                ? $filters.formatCounterSeconds(value)
+                :'--'
+            }}
+          </template>
+
+          <template #[`item.first_layer_bed_temp`]="{ value }">
+            <template v-if="value != null">
+              {{ value }}<small>°C</small>
+            </template>
+            <template v-else>
+              --
+            </template>
+          </template>
+
+          <template #[`item.first_layer_extr_temp`]="{ value }">
+            <template v-if="value != null">
+              {{ value }}<small>°C</small>
+            </template>
+            <template v-else>
+              --
+            </template>
+          </template>
+
+          <template #[`item.chamber_temp`]="{ value }">
+            <template v-if="value != null">
+              {{ value }}<small>°C</small>
+            </template>
+            <template v-else>
+              --
+            </template>
+          </template>
+
+          <template #[`item.print_start_time`]="{ value }">
+            {{
+              value != null
+                ? $filters.formatDateTime(value * 1000)
+                :'--'
+            }}
+          </template>
+
+          <template #[`item.modified`]="{ value }">
+            {{
+              value != null && item.name !== '..'
+                ? $filters.formatDateTime(value * 1000)
+                : '--'
+            }}
+          </template>
+
+          <template #[`item.size`]="{ value }">
+            {{
+              value != null && item.name !== '..'
+                ? $filters.getReadableFileSizeString(value)
+                : '--'
+            }}
+          </template>
+        </app-data-table-row>
       </template>
     </v-data-table>
   </div>
@@ -279,17 +247,15 @@
 <script lang="ts">
 import { Component, Prop, Mixins, VModel, PropSync } from 'vue-property-decorator'
 import type { FileBrowserEntry, RootProperties } from '@/store/files/types'
-import type { AppTableHeader } from '@/types'
 import FilesMixin from '@/mixins/files'
 
-import FileRowItem from './FileRowItem.vue'
 import JobHistoryItemStatus from '@/components/widgets/history/JobHistoryItemStatus.vue'
 import { SupportedImageFormats, SupportedVideoFormats } from '@/globals'
 import type { TextSortOrder } from '@/store/config/types'
+import type { DataTableHeader } from 'vuetify'
 
 @Component({
   components: {
-    FileRowItem,
     JobHistoryItemStatus
   }
 })
@@ -310,8 +276,8 @@ export default class FileSystemBrowser extends Mixins(FilesMixin) {
   readonly loading?: boolean
 
   // Currently defined list of headers.
-  @Prop({ type: Array<AppTableHeader>, required: true })
-  readonly headers!: AppTableHeader[]
+  @Prop({ type: Array<DataTableHeader>, required: true })
+  readonly headers!: DataTableHeader[]
 
   @Prop({ type: String })
   readonly search?: string
diff --git a/src/components/widgets/history/JobHistory.vue b/src/components/widgets/history/JobHistory.vue
index 68a594e3b7..cc2d0dfdc6 100644
--- a/src/components/widgets/history/JobHistory.vue
+++ b/src/components/widgets/history/JobHistory.vue
@@ -8,7 +8,7 @@
       <app-column-picker
         v-if="headers"
         key-name="history"
-        :headers="headers"
+        :headers="configurableHeaders"
       />
 
       <div
@@ -28,7 +28,7 @@
 
     <v-data-table
       :items="history"
-      :headers="visibleHeaders"
+      :headers="headers"
       :items-per-page="15"
       :item-class="getRowClasses"
       single-expand
@@ -59,9 +59,7 @@
         </td>
       </template>
 
-      <template
-        #[`item.data-table-icons`]="{ item }"
-      >
+      <template #[`item.data-table-icons`]="{ item }">
         <!-- If the item no longer exists. -->
         <v-icon
           v-if="!item.exists"
@@ -90,99 +88,65 @@
         >
       </template>
 
-      <template
-        #[`item.filename`]="{ item }"
-      >
-        <span class="">
-          {{ getFilePaths(item.filename).filename }}
-        </span>
+      <template #[`item.filename`]="{ value }">
+        {{ getFilePaths(value).filename }}
       </template>
 
-      <template
-        #[`item.status`]="{ item }"
-      >
+      <template #[`item.status`]="{ item }">
         <job-history-item-status :job="item" />
       </template>
 
-      <template
-        #[`item.start_time`]="{ item }"
-      >
-        <span class="text-no-wrap">
-          {{ $filters.formatDateTime(item.start_time * 1000) }}
-        </span>
+      <template #[`item.start_time`]="{ value }">
+        {{ $filters.formatDateTime(value * 1000) }}
       </template>
 
-      <template
-        #[`item.end_time`]="{ item }"
-      >
-        <span
-          v-if="item.status !== 'in_progress'"
-          class="text-no-wrap"
-        >
-          {{ $filters.formatDateTime(item.end_time * 1000) }}
-        </span>
-        <span v-else>--</span>
+      <template #[`item.end_time`]="{ item, value }">
+        {{
+          item.status !== 'in_progress'
+            ? $filters.formatDateTime(value * 1000)
+            : '--'
+        }}
       </template>
 
-      <template
-        #[`item.print_duration`]="{ item }"
-      >
-        <span class="text-no-wrap">
-          {{ $filters.formatCounterSeconds(item.print_duration) }}
-        </span>
+      <template #[`item.print_duration`]="{ value }">
+        {{ $filters.formatCounterSeconds(value) }}
       </template>
 
-      <template
-        #[`item.total_duration`]="{ item }"
-      >
-        <span class="text-no-wrap">
-          {{ $filters.formatCounterSeconds(item.total_duration) }}
-        </span>
+      <template #[`item.total_duration`]="{ value }">
+        {{ $filters.formatCounterSeconds(value) }}
       </template>
 
-      <template
-        #[`item.filament_used`]="{ item }"
-      >
-        <span class="text-no-wrap">
-          {{ $filters.getReadableLengthString(item.filament_used) }}
-        </span>
+      <template #[`item.filament_used`]="{ value }">
+        {{ $filters.getReadableLengthString(value) }}
       </template>
 
-      <template
-        #[`item.metadata.size`]="{ item }"
-      >
-        <span class="text-no-wrap">
-          {{ $filters.getReadableFileSizeString(item.metadata.size) }}
-        </span>
+      <template #[`item.metadata.size`]="{ value }">
+        {{ $filters.getReadableFileSizeString(value) }}
       </template>
 
-      <template
-        #[`item.actions`]="{ item }"
-      >
-        <div class="text-no-wrap">
-          <v-btn
-            icon
+      <template #[`item.actions`]="{ item }">
+        <v-btn
+          icon
+          small
+          @click="handleRemoveJob(item)"
+        >
+          <v-icon
             small
-            @click="handleRemoveJob(item)"
-          >
-            <v-icon
-              small
-              color=""
-            >
-              $delete
-            </v-icon>
-          </v-btn>
-          <v-btn
-            class="v-data-table__expand-icon"
             color=""
-            :class="{ 'v-data-table__expand-icon--active': isExpanded(item) }"
-            icon
-            small
-            @click.prevent.stop="toggleRowExpand(item)"
           >
-            <v-icon>$chevronDown</v-icon>
-          </v-btn>
-        </div>
+            $delete
+          </v-icon>
+        </v-btn>
+        <v-btn
+          class="v-data-table__expand-icon"
+          color=""
+          :class="{ 'v-data-table__expand-icon--active': isExpanded(item) }"
+          icon
+          small
+          @click.prevent.stop="toggleRowExpand(item)"
+        >
+          <v-icon>$chevronDown</v-icon>
+        </v-btn>
       </template>
     </v-data-table>
   </div>
@@ -196,6 +160,7 @@ import getFilePaths from '@/util/get-file-paths'
 import type { HistoryItem } from '@/store/history/types'
 import { SocketActions } from '@/api/socketActions'
 import type { AppTableHeader } from '@/types'
+import type { DataTableHeader } from 'vuetify'
 
 @Component({
   components: {
@@ -206,25 +171,74 @@ export default class JobHistory extends Mixins(FilesMixin) {
   expanded: HistoryItem[] = []
   search = ''
 
-  get headers (): AppTableHeader[] {
-    const headers = [
-      { text: '', value: 'data-table-icons', sortable: false, width: '24px' },
-      { text: this.$tc('app.general.table.header.name'), value: 'filename' },
-      { text: this.$tc('app.general.table.header.status'), value: 'status', configurable: true },
-      { text: this.$tc('app.general.table.header.start_time'), value: 'start_time', configurable: true },
-      { text: this.$tc('app.general.table.header.end_time'), value: 'end_time', configurable: true },
-      { text: this.$tc('app.general.table.header.print_duration'), value: 'print_duration', configurable: true },
-      { text: this.$tc('app.general.table.header.total_duration'), value: 'total_duration', configurable: true },
-      { text: this.$tc('app.general.table.header.filament_used'), value: 'filament_used', configurable: true },
-      { text: this.$t('app.general.table.header.size'), value: 'metadata.size', width: '1%', configurable: true },
-      { text: this.$tc('app.general.table.header.actions'), value: 'actions', sortable: false, align: 'end' }
+  get configurableHeaders (): AppTableHeader[] {
+    const headers: AppTableHeader[] = [
+      {
+        text: this.$tc('app.general.table.header.status'),
+        value: 'status',
+        cellClass: 'text-no-wrap'
+      },
+      {
+        text: this.$tc('app.general.table.header.start_time'),
+        value: 'start_time',
+        cellClass: 'text-no-wrap'
+      },
+      {
+        text: this.$tc('app.general.table.header.end_time'),
+        value: 'end_time',
+        cellClass: 'text-no-wrap'
+      },
+      {
+        text: this.$tc('app.general.table.header.print_duration'),
+        value: 'print_duration',
+        visible: false,
+        cellClass: 'text-no-wrap'
+      },
+      {
+        text: this.$tc('app.general.table.header.total_duration'),
+        value: 'total_duration',
+        cellClass: 'text-no-wrap'
+      },
+      {
+        text: this.$tc('app.general.table.header.filament_used'),
+        value: 'filament_used',
+        visible: false,
+        cellClass: 'text-no-wrap'
+      },
+      {
+        text: this.$tc('app.general.table.header.size'),
+        value: 'metadata.size',
+        cellClass: 'text-no-wrap',
+        width: '1%'
+      },
     ]
-    const key = 'history'
-    return this.$store.getters['config/getMergedTableHeaders'](headers, key)
+
+    const mergedTableHeaders = this.$store.getters['config/getMergedTableHeaders'](headers, 'history') as AppTableHeader[]
+
+    return mergedTableHeaders
   }
 
-  get visibleHeaders (): AppTableHeader[] {
-    return this.headers.filter(header => header.visible || header.visible === undefined)
+  get headers (): DataTableHeader[] {
+    return [
+      {
+        text: '',
+        value: 'data-table-icons',
+        sortable: false,
+        width: '24px'
+      },
+      {
+        text: this.$tc('app.general.table.header.name'),
+        value: 'filename'
+      },
+      ...this.configurableHeaders
+        .filter(header => header.visible !== false),
+      {
+        text: this.$tc('app.general.table.header.actions'),
+        value: 'actions',
+        sortable: false,
+        align: 'end'
+      }
+    ]
   }
 
   get history () {
diff --git a/src/components/widgets/job-queue/JobQueue.vue b/src/components/widgets/job-queue/JobQueue.vue
index 28455c7467..0fd46da362 100644
--- a/src/components/widgets/job-queue/JobQueue.vue
+++ b/src/components/widgets/job-queue/JobQueue.vue
@@ -8,7 +8,7 @@
   >
     <job-queue-toolbar
       v-if="selected.length === 0"
-      :headers="headers"
+      :headers="configurableHeaders"
       @remove-all="handleRemoveAll"
       @refresh="handleRefresh"
     />
@@ -21,7 +21,7 @@
 
     <job-queue-browser
       v-model="selected"
-      :headers="visibleHeaders"
+      :headers="headers"
       :dense="dense"
       :bulk-actions="bulkActions"
       @row-click="handleRowClick"
@@ -64,6 +64,7 @@ import JobQueueContextMenu from './JobQueueContextMenu.vue'
 import JobQueueMultiplyJobDialog from './JobQueueMultiplyJobDialog.vue'
 import type { AppTableHeader } from '@/types'
 import { getFileDataTransferDataFromDataTransfer, hasFileDataTransferTypeInDataTransfer } from '@/util/file-data-transfer'
+import type { DataTableHeader } from 'vuetify'
 
 @Component({
   components: {
@@ -96,19 +97,44 @@ export default class JobQueue extends Vue {
   @Prop({ type: Boolean })
   readonly bulkActions?: boolean
 
-  get headers (): AppTableHeader[] {
-    const headers = [
-      { text: '', value: 'handle', sortable: false, width: '24px' },
-      { text: this.$tc('app.general.table.header.name'), value: 'filename', sortable: false },
-      { text: this.$tc('app.general.table.header.time_added'), value: 'time_added', configurable: true, sortable: false },
-      { text: this.$tc('app.general.table.header.time_in_queue'), value: 'time_in_queue', configurable: true, sortable: false }
+  get configurableHeaders (): AppTableHeader[] {
+    const headers: AppTableHeader[] = [
+      {
+        text: this.$tc('app.general.table.header.time_added'),
+        value: 'time_added',
+        sortable: false,
+        cellClass: 'text-no-wrap'
+      },
+      {
+        text: this.$tc('app.general.table.header.time_in_queue'),
+        value: 'time_in_queue',
+        visible: false,
+        sortable: false,
+        cellClass: 'text-no-wrap'
+      }
     ]
-    const key = 'job_queue'
-    return this.$store.getters['config/getMergedTableHeaders'](headers, key)
+
+    const mergedTableHeaders = this.$store.getters['config/getMergedTableHeaders'](headers, 'job_queue') as AppTableHeader[]
+
+    return mergedTableHeaders
   }
 
-  get visibleHeaders (): AppTableHeader[] {
-    return this.headers.filter(header => header.visible || header.visible === undefined)
+  get headers (): DataTableHeader[] {
+    return [
+      {
+        text: '',
+        value: 'handle',
+        sortable: false,
+        width: '24px'
+      },
+      {
+        text: this.$tc('app.general.table.header.name'),
+        value: 'filename',
+        sortable: false
+      },
+      ...this.configurableHeaders
+        .filter(header => header.visible !== false)
+    ]
   }
 
   handleRowClick (item: QueuedJob, event: MouseEvent) {
diff --git a/src/components/widgets/job-queue/JobQueueBrowser.vue b/src/components/widgets/job-queue/JobQueueBrowser.vue
index cf99d1a09e..9221bdfa0f 100644
--- a/src/components/widgets/job-queue/JobQueueBrowser.vue
+++ b/src/components/widgets/job-queue/JobQueueBrowser.vue
@@ -36,20 +36,14 @@
             $drag
           </v-icon>
         </template>
-        <template #[`item.filename`]="{ item }">
-          <span>
-            {{ item.filename }}
-          </span>
+        <template #[`item.filename`]="{ value }">
+          {{ value }}
         </template>
-        <template #[`item.time_added`]="{ item }">
-          <span class="text-no-wrap">
-            {{ $filters.formatAbsoluteDateTime(item.time_added * 1000) }}
-          </span>
+        <template #[`item.time_added`]="{ value }">
+          {{ $filters.formatAbsoluteDateTime(value * 1000) }}
         </template>
-        <template #[`item.time_in_queue`]="{ item }">
-          <span class="text-no-wrap">
-            {{ $filters.formatCounterSeconds(item.time_in_queue) }}
-          </span>
+        <template #[`item.time_in_queue`]="{ value }">
+          {{ $filters.formatCounterSeconds(value) }}
         </template>
       </v-data-table>
     </app-draggable>
@@ -60,9 +54,8 @@
 import { Component, Mixins, Prop, VModel } from 'vue-property-decorator'
 import type { QueuedJob } from '@/store/jobQueue/types'
 import { SocketActions } from '@/api/socketActions'
-import type { AppTableHeader } from '@/types'
 import StateMixin from '@/mixins/state'
-import type { DataTableItemProps } from 'vuetify'
+import type { DataTableHeader, DataTableItemProps } from 'vuetify'
 
 type QueueJobWithKey = QueuedJob & {
   key: string
@@ -79,8 +72,8 @@ export default class JobQueueBrowser extends Mixins(StateMixin) {
   @Prop({ type: Boolean })
   readonly bulkActions?: boolean
 
-  @Prop({ type: Array<AppTableHeader>, required: true })
-  readonly headers!: AppTableHeader[]
+  @Prop({ type: Array<DataTableHeader>, required: true })
+  readonly headers!: DataTableHeader[]
 
   get jobs (): QueuedJob[] {
     this.selected = []
diff --git a/src/components/widgets/spoolman/SpoolSelectionDialog.vue b/src/components/widgets/spoolman/SpoolSelectionDialog.vue
index c50d036ba5..91e2b400e1 100644
--- a/src/components/widgets/spoolman/SpoolSelectionDialog.vue
+++ b/src/components/widgets/spoolman/SpoolSelectionDialog.vue
@@ -77,7 +77,7 @@
 
       <app-column-picker
         key-name="spoolman"
-        :headers="headers"
+        :headers="configurableHeaders"
       />
 
       <v-text-field
@@ -95,7 +95,7 @@
     <v-card-text class="fill-height pt-0">
       <v-data-table
         :items="availableSpools"
-        :headers="visibleHeaders"
+        :headers="headers"
         :search="search"
         :custom-filter="filterResults"
         :no-data-text="$t('app.file_system.msg.not_found')"
@@ -109,13 +109,16 @@
         @update:sort-by="handleSortOrderKeyChange"
         @update:sort-desc="handleSortOrderDescChange"
       >
-        <template #item="{ item }">
-          <tr
-            :class="{ 'v-data-table__selected': (item.id === selectedSpool) }"
-            class="row-select px-1"
+        <template #item="{ headers, item, index}">
+          <app-data-table-row
+            :headers="headers"
+            :item="item"
+            :index="index"
+            :is-selected="item.id === selectedSpool"
+            class="px-1"
             @click.prevent="selectedSpool = selectedSpool === item.id ? null : item.id"
           >
-            <td>
+            <template #[`item.filament_name`]>
               <div class="d-flex">
                 <v-icon
                   :color="`#${item.filament.color_hex ?? ($vuetify.theme.dark ? 'fff' : '000')}`"
@@ -140,20 +143,16 @@
                   </div>
                 </div>
               </div>
-            </td>
-            <td
-              v-for="header in visibleHeaders.filter(h => h.value !== 'filament_name')"
-              :key="header.value"
-            >
-              <template v-if="header.value === 'last_used'">
-                {{ item[header.value] ? $filters.formatRelativeTimeToNow(item[header.value]) : $tc('app.setting.label.never') }}
-              </template>
-
-              <template v-else>
-                {{ item[header.value] }}
-              </template>
-            </td>
-          </tr>
+            </template>
+
+            <template #[`item.last_used`]="{ value }">
+              {{
+                value
+                  ? $filters.formatRelativeTimeToNow(value)
+                  : $tc('app.setting.label.never')
+              }}
+            </template>
+          </app-data-table-row>
         </template>
       </v-data-table>
     </v-card-text>
@@ -208,9 +207,12 @@ import type { WebcamConfig } from '@/store/webcams/types'
 import QrScanner from 'qr-scanner'
 import type { AppTableHeader } from '@/types'
 import getFilePaths from '@/util/get-file-paths'
+import type { DataTableHeader } from 'vuetify'
 
 @Component({
-  components: { QRReader }
+  components: {
+    QRReader
+  }
 })
 export default class SpoolSelectionDialog extends Mixins(StateMixin, BrowserMixin) {
   search = ''
@@ -290,25 +292,44 @@ export default class SpoolSelectionDialog extends Mixins(StateMixin, BrowserMixi
     return spools
   }
 
-  get headers (): AppTableHeader[] {
-    const headers = [
-      'filament_name',
-      'id',
-      'material',
-      'location',
-      'comment',
-      'last_used'
-    ].map((value) => ({
-      text: this.$tc(`app.spoolman.label.${value}`),
-      value,
-      configurable: value !== 'filament_name'
-    }))
-
-    return this.$store.getters['config/getMergedTableHeaders'](headers, 'spoolman')
+  get configurableHeaders (): AppTableHeader[] {
+    const headers: AppTableHeader[] = [
+      {
+        text: this.$tc('app.spoolman.label.id'),
+        value: 'id'
+      },
+      {
+        text: this.$tc('app.spoolman.label.material'),
+        value: 'material'
+      },
+      {
+        text: this.$tc('app.spoolman.label.location'),
+        value: 'location'
+      },
+      {
+        text: this.$tc('app.spoolman.label.comment'),
+        value: 'comment'
+      },
+      {
+        text: this.$tc('app.spoolman.label.last_used'),
+        value: 'last_used'
+      },
+    ]
+
+    const mergedTableHeaders = this.$store.getters['config/getMergedTableHeaders'](headers, 'spoolman') as AppTableHeader[]
+
+    return mergedTableHeaders
   }
 
-  get visibleHeaders (): AppTableHeader[] {
-    return this.headers.filter(header => header.visible || header.visible === undefined)
+  get headers (): DataTableHeader[] {
+    return [
+      {
+        text: this.$tc('app.spoolman.label.filament_name'),
+        value: 'filament_name'
+      },
+      ...this.configurableHeaders
+        .filter(header => header.visible !== false)
+    ]
   }
 
   get selectedSpool () {
diff --git a/src/store/config/actions.ts b/src/store/config/actions.ts
index a8f4866ef9..52e62649ed 100644
--- a/src/store/config/actions.ts
+++ b/src/store/config/actions.ts
@@ -5,9 +5,9 @@ import type { RootState } from '../types'
 import { SocketActions } from '@/api/socketActions'
 import { loadLocaleMessagesAsync, getStartingLocale } from '@/plugins/i18n'
 import { Waits } from '@/globals'
-import type { AppTableHeader } from '@/types'
 import type { FileFilterType } from '../files/types'
 import { TinyColor } from '@ctrl/tinycolor'
+import type { AppTablePartialHeader } from '@/types/tableheaders'
 
 export const actions: ActionTree<ConfigState, RootState> = {
   /**
@@ -177,13 +177,20 @@ export const actions: ActionTree<ConfigState, RootState> = {
   /**
    * Toggle a tables header state based on its name and key.
    */
-  async updateHeader ({ commit, state }, payload: { name: string; header: AppTableHeader }) {
+  async updateHeader ({ commit, state }, payload: { name: string; header: AppTablePartialHeader }) {
     commit('setUpdateHeader', payload)
     if (state.uiSettings.tableHeaders[payload.name]) {
       SocketActions.serverWrite(`uiSettings.tableHeaders.${payload.name}`, state.uiSettings.tableHeaders[payload.name])
     }
   },
 
+  async updateHeaders ({ commit, state }, payload: { name: string; headers: AppTablePartialHeader[] }) {
+    commit('setUpdateHeaders', payload)
+    if (state.uiSettings.tableHeaders[payload.name]) {
+      SocketActions.serverWrite(`uiSettings.tableHeaders.${payload.name}`, state.uiSettings.tableHeaders[payload.name])
+    }
+  },
+
   async updateTheme ({ state, dispatch }, payload: Partial<ThemeConfig>) {
     const updatedTheme: ThemeConfig = {
       ...state.uiSettings.theme,
diff --git a/src/store/config/getters.ts b/src/store/config/getters.ts
index 48267f82d9..45bde8eedd 100644
--- a/src/store/config/getters.ts
+++ b/src/store/config/getters.ts
@@ -90,25 +90,27 @@ export const getters: GetterTree<ConfigState, RootState> = {
 
   getMergedTableHeaders: (state, getters) => (headers: AppTableHeader[], key: string) => {
     const configured: AppTablePartialHeader[] = getters.getConfiguredTableHeaders(key)
+
     if (!configured) {
       return headers
     }
-    const merged: AppTableHeader[] = []
-    headers.forEach(header => {
-      const keyBy = (header.key)
-        ? 'key'
-        : 'value'
-
-      const o = {
-        visible: true,
-        configurable: false,
-        ...header,
-        ...configured.find(p => p[keyBy] === header[keyBy])
-      }
 
-      merged.push(o)
-    })
-    return merged
+    // if the number of configured headers is the same as the available headers,
+    // then use configured headers to keep order
+    // else go with available headers
+    return headers.length === configured.length
+      ? configured
+        .map(header => ({
+          visible: true,
+          ...headers.find(p => p.value === header.value),
+          ...header,
+        }))
+      : headers
+        .map(header => ({
+          visible: true,
+          ...header,
+          ...configured.find(p => p.value === header.value)
+        }))
   },
 
   getConfiguredTableHeaders: (state) => (key: string) => {
diff --git a/src/store/config/mutations.ts b/src/store/config/mutations.ts
index 93fd80d495..a4098153b8 100644
--- a/src/store/config/mutations.ts
+++ b/src/store/config/mutations.ts
@@ -185,32 +185,29 @@ export const mutations: MutationTree<ConfigState> = {
   /**
    * Toggle a tables header state based on its name and key.
    */
-  setUpdateHeader (state, payload: { name: string; header: AppTableHeader }) {
-    const header = payload.header
-    const keyBy = (header.key)
-      ? 'key'
-      : 'value'
+  setUpdateHeader (state, payload: { name: string; header: AppTablePartialHeader }) {
+    const { value, visible } = payload.header
 
-    const key = header[keyBy]
     const headers: AppTablePartialHeader[] = state.uiSettings.tableHeaders[payload.name]
 
     if (headers) {
-      const i = headers.findIndex(item => {
-        return item[keyBy] === key
-      })
+      const i = headers.findIndex(item => item.value === value)
+
       if (i >= 0) {
         Vue.set(headers, i, {
           ...headers[i],
-          visible: header.visible
+          visible
         })
       } else {
-        const o: AppTablePartialHeader = {
-          value: header.value,
-          visible: header.visible
-        }
-        if (keyBy === 'key') o.key = header.key
-        headers.push(o)
+        headers.push({
+          value,
+          visible
+        })
       }
     }
+  },
+
+  setUpdateHeaders (state, payload: { name: string; headers: AppTableHeader[] }) {
+    state.uiSettings.tableHeaders[payload.name] = payload.headers
   }
 }
diff --git a/src/store/config/state.ts b/src/store/config/state.ts
index aab890e19e..675ff19fa2 100644
--- a/src/store/config/state.ts
+++ b/src/store/config/state.ts
@@ -88,43 +88,10 @@ export const defaultState = (): ConfigState => {
         tempPresets: []
       },
       tableHeaders: {
-        gcodes_dashboard: [
-          { value: 'history.status', visible: false },
-          { value: 'first_layer_extr_temp', visible: false },
-          { value: 'first_layer_bed_temp', visible: false },
-          { value: 'chamber_temp', visible: false },
-          { value: 'history.total_duration', visible: false },
-          { value: 'history.print_duration', visible: false },
-          { value: 'estimated_time', visible: false },
-          { value: 'nozzle_diameter', visible: false },
-          { value: 'slicer_version', visible: false },
-          { value: 'slicer', visible: false },
-          { value: 'history.filament_used', visible: false },
-          { value: 'filament_name', visible: false },
-          { value: 'filament_type', visible: false },
-          { value: 'filament_total', visible: false },
-          { value: 'filament_weight_total', visible: false },
-          { value: 'object_height', visible: false },
-          { value: 'first_layer_height', visible: false },
-          { value: 'layer_height', visible: false }
-        ],
-        gcodes_jobs: [
-          { value: 'first_layer_height', visible: false },
-          { value: 'history.filament_used', visible: false },
-          { value: 'slicer_version', visible: false },
-          { value: 'history.print_duration', visible: false },
-          { value: 'chamber_temp', visible: false },
-          { value: 'first_layer_extr_temp', visible: false },
-          { value: 'first_layer_bed_temp', visible: false }
-        ],
-        history: [
-          { value: 'print_duration', visible: false },
-          { value: 'filament_used', visible: false }
-        ],
-        job_queue: [
-          { value: 'time_added', visible: true },
-          { value: 'time_in_queue', visible: false }
-        ],
+        gcodes_dashboard: [],
+        gcodes_jobs: [],
+        history: [],
+        job_queue: [],
         spoolman: []
       },
       gcodePreview: {
diff --git a/src/types/tableheaders.ts b/src/types/tableheaders.ts
index d7180c8f55..1760d68b14 100644
--- a/src/types/tableheaders.ts
+++ b/src/types/tableheaders.ts
@@ -3,13 +3,10 @@ import type { DataTableHeader } from 'vuetify'
 /**
  * Vuetify table headers, extended with data so we can more easily save
  * and reference later.
- * key: Used to override the lookup key if required.
  * configurable: if a user can toggle this header or not. Defaults to true if not defined.
  */
 export interface AppTablePartialHeader {
   value: string;
-  key?: string;
-  configurable?: boolean;
   visible?: boolean;
 }