Search code examples
reactjsreact-bootstrap-table

how to add checkbox to cells in react bootstrap table2 header cells?


I am using react-bootstrap-table-next and wanted to add "checboxes" to some of the header cells. I referred to the documentation- https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Welcome&selectedStory=react%20bootstrap%20table%202%20&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel but could not find a relevant example. Can any one please help?

import BootstrapTable from 'react-bootstrap-table-next';

class Container extends React.Component{

    render(){
        <BootstrapTable keyField="PartNumber" selectRow={selectRowProp}
                    data={this.state.data} columns={this.state.columns}/>
    }

}

Expected output of checboxes in header cells -

enter image description here


Solution

  • I used "headerFormatter" to customize header cells. Below are the working code and output screenshot

    state = {
        columns: MYResult.ParametricList_Attributes || []
    };
    
    componentDidMount(){
        const checkbox = (column, colIndex) => {
            //console.log(colIndex)
            //console.log("column text "+column.text)
            if("Part Number"==column.text || "Product Line"==column.text){
                return (
                    <div>
                        {column.text}  
                        <span><input type="checkbox" name="something" value="" /></span>
                    </div>
                );
            }else{
                return (
                <div>
                    {column.text}  
                </div>
                )
            }
        }
        const newColumn = this.state.columns.map((column) => {
            //console.log("column --"+column.text)
                return {...column, headerFormatter: checkbox};
        });
        //console.log("newColumn --"+newColumn)
        this.setState({columns: newColumn });
    }
    

    enter image description here