Comments (11)
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.
from react-bootstrap-table.
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>
from react-bootstrap-table.
@AllenFang, nice!
I just have the wrong implementation of it.thanks! :)
from react-bootstrap-table.
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.
from react-bootstrap-table.
@markmus I'm sorry, would you explain the problem detail(what's loading)? sorry for my poor english ;(
from react-bootstrap-table.
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>
)
}
)
}
from react-bootstrap-table.
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.
from react-bootstrap-table.
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! :)
from react-bootstrap-table.
@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?
from react-bootstrap-table.
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 :)
from react-bootstrap-table.
I have released newest version for fixing the bug. You can try it without TableDataSet :)
from react-bootstrap-table.
Related Issues (20)
- Read only on editable table for a field, but insert it in insertmodal HOT 1
- Sort icon not visible when text overflows in th
- Select All checkbox customization (Display any other icon instead of checkbox) HOT 2
- CellEdit is not working in firefox.
- Not showing Table border Tried Everything of Scripts importing CSS of bootstrap but still
- Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code.
- Select All doesn't persist across pages. HOT 1
- Not compatible with React 17+ HOT 6
- How to hide/show checkbox on particular rows in react bootstrap table next
- React Hooks, state is reseting to initial state when called onChange is called inside Formatter
- Expanding one row updating the value of all the expanded rows with the latest value
- How to get value of column selectFilter with deprecated react-boot-strap-table
- React Bootstrap Table - Iterate over an array of Objects for Datafield
- BootstrapTable is not reloading data when row checkbox checked or unchecked in ReactJS
- Error when search on page 2/3/4/5 etc
- Can't run the examples using gulp
- How can I delete/disable the "Expand All - Collapse All" button in the table header?
- Dynamic TableHeaderColumns with search and exportToCSV props doesn't work in BootstrapTable
- How can i use navigate pages using row ?
- React-data-table Component header alone is overlapping when the model/Pop us is enabled, HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-bootstrap-table.