From 818a649b22843d956f6edd6b0efe89905d6984d9 Mon Sep 17 00:00:00 2001
From: Meghan <Meg.Woodford@IntelliTect.com>
Date: Sat, 10 Aug 2024 15:18:09 -0700
Subject: [PATCH 01/10] Always show action buttons

---
 .../src/components/admin/c-admin-table.vue           |  9 +++++++--
 .../src/components/display/c-table.vue               | 12 +++++++++---
 src/coalesce-vue-vuetify3/src/shared.scss            |  7 +++++++
 3 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/coalesce-vue-vuetify3/src/components/admin/c-admin-table.vue b/src/coalesce-vue-vuetify3/src/components/admin/c-admin-table.vue
index 4ed0b06e1..038d899e9 100644
--- a/src/coalesce-vue-vuetify3/src/components/admin/c-admin-table.vue
+++ b/src/coalesce-vue-vuetify3/src/components/admin/c-admin-table.vue
@@ -15,7 +15,9 @@
         :editable="editable"
         :list="viewModel"
         :extra-headers="
-          canEdit || canDelete || hasInstanceMethods ? ['Actions'] : []
+          canEdit || canDelete || hasInstanceMethods
+            ? [{ header: 'Actions', isFixed: true }]
+            : []
         "
         :loaders="{
           '': list.$modelOnlyMode
@@ -29,7 +31,10 @@
         }"
       >
         <template #item-append="{ item }">
-          <td width="1%" class="c-admin-table--actions">
+          <td
+            width="1%"
+            class="c-admin-table--actions fixed-table-column-right"
+          >
             <div class="d-flex flex-nowrap text-no-wrap ga-1" no-gutters>
               <v-btn
                 v-if="editable && !effectiveAutoSave"
diff --git a/src/coalesce-vue-vuetify3/src/components/display/c-table.vue b/src/coalesce-vue-vuetify3/src/components/display/c-table.vue
index 67c3be803..e0d9799e0 100644
--- a/src/coalesce-vue-vuetify3/src/components/display/c-table.vue
+++ b/src/coalesce-vue-vuetify3/src/components/display/c-table.vue
@@ -11,6 +11,7 @@
               :key="'header-' + header.value"
               class="text-left"
               :class="{
+                ['fixed-table-column-right']: header.isFixed,
                 sortable: header.sortable,
                 ['prop-' + header.prop]: !!header.prop,
                 ['th-' + header.value]: !header.prop,
@@ -92,7 +93,10 @@ export default defineComponent({
     props: { required: false, type: Array as PropType<Array<string>> },
     admin: { required: false, type: Boolean },
     editable: { required: false, type: Boolean },
-    extraHeaders: { required: false, type: Array as PropType<Array<string>> },
+    extraHeaders: {
+      required: false,
+      type: Array as PropType<Array<{ header: string; isFixed: boolean }>>,
+    },
     loaders: { required: false, type: Object },
   },
 
@@ -121,12 +125,14 @@ export default defineComponent({
           sortable: o.type != "collection",
           align: "left",
           prop: o.name,
+          isFixed: false,
         })),
         ...(this.extraHeaders || []).map((h) => ({
-          text: h,
-          value: h,
+          text: h.header,
+          value: h.header,
           sortable: false,
           prop: undefined,
+          isFixed: h.isFixed,
         })),
       ];
     },
diff --git a/src/coalesce-vue-vuetify3/src/shared.scss b/src/coalesce-vue-vuetify3/src/shared.scss
index d77ef9e71..04c7d87be 100644
--- a/src/coalesce-vue-vuetify3/src/shared.scss
+++ b/src/coalesce-vue-vuetify3/src/shared.scss
@@ -71,3 +71,10 @@
     max-height: calc(100% - 9px);
   }
 }
+
+.fixed-table-column-right {
+  position: sticky;
+  right: 0;
+  background: rgb(var(--v-theme-surface-light));
+  box-shadow: -2px 2px 4px 0px rgba(0, 0, 0, 0.4);
+}

