React-table: server side sorting/pagination not working
Problem Description
i am trying to just simply call server to paginate and sorting, irregardless of what server response, event is not firing "fetchData" instead i am seeing that it is doing client side sorting, even manuall property is already added, please have a look at the following code.
class TestServerSideGrid extends React.PureComponent {
constructor() {
super();
this.state = {
data: [],
pages: -1,
loading: true,
columns : this.makeColumns()
}
this.fetchData = this.fetchData.bind(this)
}
componentDidMount(){
// this will load the initial data , and correctly working
this.makeGridRequest();
}
fetchData(state, instance){
// this is not called when i try to click pagination button or sorting column
alert ();
}
makeGridRequest (state, instance ){
var that = this;
$.ajax({
url:'DummyUrl' ,
type: 'GET',
success: function (res) {
if (res.Status){
that.setState(
{ pages : res.TotalPages , data : res.Data , loading : false } // total pages is also working correctly
);
}
}
});
}
makeColumns(){
var columns = [{
columns: [{
header: 'Name',
accessor: 'FullName'
}, {
header: 'City',
id: 'City',
accessor: 'City'
},
{
header: 'AgentName',
accessor: 'AgentName'
}, {
header: 'Zip',
id: 'Zip',
accessor: 'Zip'
}, {
header: 'Zip',
id: 'Zip',
accessor: d => d.Zip
},
, {
header: 'Type',
id: 'Zip',
accessor: d => d.Zip,
}
]
}];
return columns;
}
render () {
return (
<div>
<div className='table-wrap'>
<ReactTable
className='-striped -highlight'
columns={this.state.columns}
manual // Forces table not to paginate or sort automatically, so we can handle it server-side, although it is not working
defaultPageSize={5}
data={this.state.data} //working
pages={this.state.pages} //working
loading={this.state.loading} //working
onFetchData={this.fetchData}
/>
)
}
}
module.exports = TestServerSideGrid;
System Information
All browser
NPM Version: latest version
Webpack : latest version
SAliShah
All 5 comments
I am facing a similar issue here.
Unable to fire onFetchData, have added manual prop though.
Here's a snippet.
<ReactTable
className="org__ingestion__table -striped -highlight"
columns={ this.ingestionLogTableColumns }
manual={true}
loadingText={() => <Spinner/>}
filterable={true}
data={ this.state.mappedOrgIngestionLogs }
loading={this.state.isFetchingOrgIngestionLogs}
onFetchData={(state, instance) => {
console.log('onFetchData');
this.setState({isFetchingOrgIngestionLogs: true});
console.log(state, instance);
this.fetchData();
}}
SubComponent={(rowData) => {
return ( <OILDetailsTable rowData={ rowData }/>)
}}
{...this.state.tableOptions}
/>
Any insights regarding this would be absolutely wonderful. @tannerlinsley :)
Keshavdulal
on 16 May 2017
dear all, i think it is the version issue, i went into the library and found that there is no event written as onFetchData instead i found the solution through the following code.
onChange={(state, instance) => {}
console.log (state);
and you will find all the solution ......
SAliShah
on 16 May 2017
Thanks @SAliShah for the workaround
Seems like onPageChange and onPageSizeChange gets called but not onSortedChange
jonas-e-medicus
on 16 May 2017
np bro, i found that "onSortedChange" is named as "onSortingChange" in lib, you can also try that, it will work.
but i think just use onChange, because it will give you old state and new state of (pagination/sorting/pagesize) , so you dont need to put seperate handlers for that.
SAliShah
on 16 May 2017
Version Issue. I was using
"react-table": "^5.6.0"
Thanks @SAliShah for the heads up.
Keshavdulal
on 16 May 2017
Codar97
路
pasichnyk
路
panfiva
路
ocalde
路
dwjft
路
Most helpful comment
dear all, i think it is the version issue, i went into the library and found that there is no event written as onFetchData instead i found the solution through the following code.
onChange={(state, instance) => {}
console.log (state);
and you will find all the solution ......