-1

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.

Coder
  • 82
  • 7

2 Answers2

0

You can write the following code in your columns array :

{
      dataField: "col_header",
      text: "col_header_text",
      formatter: this.methodName,
      sort: true
    }

now for you have to provide the definition for the given method in the formatter as:-

methodName = (cell, row, rowIndex, formatExtraData) => {
return (
  <Button
    onClick={() => {
      this.onRowChanged(row);
    }}
  >
  </Button>
);

};

you can take the reference from react-bootstrap-table-next

Code_Breaker
  • 83
  • 1
  • 3
  • 8
0

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.

Coder
  • 82
  • 7