Skip to content

fix(EnhancedTable): fix a bug where updating `canEdit` or `canDelete` after the first render would NOT have an effect

François Martin requested to merge portal-426-bug into master

When updating canEdit or canDelete after the first render, you would expect the actions column to be made visible (if either is true) or to hide it (if both are false) and to show the appropriate icon buttons next to the rows in the table in the actions column. Previously this was not the case. The state before the first render would always stay, no matter what canEdit or canDelete are changed to.

There were two parts to the solution:

  1. Previously we were using a custom plugin hook, which we passed in useTable which adds the actions column ONLY when showActions is true. It turns out react-table only applies hooks before the first render, which is why the column was either always displayed or always hidden according to the state before the first render. I changed the plugin hook to always push the actions column, but to hide or show the column initially by passing in initialState to useTable and by calling setHiddenColumns for changes after the first render.
  2. Previously we passed in canEdit and canDelete from EnhancedTable's props to TableActionsCell directly. As mentioned in 1., the plugin hook is only applied before the first render, so this also means Cell defined in the actions column that is added is only applied before the first render as well. This means even if TableActionsCell changes, it will NOT cause react-table to rerender. So if canEdit or canDelete were set to false (and thus not visible after the first render) but later on either one was set to true, the icon buttons would still not appear, even if the Actions column was visible. The only way to get react-table to rerender a cell is by changing the props passed to the Cell's component. This is why I changed the TableCell component to include the canEdit and canDelete props in cell.render, which are then passed on to the Cell renderer of the actions column. Then, the TableActionButtons component uses canEdit and canDelete from its own props instead of the ones from EnhancedTable's props.

Merge request reports