default sorting does not work about react-bootstrap-table

[markmus]

@AllenFang

Here is my code

Variables

    let listOperator = {
      "operators": [
        {
          "creator": "TEST_USER",
          "created": "2015-08-14T05:37:35",
          "modifier": "TEST_USER",
          "name": "dbm",
          "modified": "2015-08-14T05:37:35",
          "links": [
            {
              "method": "GET",
              "rel": "self",
              "href": "http://localhost:8080/api/operators/55da7bd03411511f7a0a6351"
            }
          ]
        },
        {
          "creator": "TEST_USER",
          "created": "2015-08-27T07:21:13",
          "modifier": "TEST_USER",
          "name": "ABCDEFG",
          "modified": "2015-08-27T07:21:13",
          "links": [
            {
              "method": "GET",
              "rel": "self",
              "href": "http://localhost:8080/api/operators/55deba6940faef1b3adf3203"
            }
          ]
        }
      ]
    }

Table

<BootstrapTable data={listOperator.operators} sortName={ 'name' } sortOrder={ 'asc' } striped={ true } bordered={ true } condensed={ true } hover={ true } styles={ tableStyle }>
    <TableHeaderColumn dataField="name" dataAlign="center" isKey={ true }  dataSort={true}> Operator </TableHeaderColumn>
    <TableHeaderColumn dataField="creator" dataAlign="center" dataSort={true}> Group/Owner </TableHeaderColumn>
    <TableHeaderColumn dataField="created" dataFormat={ this.dateFormatter } dataAlign="center" dataSort={true}> Date Added </TableHeaderColumn>
    <TableHeaderColumn dataField="modified" dataFormat={ this.dateFormatter } dataAlign="center" dataSort={true}> Date Modified </TableHeaderColumn>
    <TableHeaderColumn dataField="links.href" dataFormat={ this.actionFormatter } dataAlign="center" dataSort={true}> Actions </TableHeaderColumn>
</BootstrapTable>

I also try sortName='name' sortOrder='asc' and it doesnt work as well.

[AllenFang]

hello @markmus , you should make default sorting as follow:

var options = {
  sortName: "name",  //default sort column name
  sortOrder: "desc",  //default sort order
};
<BootstrapTable data={products} options={options}>
......
<BootstrapTable>

[markmus]

@AllenFang, nice!
I just have the wrong implementation of it.thanks! :)

[markmus]

@AllenFang

sorting method is not working upon loading. maybe its because of this warning:

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of TableHeader. It was passed a child from MyConponent. See https://fb.me/react-warning-keys for more information.

but when I click again the headers to sort it works fine.

[AllenFang]

@markmus I'm sorry, would you explain the problem detail(what's loading)? sorry for my poor english ;(

[markmus]

@AllenFang

What I'm doing is i'm fetching the data from the server

  componentDidMount() {
    ActionsOperator.fetchTableData()
  }

then

on render

render() {
    const options = {
      sortName: 'name',
      sortOrder: 'asc',
    }


    return (
        { operators.length !== 0 && (
            <BootstrapTable data={ operators } options={ options } striped={ true } bordered={ true } condensed={ true } hover={ true } styles={ tableStyle }>
              <TableHeaderColumn dataField='name' dataAlign='center' isKey={ true }  dataSort={true}> Operator </TableHeaderColumn>
              <TableHeaderColumn dataField='creator' dataAlign='center' dataSort={true}> Group/Owner </TableHeaderColumn>
              <TableHeaderColumn dataField='created' dataFormat={ this.dateFormatter } dataAlign='center' dataSort={true}> Date Added </TableHeaderColumn>
              <TableHeaderColumn dataField='modified' dataFormat={ this.dateFormatter } dataAlign='center' dataSort={true}> Date Modified </TableHeaderColumn>
              <TableHeaderColumn dataField='id' dataFormat={ this.actionFormatter } dataAlign='center'> Actions </TableHeaderColumn>
            </BootstrapTable>
          )
        }
    )
}

here is sample result

[AllenFang]

It's seem like a bug for you update the table states after a fetching, so it's a another problem I didn't found. But if you just give data and render table, I think it will be find. Anyway I'll fix it in next version.

[markmus]

hi @AllenFang it works fine now, when i use

'let dataSet = new TableDataSet( datas )`

my bad.

Thank you very much for this very useful library. Keep it up! :)

[markmus]

@AllenFang is there any way how I could update data in tables when the state or props is updated?

I have let dataSet = new TableDataSet( this.props.data )
when props is updated from store I dont know how I could update or call dataSet.setData(this.props.data)
is there any way we could bind the this.props.data without even calling .setData function?

[AllenFang]

hey, that said, if you data persisted in props and you use TableDataSet to store data and if you want to update data, the only way is .setData. If you dont want use it or your data may persist in state, you can just assign the state's data to BootstrapTable, but it will cause the problem that you encounter before (default sorting). And I've fix this problem and will release it tonight or tomorrow. And again sorry for you suffer these problem, however thanks your feedback :)

[AllenFang]

I have released newest version for fixing the bug. You can try it without TableDataSet :)