From 696f1b4cfb9959c1f5ee6952df4be66966031d26 Mon Sep 17 00:00:00 2001
From: Meghan <Meg.Woodford@IntelliTect.com>
Date: Sat, 17 Aug 2024 08:40:53 -0700
Subject: [PATCH 02/10] Resize Observer

---
 .../src/components/admin/c-admin-table.vue    | 16 ++++--
 .../src/components/display/c-table.vue        | 53 +++++++++++++++++--
 src/coalesce-vue-vuetify3/src/shared.scss     |  7 ---
 3 files changed, 62 insertions(+), 14 deletions(-)

diff --git a/src/coalesce-vue-vuetify3/src/components/admin/c-admin-table.vue b/src/coalesce-vue-vuetify3/src/components/admin/c-admin-table.vue
index 038d899e9..6f7fdf6bb 100644
--- a/src/coalesce-vue-vuetify3/src/components/admin/c-admin-table.vue
+++ b/src/coalesce-vue-vuetify3/src/components/admin/c-admin-table.vue
@@ -30,10 +30,11 @@
               ],
         }"
       >
-        <template #item-append="{ item }">
+        <template #item-append="{ item, isHorizontalScrollbarVisible }">
           <td
             width="1%"
-            class="c-admin-table--actions fixed-table-column-right"
+            :class="{ ['fixed-column-right']: isHorizontalScrollbarVisible }"
+            class="c-admin-table--actions"
           >
             <div class="d-flex flex-nowrap text-no-wrap ga-1" no-gutters>
               <v-btn
@@ -107,9 +108,18 @@ import {
   bindToQueryString,
 } from "coalesce-vue";
 
-import { computed, defineComponent, PropType, ref, toRef } from "vue";
+import {
+  computed,
+  defineComponent,
+  onBeforeUnmount,
+  PropType,
+  ref,
+  toRef,
+  onMounted,
+} from "vue";
 import { useRouter } from "vue-router";
 import { useAdminTable } from "./useAdminTable";
