Disabled Cells with External Toggle

[Neuroforge]

Hello,

I am using the project and trying to dynamically toggle the disabled state of the cells using a form control in my ReactJS app. When i change the state of the toggle in a form, it should disable the data sheet grid. Conversely, it should enable the data sheet grid when untoggled.

In this example the disabled state is hard coded or set from a function, which appears to rely on the rowData change to trigger the update of the disabled state.

https://github.com/nick-keller/react-datasheet-grid/issues/260

I am seeking to control the columns dynamically, but it doesn't seem like this updates the state of the datasheet grid. When i update the state variable 'isReadOnly' the helper method getEmployeeColumns is indeed called and returns a column that should be disabled. However, there is no change in the datasheet grid. I've also tried passing a function that relied on the loaded state. That did not work.

The state of the parent component is as follows...

  const [isReadOnly, setIsReadOnly] = useState(true);

  const columns = getEmployeeColumns(isReadOnly);

  const onToggle = (toggle: boolean) => {
    setIsReadOnly(toggle);
  };

The columns are generated from a helper function that receives the ready/write state of the table.

export const getEmployeeColumns = (isReadyOnly: boolean) => {
  const columns = [
    {
      ...keyColumn("employeeName", textColumn),
      title: "Employee Name",
      keepFocus: true,
      disableKeys: true,
      className: "row-font",
      disabled: isReadyOnly,
      minWidth: 200,
    },
    ...
    ]

   return columns
}

The columns are then rendered normally using the DataSheetGrid component.

          <DataSheetGrid<EmployeeTableRow>
            autoAddRow
            value={data}
            onChange={onDataChange}
            columns={columns}
            disableContextMenu={isReadOnly}
          />

It seems like the component is not re-rendering when the column definitions are updated. Any advice on what might be happening here? Or how to trigger the data sheet grid to re-render with the new column definitions?

This attempt also did not change the state of the data-sheet grid.....

export const getEmployeeColumns = (isReadyOnly: boolean) => {
  const columns = [
    {
      ...keyColumn("employeeName", textColumn),
      title: "Employee Name",
      keepFocus: true,
      disableKeys: true,
      className: "row-font",
      disabled: () => Boolean(isReadyOnly), //Pass a function that returns the isReadOnly state
      minWidth: 200,
    },
    ...
    ]

   return columns
}

Alternative was to try...

      disabled: ({ rowData }: any) => Boolean(rowData) && Boolean(loading),

[Neuroforge]

Apparently, if i change to the DynamicDataSheetGrid component, everything just works.

[Neuroforge]

Here is the information in the documentation....

https://react-datasheet-grid.netlify.app/docs/performance/static-vs-dynamic/