Add "max rows" value that enables client-side pagination of table data

FlowFuse · Sep 6, 2023 · 1f500e0 · 1f500e0
1 parent bba90cf
commit 1f500e0
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 22 deletions.
diff --git a/docs/assets/images/node-examples/ui-table-pagination.png b/docs/assets/images/node-examples/ui-table-pagination.png
diff --git a/docs/nodes/widgets/ui-table.md b/docs/nodes/widgets/ui-table.md
@@ -3,6 +3,7 @@ props:
     Group: Defines which group of the UI Dashboard this widget will render in.
     Size: Controls the width of the button with respect to the parent group. Maximum value is the width of the group.
     Label: The text shown within the button.
+    Max Rows: Defines the maximum number of data-rows to render in the table. Excess rows will be available through pagination control.
     Auto Columns: If checked, then the columns are calculated automatically based on the contents of received messages.
     Columns: If "Auto Columns" is false, then these columns are used when rendering the table instead.
 ---
@@ -32,7 +33,10 @@ The table will be rendered with colums `colA`, `colB` and `colC`, unless "Column
 
 <PropsTable/>
 
-## Example
+## Examples
 
 ![Example of a Data Table](../../assets/images/node-examples/ui-table.png "Example of a Data Table"){data-zoomable}
 *Example of a rendered data table in a Dashboard.*
+
+![Example of a Paginated Table](../../assets/images/node-examples/ui-table-pagination.png "Example of a Paginated Table"){data-zoomable}
+*Example of a paginated table which has 10 rows of data, but with "Max Rows" set to 5.*
diff --git a/nodes/widgets/ui_table.html b/nodes/widgets/ui_table.html
@@ -20,6 +20,7 @@
                     }
                 },
                 height: { value: 0 },
+                maxrows: { value: 0, validate: RED.validators.number() },
                 autocols: { value: true },
                 columns: {
                     // value: [{ key: '', label: '' }]
@@ -126,6 +127,10 @@
         <input type="hidden" id="node-input-height">
         <button class="editor-button" id="node-input-size"></button>
     </div>
+    <div class="form-row">
+        <label for="node-input-maxrows"><i class="fa fa-tag"></i> Max Rows</label>
+        <input type="number" id="node-input-maxrows">
+    </div>
     <div class="form-row" style="display:flex;">
         <label for="node-input-width" style="vertical-align:top"><i class="fa fa-list-alt"></i> Columns</label>
         <div class="form-row node-input-column-container-row" style="margin-bottom: 0px; width:calc(70% + 15px);">

diff --git a/ui/src/widgets/ui-table/UITable.vue b/ui/src/widgets/ui-table/UITable.vue
@@ -1,22 +1,30 @@
 <template>
-    <v-table class="nrdb-table">
-        <thead>
-            <tr>
-                <th v-for="(col, $index) in columns" :key="$index" class="text-left">{{ col.label }}</th>
-            </tr>
-        </thead>
-        <tbody v-if="rows">
-            <tr
-                v-for="(row, $index) in rows"
-                :key="$index"
-            >
-                <td v-for="(col, $jndex) in columns" :key="$jndex">{{ row[col.key] }}</td>
-            </tr>
-        </tbody>
-        <tbody v-else class="nrdb-table-nodata">
-            <tr><td :colspan="columns.length">No Data</td></tr>
-        </tbody>
-    </v-table>
+    <div>
+        <v-table class="nrdb-table">
+            <thead>
+                <tr>
+                    <th v-for="(col, $index) in columns" :key="$index" class="text-left">{{ col.label }}</th>
+                </tr>
+            </thead>
+            <tbody v-if="rows">
+                <tr
+                    v-for="(row, $index) in pagination.rows"
+                    :key="$index"
+                >
+                    <td v-for="(col, $jndex) in columns" :key="$jndex">{{ row[col.key] }}</td>
+                </tr>
+            </tbody>
+            <tbody v-else class="nrdb-table-nodata">
+                <tr><td :colspan="columns.length">No Data</td></tr>
+            </tbody>
+        </v-table>
+        <v-pagination
+            v-if="rows && props.maxrows > 0"
+            v-model="pagination.page"
+            :length="pagination.pages"
+            rounded="0"
+        />
+    </div>
 </template>
 
 <script>
@@ -37,7 +45,12 @@ export default {
     data () {
         return {
             input: {},
-            isValid: null
+            isValid: null,
+            pagination: {
+                page: 1,
+                pages: 0,
+                rows: []
+            }
         }
     },
     computed: {
@@ -72,18 +85,50 @@ export default {
             }
         },
         rows () {
+            // store full set of data rows
             if (this.messages[this.id]?.payload) {
                 return this.messages[this.id].payload
             } else {
                 return undefined
             }
         }
     },
+    watch: {
+        rows: {
+            handler () {
+                this.calculatePaginatedRows()
+            }
+        },
+        'pagination.page': {
+            handler () {
+                this.calculatePaginatedRows()
+            }
+        },
+        'props.maxrows': {
+            handler () {
+                this.calculatePaginatedRows()
+            }
+        }
+    },
     mounted () {
-
+        this.calculatePaginatedRows()
     },
     methods: {
-
+        calculatePaginatedRows () {
+            console.log('calculatePaginatedRows', this.pagination.page, this.props.maxrows)
+            if (this.props.maxrows > 0) {
+                this.pagination.pages = Math.ceil(this.rows?.length / this.props.maxrows)
+                this.pagination.rows = this.rows?.slice(
+                    (this.pagination.page - 1) * this.props.maxrows,
+                    (this.pagination.page) * this.props.maxrows
+                )
+                console.log('updated', this.pagination.pages, this.pagination.rows)
+            } else {
+                this.pagination.page = 1
+                this.pagination.pages = 0
+                this.pagination.rows = this.rows
+            }
+        }
     }
 }
 </script>