reactjshtml-tablereact-bootstrapreact-bootstrap-table

Adding column header for the row selection column in the react-bootstrap-table-next?

Question

How can I add column header for the row selection in the react-bootstrap-table-next?

Screenshots

Design Image

Design Image

Current Code Image

Code Image

Here is the Image for the table I just need to know that how to add the column header for the row selection. As a props which shows how many data are present in the table.

Solution

  • We need to use

    const selectRow = {
      mode,
      clickToSelect: true,
      selected: props?.selectedRows,
      onSelect: props?.externalSelectionHandler,
      selectionHeaderRenderer: () => props?.selectHeader, // This line will display the hearder for row - select column header(th).
      selectionRenderer: ({ ...rest }) => <CustomInput {...rest} />, // this line is used to customiseze the selection(td).
    };
...
...
...

 <BootstrapTable
    remote={{ sort: false, search: true, pagination: true }}
    keyField={this.props?.fieldKey}
    data={this.props?.tableData}
    columns={filteredColumns}
    bordered={false}
    selectRow={selectRow} // This is used for the selectedRow customization
    onTableChange={this.onTableChange}
    {...paginationTableProps}
  />

    This is what I got from the React Bootstrap Next and its working fine.

    For more you can react-bootstrap-next custom selection.

    This is what I found.

    Thanks for your answers.