+import CTable from "@/display/c-table.vue";
 
 export default defineComponent({
   name: "c-admin-table",
diff --git a/src/coalesce-vue-vuetify3/src/components/display/c-table.vue b/src/coalesce-vue-vuetify3/src/components/display/c-table.vue
index e0d9799e0..39de02e38 100644
--- a/src/coalesce-vue-vuetify3/src/components/display/c-table.vue
+++ b/src/coalesce-vue-vuetify3/src/components/display/c-table.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="c-table" :class="{ 'c-table--editable': editable }">
+  <div ref="cTable" class="c-table" :class="{ 'c-table--editable': editable }">
     <c-loader-status
       :loaders="{ 'no-initial-content': [list.$load], ...loaders }"
     >
@@ -11,7 +11,7 @@
               :key="'header-' + header.value"
               class="text-left"
               :class="{
-                ['fixed-table-column-right']: header.isFixed,
+                ['fixed-column-right']: header.isFixed && isHorizontalScrollbarVisible,
                 sortable: header.sortable,
                 ['prop-' + header.prop]: !!header.prop,
                 ['th-' + header.value]: !header.prop,
@@ -65,7 +65,7 @@
               <c-admin-display v-else-if="admin" :model="item" :for="prop" />
               <c-display v-else :model="item" :for="prop" />
             </td>
-            <slot name="item-append" :item="item" />
+            <slot name="item-append" :item="item" :isHorizontalScrollbarVisible="isHorizontalScrollbarVisible" />
           </tr>
         </tbody>
       </v-table>
@@ -74,7 +74,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, onBeforeMount, onMounted, PropType, ref, nextTick } from "vue";
 import {
   ListViewModel,
   Property,
@@ -100,6 +100,44 @@ export default defineComponent({
     loaders: { required: false, type: Object },
   },
 
+  setup() {
+    const cTable = ref<HTMLDivElement | null>(null);
+    const isHorizontalScrollbarVisible = ref(false);
+
+    const checkHorizontalScrollbar = () => {
+      const divElement = cTable.value;
+      const tableElement = cTable.value?.querySelector("table");
+      if (tableElement && divElement) {
+        isHorizontalScrollbarVisible.value =
+        divElement.clientWidth < tableElement.clientWidth;
+      }
+    };
+
+    const resizeObserver = new ResizeObserver(() => {
+      checkHorizontalScrollbar();
+      console.log("Resize? ", isHorizontalScrollbarVisible.value);
+    });
+
+    onMounted(async () => {
+      await nextTick();
+      if(cTable.value){
+        resizeObserver.observe(cTable.value);
+      }
+      checkHorizontalScrollbar();
+    });
+
+    onBeforeMount(() => {
+      if (cTable.value) {
+        resizeObserver.unobserve(cTable.value);
+      }
+    });
+
+    return {
+      cTable,
+      isHorizontalScrollbarVisible,
+    };
+  },
+
   computed: {
     metadata(): ModelType {
       return this.list.$metadata;
@@ -213,5 +251,12 @@ export default defineComponent({
       font-size: 16px;
     }
   }
+  
+  .fixed-column-right {
+    position: sticky;
+    right: 0;
+    background: rgb(var(--v-theme-surface-light));
+    box-shadow: -2px 2px 4px 0px rgba(0, 0, 0, 0.4);
+  }
 }
 </style>
diff --git a/src/coalesce-vue-vuetify3/src/shared.scss b/src/coalesce-vue-vuetify3/src/shared.scss
index 04c7d87be..d77ef9e71 100644
--- a/src/coalesce-vue-vuetify3/src/shared.scss
+++ b/src/coalesce-vue-vuetify3/src/shared.scss
@@ -71,10 +71,3 @@
     max-height: calc(100% - 9px);
   }
 }
-
-.fixed-table-column-right {
-  position: sticky;
-  right: 0;
-  background: rgb(var(--v-theme-surface-light));
-  box-shadow: -2px 2px 4px 0px rgba(0, 0, 0, 0.4);
-}

From fee49b067f1a66f4b01f705bdaba1f56a0a8d61b Mon Sep 17 00:00:00 2001
From: Meghan <Meg.Woodford@IntelliTect.com>
Date: Sat, 17 Aug 2024 13:32:11 -0700
Subject: [PATCH 03/10] Continue to support string arrays for extra headers

---
 .../src/components/display/c-table.vue        | 55 ++++++++++++++-----
 1 file changed, 40 insertions(+), 15 deletions(-)

diff --git a/src/coalesce-vue-vuetify3/src/components/display/c-table.vue b/src/coalesce-vue-vuetify3/src/components/display/c-table.vue
index 39de02e38..7deb32acb 100644
--- a/src/coalesce-vue-vuetify3/src/components/display/c-table.vue
+++ b/src/coalesce-vue-vuetify3/src/components/display/c-table.vue
@@ -11,7 +11,8 @@
               :key="'header-' + header.value"
               class="text-left"
               :class="{
-                ['fixed-column-right']: header.isFixed && isHorizontalScrollbarVisible,
+                ['fixed-column-right']:
+                  header.isFixed && isHorizontalScrollbarVisible,
                 sortable: header.sortable,
                 ['prop-' + header.prop]: !!header.prop,
                 ['th-' + header.value]: !header.prop,
@@ -65,7 +66,11 @@
               <c-admin-display v-else-if="admin" :model="item" :for="prop" />
               <c-display v-else :model="item" :for="prop" />
             </td>
-            <slot name="item-append" :item="item" :isHorizontalScrollbarVisible="isHorizontalScrollbarVisible" />
+            <slot
+              name="item-append"
+              :item="item"
+              :isHorizontalScrollbarVisible="isHorizontalScrollbarVisible"
+            />
           </tr>
         </tbody>
       </v-table>
@@ -74,7 +79,14 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onBeforeMount, onMounted, PropType, ref, nextTick } from "vue";
+import {
+  defineComponent,
+  onBeforeMount,
+  onMounted,
+  PropType,
+  ref,
+  nextTick,
+} from "vue";
 import {
   ListViewModel,
   Property,
@@ -95,7 +107,9 @@ export default defineComponent({
     editable: { required: false, type: Boolean },
     extraHeaders: {
       required: false,
-      type: Array as PropType<Array<{ header: string; isFixed: boolean }>>,
+      type: Array as
+        | PropType<Array<{ header: string; isFixed: boolean }>>
+        | PropType<Array<string>>,
     },
     loaders: { required: false, type: Object },
   },
@@ -109,18 +123,17 @@ export default defineComponent({
       const tableElement = cTable.value?.querySelector("table");
       if (tableElement && divElement) {
         isHorizontalScrollbarVisible.value =
-        divElement.clientWidth < tableElement.clientWidth;
+          divElement.clientWidth < tableElement.clientWidth;
       }
     };
 
     const resizeObserver = new ResizeObserver(() => {
       checkHorizontalScrollbar();
-      console.log("Resize? ", isHorizontalScrollbarVisible.value);
     });
 
     onMounted(async () => {
       await nextTick();
-      if(cTable.value){
+      if (cTable.value) {
         resizeObserver.observe(cTable.value);
       }
       checkHorizontalScrollbar();
@@ -165,13 +178,25 @@ export default defineComponent({
           prop: o.name,
           isFixed: false,
         })),
-        ...(this.extraHeaders || []).map((h) => ({
-          text: h.header,
-          value: h.header,
-          sortable: false,
-          prop: undefined,
-          isFixed: h.isFixed,
-        })),
+        ...(this.extraHeaders || []).map((h) => {
+          if (typeof h === "string") {
+            return {
+              text: h,
+              value: h,
+              sortable: false,
+              prop: undefined,
+              isFixed: false,
+            };
+          } else {
+            return {
+              text: h.header,
+              value: h.header,
+              sortable: false,
+              prop: undefined,
+              isFixed: h.isFixed,
+            };
+          }
+        }),
       ];
     },
   },
@@ -251,7 +276,7 @@ export default defineComponent({
       font-size: 16px;
     }
   }
-  
+
   .fixed-column-right {
     position: sticky;
     right: 0;

From 77d3fe494c27501693223017bb8a374ac9ec2a3b Mon Sep 17 00:00:00 2001
From: Meghan <Meg.Woodford@IntelliTect.com>
Date: Sat, 17 Aug 2024 13:36:52 -0700
Subject: [PATCH 04/10] Remove unused code

---
 .../src/components/admin/c-admin-table.vue            | 11 +----------
 .../src/components/display/c-table.vue                |  5 ++---
 2 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/src/coalesce-vue-vuetify3/src/components/admin/c-admin-table.vue b/src/coalesce-vue-vuetify3/src/components/admin/c-admin-table.vue
index 6f7fdf6bb..8a33f5a9d 100644
--- a/src/coalesce-vue-vuetify3/src/components/admin/c-admin-table.vue
+++ b/src/coalesce-vue-vuetify3/src/components/admin/c-admin-table.vue
@@ -108,18 +108,9 @@ import {
   bindToQueryString,
 } from "coalesce-vue";
 
-import {
-  computed,
-  defineComponent,
-  onBeforeUnmount,
-  PropType,
-  ref,
-  toRef,
-  onMounted,
-} from "vue";
+import { computed, defineComponent, PropType, ref, toRef } from "vue";
 import { useRouter } from "vue-router";
 import { useAdminTable } from "./useAdminTable";
-import CTable from "@/display/c-table.vue";
 
 export default defineComponent({
   name: "c-admin-table",
diff --git a/src/coalesce-vue-vuetify3/src/components/display/c-table.vue b/src/coalesce-vue-vuetify3/src/components/display/c-table.vue
index 7deb32acb..ce419c479 100644
--- a/src/coalesce-vue-vuetify3/src/components/display/c-table.vue
+++ b/src/coalesce-vue-vuetify3/src/components/display/c-table.vue
@@ -83,9 +83,9 @@ import {
   defineComponent,
   onBeforeMount,
   onMounted,
+  onUnmounted,
   PropType,
   ref,
-  nextTick,
 } from "vue";
 import {
   ListViewModel,
@@ -132,14 +132,13 @@ export default defineComponent({
     });
 
     onMounted(async () => {
-      await nextTick();
       if (cTable.value) {
         resizeObserver.observe(cTable.value);
       }
       checkHorizontalScrollbar();
     });
 
-    onBeforeMount(() => {
+    onUnmounted(() => {
       if (cTable.value) {
         resizeObserver.unobserve(cTable.value);
       }

From e3d7d18180fd7f067a76917a5250610972d557c5 Mon Sep 17 00:00:00 2001
From: Meghan <43832670+meghanmae@users.noreply.github.com>
Date: Thu, 29 Aug 2024 06:56:28 -0700
Subject: [PATCH 05/10] Update
 src/coalesce-vue-vuetify3/src/components/display/c-table.vue

Co-authored-by: Andrew Scott <andrew.scott@intellitect.com>
---
 src/coalesce-vue-vuetify3/src/components/display/c-table.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/coalesce-vue-vuetify3/src/components/display/c-table.vue b/src/coalesce-vue-vuetify3/src/components/display/c-table.vue
index ce419c479..75133f5ce 100644
--- a/src/coalesce-vue-vuetify3/src/components/display/c-table.vue
+++ b/src/coalesce-vue-vuetify3/src/components/display/c-table.vue
@@ -120,7 +120,7 @@ export default defineComponent({
 
     const checkHorizontalScrollbar = () => {
       const divElement = cTable.value;
-      const tableElement = cTable.value?.querySelector("table");
+      const tableElement = divElement?.querySelector("table");
       if (tableElement && divElement) {
         isHorizontalScrollbarVisible.value =
           divElement.clientWidth < tableElement.clientWidth;

From 0a1f877e8f121c930608acd9b24bdf676e4e9e7b Mon Sep 17 00:00:00 2001
From: Meghan <43832670+meghanmae@users.noreply.github.com>
Date: Thu, 29 Aug 2024 06:56:42 -0700
Subject: [PATCH 06/10] Update
 src/coalesce-vue-vuetify3/src/components/display/c-table.vue

Co-authored-by: Andrew Scott <andrew.scott@intellitect.com>
---
 src/coalesce-vue-vuetify3/src/components/display/c-table.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/coalesce-vue-vuetify3/src/components/display/c-table.vue b/src/coalesce-vue-vuetify3/src/components/display/c-table.vue
index 75133f5ce..574f116e2 100644
--- a/src/coalesce-vue-vuetify3/src/components/display/c-table.vue
+++ b/src/coalesce-vue-vuetify3/src/components/display/c-table.vue
@@ -81,7 +81,6 @@
 <script lang="ts">
 import {
   defineComponent,
-  onBeforeMount,
   onMounted,
   onUnmounted,
   PropType,

From 72977a2ce2007ede5bc8ea2380c9cee25c2efcb0 Mon Sep 17 00:00:00 2001
From: Meghan <43832670+meghanmae@users.noreply.github.com>
Date: Thu, 29 Aug 2024 06:56:51 -0700
Subject: [PATCH 07/10] Update
 src/coalesce-vue-vuetify3/src/components/display/c-table.vue

Co-authored-by: Andrew Scott <andrew.scott@intellitect.com>
---
 src/coalesce-vue-vuetify3/src/components/display/c-table.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/coalesce-vue-vuetify3/src/components/display/c-table.vue b/src/coalesce-vue-vuetify3/src/components/display/c-table.vue
index 574f116e2..e2f57db0d 100644
--- a/src/coalesce-vue-vuetify3/src/components/display/c-table.vue
+++ b/src/coalesce-vue-vuetify3/src/components/display/c-table.vue
@@ -138,9 +138,7 @@ export default defineComponent({
     });
 
     onUnmounted(() => {
-      if (cTable.value) {
-        resizeObserver.unobserve(cTable.value);
-      }
+      resizeObserver.disconnect();
     });
 
     return {

From 6f5d42eca7aa3cbc5ba90bbe4b60f5623d80eda9 Mon Sep 17 00:00:00 2001
From: Meghan <43832670+meghanmae@users.noreply.github.com>
Date: Thu, 29 Aug 2024 06:56:58 -0700
Subject: [PATCH 08/10] Update
 src/coalesce-vue-vuetify3/src/components/display/c-table.vue

Co-authored-by: Andrew Scott <andrew.scott@intellitect.com>
---
 src/coalesce-vue-vuetify3/src/components/display/c-table.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/coalesce-vue-vuetify3/src/components/display/c-table.vue b/src/coalesce-vue-vuetify3/src/components/display/c-table.vue
index e2f57db0d..7e42f4828 100644
--- a/src/coalesce-vue-vuetify3/src/components/display/c-table.vue
+++ b/src/coalesce-vue-vuetify3/src/components/display/c-table.vue
@@ -130,7 +130,7 @@ export default defineComponent({
       checkHorizontalScrollbar();
     });
 
-    onMounted(async () => {
+    onMounted(() => {
       if (cTable.value) {
         resizeObserver.observe(cTable.value);
       }

From c8b02c6ddd881a8719bcd39800498df9090a62ff Mon Sep 17 00:00:00 2001
From: Meghan <43832670+meghanmae@users.noreply.github.com>
Date: Thu, 29 Aug 2024 06:57:04 -0700
Subject: [PATCH 09/10] Update
 src/coalesce-vue-vuetify3/src/components/display/c-table.vue

Co-authored-by: Andrew Scott <andrew.scott@intellitect.com>
---
 src/coalesce-vue-vuetify3/src/components/display/c-table.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/coalesce-vue-vuetify3/src/components/display/c-table.vue b/src/coalesce-vue-vuetify3/src/components/display/c-table.vue
index 7e42f4828..ea7034251 100644
--- a/src/coalesce-vue-vuetify3/src/components/display/c-table.vue
+++ b/src/coalesce-vue-vuetify3/src/components/display/c-table.vue
@@ -114,7 +114,7 @@ export default defineComponent({
   },
 
   setup() {
-    const cTable = ref<HTMLDivElement | null>(null);
+    const cTable = ref<HTMLDivElement>();
     const isHorizontalScrollbarVisible = ref(false);
 
     const checkHorizontalScrollbar = () => {

From 8e488c792587552b2136ed560918b181049f8f90 Mon Sep 17 00:00:00 2001
From: Meg <Meg.Gravatt@IntelliTect.com>
Date: Fri, 30 Aug 2024 13:16:17 -0700
Subject: [PATCH 10/10] Update  docs

---
 docs/stacks/vue/coalesce-vue-vuetify/components/c-table.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/stacks/vue/coalesce-vue-vuetify/components/c-table.md b/docs/stacks/vue/coalesce-vue-vuetify/components/c-table.md
index e00fbbce3..386180d32 100644
--- a/docs/stacks/vue/coalesce-vue-vuetify/components/c-table.md
+++ b/docs/stacks/vue/coalesce-vue-vuetify/components/c-table.md
@@ -49,9 +49,9 @@ If provided, specifies which properties, and their ordering, should be given a c
     
 If not provided, all non-key columns that aren't annotated with [[Hidden(HiddenAttribute.Areas.List)]](/modeling/model-components/attributes/hidden.md) are given a column.
 
-<Prop def="extraHeaders?: string[]" lang="ts" />
+<Prop def="extraHeaders?: string[] | {header: string; isFixed: boolean }[]" lang="ts" />
 
-The text contents of one or more extra ``th`` elements to render in the table. Should be used in conjunction with the ``item.append`` slot.
+The text contents of one or more extra ``th`` elements to render in the table. Each header can be defined as either fixed (sticky) or scrollable. Should be used in conjunction with the ``item.append`` slot.
 
 <Prop def="editable: boolean = false" lang="ts" />