Column is not re-rendered when width is changed from outside AFTER it was resized by drag-and-drop

This issue has been tracked since 2022-10-31.

Describe the bug

When you create a Grid with resizable columns, the column is not re-rendered when width has been changed in props, if you resized it by drag-and-drop before that

To Reproduce

Link to code example:

  1. Open codesandbox
  2. Resize Title column by hand (drag-and-drop)
  3. Click [Set width to 100] button
  4. The column Title will not change, but should
import "./styles.css";

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

export default function App() {
  const [w, setW] = useState(200);

  const columns = useMemo(
    () => [
      { key: "id", name: "ID", resizable: true },
      { key: "title", name: "Title", width: w, resizable: true }

  const rows = useMemo(
    () => [
      { id: 0, title: "Example " + w },
      { id: 1, title: "Demo" }

  return (
      <DataGrid columns={columns} rows={rows} />
      <button onClick={() => setW(100)}>Set width to 100</button>

Expected behavior

It should be possible to set Column width by changing the props in column definitions


  • react-data-grid version: 7.0.0-beta.19
  • react/react-dom version: 18.2.0
hyusetiawan wrote this answer on 2022-11-27

@lowellbradigan try remounting

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