Error: "Failed to execute 'removeChild' on 'Node'" after adding column to simple table chart about superset HOT 1 OPEN

Hey there, @MichaelF25! I'm a bot designed to help solve bugs, answer questions, and assist you while waiting for a human maintainer. Let's tackle this issue together!

To resolve the "Failed to execute 'removeChild' on 'Node'" error when adding certain columns to a table chart in Superset version 4.0.1, you need to ensure that the drag-and-drop and column resizing functionalities are correctly implemented and managed.

Here are the key points to address:

1. Ensure Proper Initialization and Cleanup:

   • Make sure that the event listeners for drag-and-drop and resizing are correctly initialized and removed when necessary. This prevents any lingering event listeners that might cause issues.

2. Handle Drag-and-Drop Correctly:

   • The handleColumnDragStart, handleDragDrop, and allowDrop methods manage the drag-and-drop functionality. Ensure these methods are correctly attached to the table header cells.

3. Manage Column Resizing:

   • The handleMouseDown, handleMouseMove, and handleMouseup methods manage column resizing. Ensure these methods are correctly handling the mouse events and updating the column widths.

Here is an example of how to properly initialize and manage these functionalities:

import InteractiveTableUtils from 'path/to/InteractiveTableUtils';

class MyTableComponent extends React.Component {
  tableRef = React.createRef<HTMLTableElement>();
  interactiveTableUtils: InteractiveTableUtils | null = null;

  componentDidMount() {
    if (this.tableRef.current) {
      this.interactiveTableUtils = new InteractiveTableUtils(
        this.tableRef.current,
        this.props.columns,
        this.setDerivedColumns,
      );
      this.interactiveTableUtils.initializeResizableColumns(true, this.tableRef.current);
      this.interactiveTableUtils.initializeDragDropColumns(true, this.tableRef.current);
    }
  }

  componentWillUnmount() {
    if (this.interactiveTableUtils) {
      this.interactiveTableUtils.clearListeners();
    }
  }

  setDerivedColumns = (columns: ColumnsType<any>) => {
    // Update the state or props with the new column definitions
    this.setState({ columns });
  };

  render() {
    return (
      <table ref={this.tableRef}>
        {/* Render table rows and cells */}
      </table>
    );
  }
}

Ensure that the InteractiveTableUtils class is correctly managing the drag-and-drop and resizing functionalities. This should help resolve the "Failed to execute 'removeChild' on 'Node'" error ^[1][2].

Additionally, there are recent changes in Superset version 4.0.1 that might affect the handling of table charts or DOM manipulation. Specifically, fixes related to drag-and-drop functionality and DOM elements could impact the handling of table charts ^[3].

Lastly, the NumericCell component in Superset's DataTable has an error handling mechanism that addresses issues with rendering numeric values, including decimal(7) columns. It uses a try-catch block to catch any errors during the formatting of the number using toLocaleString. If an error is caught, it logs the error using logging.error ^[4].

To continue talking to Dosu, mention @dosu.

from superset.