Crash if a column is removed while editing

This issue has been tracked since 2023-01-24.

Describe the bug

When editing a cell, if the data updates so that column no longer exists but the editor is still active, an error is thrown and the component crashes.

To Reproduce

  1. Open a cell editor in the last column
  2. While the editor is active, remove the column from the data without shifting focus
  3. Notice that the component crashes with TypeError: Cannot read properties of undefined (reading 'colSpan')

Link to code example: (start editing the "Name" column before the 5s timer to reproduce)

Code in case the link expires:

import { useReducer, useEffect } from "react";

import DataGrid, { textEditor } from "react-data-grid";
import "react-data-grid/lib/styles.css";

const columns = [
  { key: "id", name: "ID" },
  { key: "name", name: "Name", editor: textEditor }
const rows = [{ id: "1", name: "John" }];

export default function App() {
  const [showNameColumn, toggleNameColumn] = useReducer((x) => !x, true);

  useEffect(() => {
    const timeout = setTimeout(toggleNameColumn, 5000);
    return () => clearTimeout(timeout);
  }, [showNameColumn]);

  return (
      columns={showNameColumn ? columns : columns.slice(0, 1)}

Expected behavior

The selection should be cleared and it should not crash.


  • react-data-grid version: 18.0.0
  • react/react-dom version: 7.0.0-beta.22
More Details About Repo
Owner Name adazzle
Repo Name react-data-grid
Full Name adazzle/react-data-grid
Language TypeScript
Created Date 2015-03-06
Updated Date 2023-03-23
Star Count 5922
Watcher Count 129
Fork Count 2072
Issue Count 161


Issue Title Created Date Updated Date