Update columns

[Akaren13]

I am changing columns parameter in bootstraptable. I can see new column in GUI but data are the same, even though I force to update the component, it still remain same without data in the new last column.

[AllenFang]

@Akaren13 sorry for lately reply, would you please give me a simple and minimal example on codesandbox so that I can help you to debug/trace? thanks

[Akaren13]

`const columnsList = this.state.columns;
const { ExportCSVButton } = CSVExport;
return (

<
ToolkitProvider
keyField ="_id"

        data = {
            this.props.data
        }
        columns = {
            columnsList
        }   
        noDataIndication={ () => <NoDataIndication /> }
        exportCSV
        > 
        
{
    props => (
      <div>
        <h3 className="alignLeft title inline" >{this.props.id}</h3>

        <ExportCSVButton { ...props.csvProps }>Export CSV</ExportCSVButton>

        <BootstrapTable { ...props.baseProps }
          pagination = {
                paginationFactory()
            }
            bordered ={false}
            bootstrap4 
            hover 
            expandRow = {
                expandRow
            }
        />

      </div>
    )

`

As you can see, I am geting column from this.state variable. If I change it, I can see new column being added but no data to display. It seems there is not innner update of table.

I have added "call-id"column from gui = change state variable.

[AllenFang]

@Akaren13

Firstly, I can't read your example code, please update. Secondly, I just follow your step, put columns to react state then dynamically change column state, but everything work great.

---->>>>>
As I said please give me a simple and minimal example on "codesandbox" . so that I can help you

[Akaren13]

Here https://codesandbox.io/embed/bootstrap-table-add-column-m49tj

[AllenFang]

@Akaren13 you do a wrong way to update state, you mutate the state instead of giving a new instance, please read some docs about why react/redux need immutable :

Below is correct way to update state

addColumn(event){
 
   var columns = this.state.columns;
  // WRONG!!
  //  columns.push(
  //      {
       
  //              dataField: "age",
  //              text: "AGE"
  //     }
  //  );
  
   this.setState({columns: [
     ...columns, {
       dataField: "age",
       text: "AGE"
     }
   ]});
}   

[Akaren13]

Thank you!!

One more question, is there any way how to add icon to column name? Formatter is changing the cell format but I want to add cross icon to delete column next to name, as you have arrows for sorting.