feat: UI table respond to non-primitive prop changes (#1046)

Fixes #982

Also fixes a bug I found while implementing this where adding a custom
column in the UI would cause formatting rule `if_` clauses to be
removed.

Author: mattrunyon

package-lock.json

@@ -62,6 +62,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@internationalized/date": "^3.5.5",
     "classnames": "^2.5.1",
+    "fast-deep-equal": "^3.1.3",
     "json-rpc-2.0": "^1.6.0",
     "nanoid": "^5.0.7",
     "react-markdown": "^8.0.7",

plugins/ui/src/js/package.json

@@ -15,6 +15,7 @@ interface JsTableProxy extends dh.Table {}
 
 /**
  * Class to proxy JsTable.
+ * The JsTable passed to the constructor may be modified, so it is recommended to pass a copy.
  * Any methods implemented in this class will be utilized over the underlying JsTable methods.
  * Any methods not implemented in this class will be proxied to the table.
  */
@@ -39,16 +40,24 @@ class JsTableProxy implements dh.Table {
     hiddenColumns: dh.Column[];
   };
 
+  private originalCustomColumns: dh.CustomColumn[];
+
+  private onClose: () => void;
+
   layoutHints: dh.LayoutHints | null = null;
 
   constructor({
     table,
     layoutHints,
+    onClose,
   }: {
     table: dh.Table;
     layoutHints: UITableLayoutHints;
+    onClose: () => void;
   }) {
     this.table = table;
+    this.originalCustomColumns = table.customColumns;
+    this.onClose = onClose;
 
     this.stableColumns = {
       allColumns: [],
@@ -145,6 +154,23 @@ class JsTableProxy implements dh.Table {
     }
   }
 
+  close(): void {
+    // Something causes close to get called twice which will throw some log spam if we try to close the table again
+    if (!this.table.isClosed) {
+      this.onClose();
+      this.table.close();
+    }
+  }
+
+  applyCustomColumns(
+    customColumns: Array<string | dh.CustomColumn>
+  ): Array<dh.CustomColumn> {
+    return this.table.applyCustomColumns([
+      ...this.originalCustomColumns,
+      ...customColumns,
+    ]);
+  }
+
   get columns(): dh.Column[] {
     this.updateDisplayedColumns();
     return this.stableColumns.visibleColumns;