Fix table column titles get cut-off when switching to model metadata editor (#20249)

* Remeasure table column when header changes

* Fix virtual measuring columns left in the DOM

* Fix table viz unit test

frontend/src/metabase/visualizations/components/TableInteractive.jsx

@@ -156,8 +156,11 @@ export default class TableInteractive extends Component {
     );
   }
 
-  componentDidUpdate() {
-    if (!this.state.contentWidths) {
+  componentDidUpdate(prevProps) {
+    if (
+      !this.state.contentWidths ||
+      prevProps.renderTableHeaderWrapper !== this.props.renderTableHeaderWrapper
+    ) {
       this._measure();
     } else if (this.props.onContentWidthChange) {
       const total = this.state.columnWidths.reduce((sum, width) => sum + width);
@@ -235,7 +238,10 @@ export default class TableInteractive extends Component {
           }
         });
 
-        ReactDOM.unmountComponentAtNode(this._div);
+        // Doing this on next tick makes sure it actually gets removed on initial measure
+        setTimeout(() => {
+          ReactDOM.unmountComponentAtNode(this._div);
+        }, 0);
 
         delete this.columnNeedsResize;
 

frontend/test/metabase/visualizations/components/Visualization-table.unit.spec.js

@@ -19,6 +19,10 @@ const series = (rows, settings = {}) => {
 };
 
 describe("Table", () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
   it("should render correct background colors", () => {
     const rows = [[1], [2], [3], [4]];
     const settings = {
@@ -36,6 +40,7 @@ describe("Table", () => {
     const { getByText } = render(
       <Visualization rawSeries={series(rows, settings)} />,
     );
+    jest.runAllTimers();
     const bgColors = rows.map(
       ([v]) => getByText(String(v)).parentNode.style["background-color"],
     );