fix(EnhancedTable): fix a bug where updating `canEdit` or `canDelete` after the first render would NOT have an effect
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:
- Previously we were using a custom plugin hook, which we passed in
useTable
which adds the actions column ONLY whenshowActions
istrue
. It turns outreact-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 theactions
column, but to hide or show the column initially by passing ininitialState
touseTable
and by callingsetHiddenColumns
for changes after the first render. - Previously we passed in
canEdit
andcanDelete
fromEnhancedTable
's props toTableActionsCell
directly. As mentioned in 1., the plugin hook is only applied before the first render, so this also meansCell
defined in the actions column that is added is only applied before the first render as well. This means even ifTableActionsCell
changes, it will NOT causereact-table
to rerender. So ifcanEdit
orcanDelete
were set tofalse
(and thus not visible after the first render) but later on either one was set totrue
, the icon buttons would still not appear, even if theActions
column was visible. The only way to getreact-table
to rerender a cell is by changing theprops
passed to theCell
's component. This is why I changed theTableCell
component to include thecanEdit
andcanDelete
props incell.render
, which are then passed on to theCell
renderer of the actions column. Then, theTableActionButtons
component usescanEdit
andcanDelete
from its own props instead of the ones fromEnhancedTable
's props.