React-bootstrap-table2: Buttons in cell with column formatter are not updated

Created on 3 Sep 2018 · 3Comments · Source: react-bootstrap-table/react-bootstrap-table2

Hi all!
I have a list (data is loaded remotely) where each row item comes with a couple of buttons to do some action with the corresponding item when pressed.

E.g. there is a button that deactivates an entry and the deactivate button should disappear and a button to activate it should appear.
Here comes the but: When the button is pressed, the entry gets deactivated but the buttons are not re-rendered again. Only when I reload the whole page the correct button is shown.

Has anybody got a clue, how to get the table to show the correct button immediately?

Here's some sample code I use:

<BootstrapTable
   remote={{filter: true, sort: true, pagination: true}}
   keyField={keyField}
   data={data}
   columns={getListColumns(this.renderButtons)}
   onTableChange={onTableChange}
   rowClasses={ rowClasses }
/>

getListColumns = (renderButtonsFunction) => {
    return [
      ...
      {
        dataField: 'buttons',
        text: 'Actions',
        headerStyle: {width: 15 + 'rem'},
        formatter: renderButtonsFunction
      }];
  };

renderButtons = (cell, row) => {
    const deactivateButton = (
      <button className='btn btn-tb' style={{backgroundColor: 'transparent'}}
              onClick={() => this.clickDeactivate(row)}> ON
      </button>
    );
    const reactivateButton = (
      <button className='btn btn-tb' style={{backgroundColor: 'transparent'}}
              onClick={() => this.clickReactivate(row)}> OFF
      </button>
    );

    return (
      <div>
        {row.status === 'DEACTIVATED' ? reactivateButton : deactivateButton)}
      </div>
    );
  };

Hoping for any advice on this.
best regards,
Josef

Source

josefheld

Most helpful comment

@josefheld could you please try to upgrade to newest version?! I think you face the same problem like this: https://github.com/react-bootstrap-table/react-bootstrap-table2/issues/504#issuecomment-416976280

But please reopen this issue if the problem still remain.

BTW, in the newest patchs, if you column is dummy(Which mean do data via dataField), please enable the column.isDummyField and please check column.formatter. The important thing is please do not use any external variables. It's about cell rendering performance concern.