Is it possible to render a table with a row selected by default? about react-bootstrap-table

[AllenFang]

Yep, it's a good feature for row selection, I'll add this feature in recently, but need some times :))

[stephenrs]

Great thanks, I'll look forward to it!

[AllenFang]

This issue has been solved on PR#18

[stephenrs]

The committed solution for this issue only solves part of the problem for me. In my case, I need to be able to programmatically select a given row, or at a minimum have the component respect new props when it is re-rendered. The current solution only allows setting the default selected row when the component is first mounted, which isn't so flexible. (also see #19 ).

I've made some modifications and have this working in my dev environment - it causes new props to always set the desired row to the selected state. This seems to be working fine for me, but there might be a better way to do it. Unfortunately, I'm not familiar enough with git to start a pull request (maybe when I have more time), but the change is pretty simple:

This is what the top of TableBody.js looks like in my dev:

function TableBody(props) {
    _classCallCheck(this, TableBody);

    _get(Object.getPrototypeOf(TableBody.prototype), "constructor", this).call(this, props);

    this._setSelectedRowByProps(props);

    this._attachRowSelectFunc();
    this.editing = false;
  }

  _inherits(TableBody, _React$Component);

  _createClass(TableBody, {
    componentDidUpdate: {
      value: function componentDidUpdate(prevProps, prevState) {
        this._attachRowSelectFunc();
      }
    },
    componentWillReceiveProps: {
      value: function componentWillReceiveProps(newProps) {
        this._setSelectedRowByProps(newProps);
      }
    },
    _setSelectedRowByProps: {
      value: function _setSelectedRowByProps(props) {
        var selected = props.selectRow.selected || [];

        if (props.selectRow.mode === Const.ROW_SELECT_SINGLE) {
          //if row selection is single, just pick the first item in 'selected'
          selected = selected.length > 0 ? [selected[0]] : [];
        }
        this.state = {
          currEditCell: null,
          selectedRowKey: selected
        };
      }
    },

Hope this helps!

[AllenFang]

I understand what you means, I'll spend some time to design it.

[stephenrs]

Ok great...also a new requirement has emerged on my project, and it would be very convenient to be able un-select a row from an external module without building in another re-render() cycle. Maybe a statics method on BootstrapTable would be useful(?)

[AllenFang]

I considered a statics method on some class before but there's some problem. Maybe I will re-think about that.

[AllenFang]

hi @stephenrs I've tried a lot of method for this requirement, include static or instance method. But there's no way to complete. Currently, I use componentWillReceiveProps to achieve requirement but you need to assign the new selected value and re-render table, you can see the detail on #19

[AllenFang]

About the dynamic select or unselect feature, I've released on v0.9.5 :)

[elixirdada]

@AllenFang @stephenrs

I am going to add the selected option in the selectRowProp.
As a result, I have made the code below:

selectRowProp = { mode: 'radio', bgColor: '#e9ecef', clickToSelect: true, hideSelectColumn: true, selected: this.props.vehicles[0] && [this.props.vehicles[0].vin], onSelect: (row) => this.onRowSelect(row), }

As you can see, it will take some time to get props values. So currently selected is the empty or null value.

How can I fix it?