before.tsx

import * as React from 'react';

// This is necessary so that when the extraData we're passing to ColumnDefinitions changes,
// the components actually update. Specifically, we want to update a line's adjustment,
// proposed amount, and percent change columns when the bulk adjustment is changed
const UpdateOnBulkAdjustmentPlugin = {
  name: 'UpdateOnBulkAdjustmentPlugin',
  components: {
    TableBody: (InitialTableBody: typeof React.Component) => class extends InitialTableBody<any, any> {
      shouldComponentUpdate(nextProps) {
        return this.props.data !== nextProps.data || this.props.settings.extraData !== nextProps.settings.extraData;
      }
    },
    Column: InitialColumn => props => {
      const newExtraData = {...props.extraData, bulkAdjustment: props.settings.extraData.bulkAdjustment};
      const columnsThatUseBulkAdjustment = ['adjustmentInput', 'proposedAmount', 'percentChange'];
      return columnsThatUseBulkAdjustment.includes(props.id)
        ? <InitialColumn {...props} forceUpdate extraData={newExtraData} value={newExtraData.bulkAdjustment} />
        : <InitialColumn {...props} />;
    }
  }
};

export default UpdateOnBulkAdjustmentPlugin;