Reactive pagination table

stanzas/pagination-table/SliderPagination.vue

@@ -123,6 +123,9 @@ export default defineComponent({
     const paginationNumList = ref(null);
     function drawKnobArrow() {
       setTimeout(() => {
+        if (!canvas.value) {
+          return;
+        }
         const totalPages = props.totalPages;
         if (totalPages <= 5) {
           return;

stanzas/pagination-table/app.vue

@@ -48,7 +48,10 @@
               >
                 {{ column.label }}
                 <font-awesome-icon
-                  v-if="state.sorting.column === column"
+                  v-if="
+                    state.sorting.column &&
+                    state.sorting.column.id === column.id
+                  "
                   :key="`sort-${
                     state.sorting.direction === 'asc' ? 'up' : 'down'
                   }`"
@@ -262,8 +265,9 @@ import {
   ref,
   computed,
   watch,
-  onMounted,
   onRenderTriggered,
+  toRefs,
+  watchEffect,
 } from "vue";
 
 import SliderPagination from "./SliderPagination.vue";
@@ -302,8 +306,11 @@ export default defineComponent({
   props: metadata["stanza:parameter"].map((p) => p["stanza:key"]),
 
   setup(params) {
+    const { pageSlider, pageSizeOption: pageSizeOptionStr } = toRefs(params);
     const sliderPagination = ref();
-    const pageSizeOption = params.pageSizeOption.split(",").map(Number);
+    const pageSizeOption = computed(() =>
+      pageSizeOptionStr.value.split(",").map(Number)
+    );
 
     const state = reactive({
       responseJSON: null, // for download. may consume extra memory
@@ -319,8 +326,8 @@ export default defineComponent({
 
       pagination: {
         currentPage: 1,
-        perPage: pageSizeOption[0],
-        isSliderOn: params.pageSlider,
+        perPage: pageSizeOption.value[0],
+        isSliderOn: pageSlider,
       },
 
       isMenuOn: false,
@@ -352,7 +359,7 @@ export default defineComponent({
         filtered = orderBy(
           filtered,
           (cells) => {
-            const cell = cells.find((cell) => cell.column === sortColumn);
+            const cell = cells.find((cell) => cell.column.id === sortColumn.id);
             return cell.value;
           },
           [state.sorting.direction]
@@ -510,35 +517,46 @@ export default defineComponent({
       state.pagination.currentPage = currentPage;
     }
 
-    async function fetchData() {
-      const data = await loadData(params.dataUrl, params.dataType);
+    watchEffect(
+      async () => {
+        state.responseJSON = null;
+        state.responseJSON = await loadData(params.dataUrl, params.dataType);
+      },
+      { immediate: true }
+    );
 
-      state.responseJSON = data;
-      let columns;
-      if (params.columns) {
-        columns = JSON.parse(params.columns).map((column, index) => {
-          column.fixed = index < params.fixedColumns;
-          return column;
-        });
-      } else if (data.length > 0) {
-        const firstRow = data[0];
-        columns = Object.keys(firstRow).map((key, index) => {
-          return {
-            id: key,
-            label: key,
-            fixed: index < params.fixedColumns,
-          };
+    watchEffect(
+      () => {
+        const data = state.responseJSON || [];
+        let columns;
+        if (params.columns) {
+          columns = JSON.parse(params.columns).map((column, index) => {
+            column.fixed = index < params.fixedColumns;
+            return column;
+          });
+        } else if (data.length > 0) {
+          const firstRow = data[0];
+          columns = Object.keys(firstRow).map((key, index) => {
+            return {
+              id: key,
+              label: key,
+              fixed: index < params.fixedColumns,
+            };
+          });
+        } else {
+          columns = [];
+        }
+        state.columns = columns.map((column) => {
+          const values = data.map((obj) => obj[column.id]);
+          return createColumnState(column, values);
         });
-      } else {
-        columns = [];
-      }
-
-      state.columns = columns.map((column) => {
-        const values = data.map((obj) => obj[column.id]);
-        return createColumnState(column, values);
-      });
+      },
+      { immediate: true }
+    );
 
-      state.allRows = data.map((row) => {
+    state.allRows = computed(() => {
+      const data = state.responseJSON || [];
+      return data.map((row) => {
         return state.columns.map((column) => {
           return {
             column,
@@ -547,9 +565,7 @@ export default defineComponent({
           };
         });
       });
-    }
-
-    onMounted(fetchData);
+    });
 
     const thead = ref(null);
     onRenderTriggered(() => {
@@ -559,8 +575,10 @@ export default defineComponent({
       }, 0);
     });
 
+    const width = computed(() => (params.width ? params.width + "px" : "100%"));
+
     return {
-      width: params.width ? params.width + "px" : "100%",
+      width,
       sliderPagination,
       pageSizeOption,
       state,

stanzas/pagination-table/index.js

@@ -1,7 +1,6 @@
 import Stanza from "togostanza/stanza";
-import { createApp } from "vue";
+import { createApp, h } from "vue";
 import App from "./app.vue";
-
 import { appendCustomCss } from "togostanza-utils";
 
 export default class PaginationTable extends Stanza {
@@ -11,10 +10,28 @@ export default class PaginationTable extends Stanza {
     const main = this.root.querySelector("main");
     main.parentNode.style.backgroundColor =
       "var(--togostanza-background-color)";
+    this._setMainPadding();
+
+    const self = this;
+    this._app = createApp({
+      render() {
+        return h(App, self.params);
+      },
+    });
+    this._component = this._app.mount(main);
+  }
+
+  _setMainPadding() {
+    const main = this.root.querySelector("main");
     main.parentNode.style.padding = this.params["padding"];
+  }
+
+  handleAttributeChange(name) {
+    appendCustomCss(this, this.params["custom-css-url"]);
 
-    this._app?.unmount();
-    this._app = createApp(App, this.params);
-    this._app.mount(main);
+    if (name === "padding") {
+      this._setMainPadding();
+    }
+    this._component?.$forceUpdate();
   }
 }