CODEWITHSUNDEEP
reactjsreact-bootstrap-table
Joe
Joe

Reputation: 4234

Toggle columns on react-bootstrap-table2

Using this library https://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
  };

Upvotes: 1

Views: 2502

Answers (1)

sh.alawneh
sh.alawneh

Reputation: 649

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.

Upvotes: 3

Related Questions