Update on sort

src/plugins/telemetryTable/components/table-row.vue

@@ -34,12 +34,13 @@
 
 <script>
 export default {
+    inject: ['table'],
     data: function () {
+        let row = this.table.filteredRows.rows[this.rowOffset + this.rowIndex];
         return {
-            rowTop: (this.rowOffset + this.rowIndex) * this.rowHeight + 'px',
+            formattedRow: row.getFormattedDatum(this.headers),
-            formattedRow: this.row.getFormattedDatum(this.headers),
+            rowLimitClass: row.getRowLimitClass(),
-            rowLimitClass: this.row.getRowLimitClass(),
+            cellLimitClasses: row.getCellLimitClasses()
-            cellLimitClasses: this.row.getCellLimitClasses()
         }
     },
     props: {
@@ -47,10 +48,6 @@ export default {
             type: Object,
             required: true
         },
-        row: {
-            type: Object,
-            required: true
-        },
         columnWidths: {
             type: Object,
             required: true
@@ -58,7 +55,7 @@ export default {
         rowIndex: {
             type: Number,
             required: false,
-            default: undefined
+            default: 0
         },
         rowOffset: {
             type: Number,
@@ -71,11 +68,20 @@ export default {
             default: 0
         }
     },
-    methods: {
+    mounted() {
-        calculateRowTop: function (rowOffset) {
+        this.table.filteredRows.on('sort', this.renderRowContent);
-            this.rowTop = (rowOffset + this.rowIndex) * this.rowHeight + 'px';
     },
-        formatRow: function (row) {
+    destroy() {
+        this.table.filteredRows.off('sort', this.renderRowContent);
+    },
+    computed: {
+        rowTop() {
+            return (this.rowOffset + this.rowIndex) * this.rowHeight + 'px';
+        }
+    },
+    methods: {
+        renderRowContent: function () {
+            let row = this.table.filteredRows.rows[this.rowOffset + this.rowIndex];
             this.formattedRow = row.getFormattedDatum(this.headers);
             this.rowLimitClass = row.getRowLimitClass();
             this.cellLimitClasses = row.getCellLimitClasses();
@@ -83,11 +89,7 @@ export default {
     },
     // TODO: use computed properties
     watch: {
-        rowOffset: 'calculateRowTop',
+        rowOffset: 'renderRowContent'
-        row: {
-            handler: 'formatRow',
-            deep: false
-        }
     }
 }
 </script>

src/plugins/telemetryTable/components/table.vue

@@ -80,13 +80,13 @@
         <table class="c-table__body c-telemetry-table__body"
                :style="{ height: totalHeight + 'px'}">
             <tbody>
-                <telemetry-table-row v-for="(row, rowIndex) in visibleRows"
+                <telemetry-table-row v-for="rowIndex in (rowEnd - rowOffset)"
                     :headers="headers"
                     :columnWidths="columnWidths"
-                    :rowIndex="rowIndex"
+                    :rowIndex="rowIndex - 1"
                     :rowOffset="rowOffset"
                     :rowHeight="rowHeight"
-                    :row="row">
+                    :rowEnd="rowEnd">
                 </telemetry-table-row>
             </tbody>
         </table>
@@ -295,7 +295,8 @@ export default {
             dropOffsetLeft: undefined,
             isDropTargetActive: false,
             isAutosizeEnabled: configuration.autosize,
-            scrollW: 0
+            scrollW: 0,
+            rowEnd: 0
         }
     },
     computed: {
@@ -359,7 +360,7 @@ export default {
                 }
             }
             this.rowOffset = start;
-            this.visibleRows = filteredRows.slice(start, end);
+            this.rowEnd = end;
         },
         calculateFirstVisibleRow() {
             return Math.floor(this.scrollable.scrollTop / this.rowHeight);
@@ -451,10 +452,10 @@ export default {
             } else {
                 sizingRow = rows;
             }
-            if (!this.sizingRows[sizingRow.objectKeyString]) {
+            /*if (!this.sizingRows[sizingRow.objectKeyString]) {
                 this.sizingRows[sizingRow.objectKeyString] = sizingRow;
                 this.$nextTick().then(this.calculateColumnWidths);
-            }
+            }*/
 
             if (!this.updatingView) {
                 this.updatingView = true;