Toggle columns on react-bootstrap-table2

Question

Using this libraryhttps://react-bootstrap-table.github.io/react-bootstrap-table2/

And this to toggle columns: https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Bootstrap%204&selectedStory=Column%20Toggle%20with%20bootstrap%204&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel

Docs on column toggle: https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-column-toggle.html

I need to know what columns have been hidden.

A callback is included for this:

onColumnToggle: Call this method when user toggle a column.

Implemented:

<ToolkitProvider
          keyField="globalId"
          data={ this.props.data }
          columns={ this.state.columns }
          columnToggle
        >
          {
            props => {
              return (
                <>
                  <ToggleList {...props.columnToggleProps} onColumnToggle={this.columnToggle} className="d-flex flex-wrap"/>
                  <hr/>
                  <BootstrapTable
                    striped
                    bootstrap4
                    keyfield="globalId"
                    {...props.baseProps}
                  />
                </>
              )

            }
          }
        </ToolkitProvider>

My function this.columnToggle fires as expected. But the table itself is no longer hiding/showing columns. If I remove my function, it works again.

Updated: The columnToggle function:

 columnToggle = (column) => {
    console.log(column); // outputs the toggled column
  };

Answer 1

the ToggleList uses the render props design pattern, so it sends the original onColumnToggle with the props you spread on the component ToggleList , but also, you provided your own copy of the onColumnToggle function, which will override the expected result.

a simple solution so you could take advantage of the two functionalities (the actual onColumnToggle of the Component, and your copy of it) by doing something like this:

<ToggleList {...props.columnToggleProps} onColumnToggle={() => {this.columnToggle(); props.columnToggleProps.onColumnToggle(/* whatever params it needs */)}} className="d-flex flex-wrap"/>

this will let you do custom things when the column toggles, and you still have the original functionality of the ToggleList API.

EDIT: The Problem with this solution, that the ToggleList component seems to be Un-controlled. so I would suggest using this example from the official docs.