Count option is not refreshed Server side rendering V2.1.0
See original GitHub issueI’ve got some issues with count options with server side rendering. Count is not updated when I update my options parameter.
- Count is initialized with 0 in first render
- Then count is fetch with async method
- Options is updated with right count
- MuiDatatable is not refresh (as options is setup in componentWillMount method) It uses only number of element of my data array
async componentDidMount() {
// Start fetching data
manufacturersCollection.fetch();
const value = await phonesCollection.fetchCount(this.componentName)
runInAction(() => this.count = value);
phonesCollection.fetch({data: {category: this.componentName, page: 0}});
const navigationData = this.props.location.navigationData;
NavigationUtils.showNavigationMessage(navigationData, this.snackBar);
}
// Prepare data from collection Transform list of object to simple array with order
@computed
get preparedData() {
return DataTableUtils.createDataArray(phonesCollection, this.columns);
}
render() {
const {classes, breadcrumbs} = this.props;
// Options for basic grid
// TODO: Options in custom component
const options = { selectableRows: false,
serverSide: true,
count: this.count,
download: true,
print: false,
viewColumns: false,
responsive: "scroll",
filterType: 'dropdown',
rowsPerPage: 15,
onTableChange: (action, tableState) => {
switch (action) {
case 'changeRowsPerPage':
case 'changePage':
phonesCollection.fetch({data: {category: this.componentName, page: tableState.page, size: tableState.rowsPerPage}});
break;
case 'search':
if(tableState.searchText && tableState.searchText.length > 1) {
phonesCollection.fetch({data: {category: this.componentName, page: tableState.page, size: tableState.rowsPerPage, searchText: tableState.searchText}});
} else if(tableState.searchText === null) {
phonesCollection.fetch({data: {category: this.componentName, page: tableState.page, size: tableState.rowsPerPage}});
}
break;
default:
break;
}
},
downloadOptions: {separator: ';'}
};
// Display normal data on page
return (
<React.Fragment>
{breadcrumbs}
<div style={{ margin: 20 }}>
{/* Page header + toolbar */}
<Typography classes={{root: classes.headLineDataTable}} variant="h4" color="initial" noWrap>
{this.componentName}
<Button variant="contained" className={classes.button} size="small" onClick={this.startCreation} data-cy="create-user-button">
<AddIcon classes={{root: classes.iconThemeColorGreen}} className={classes.leftIcon} />
Create {this.componentName}
</Button>
</Typography>
{/* Datatable to display results */}
<MUIDataTable
data={this.preparedData}
columns={this.columns}
options={options}
/>
<SimpleSnackbar ref={this.snackBar}/>
</div>
</React.Fragment>
);
}
Issue Analytics
- State:
- Created 4 years ago
- Reactions:4
- Comments:17 (5 by maintainers)
Top Results From Across the Web
SearchPanes not refreshing when serverside is used.
I have a server-side DT with SearchPanes enabled for two columns. Server-Script returns data + searchPanes options for each Ajax call.
Read more >How do I Server Side Render my Sweet Counter Component?
A simple setup to server side render a React component. ... of this app is a counter that is initially rendered server-side and...
Read more >React-router URLs don't work when refreshing or writing ...
'ugly' URLs; Server-side rendering is not possible with this approach. ... React-router 2.0 browserHistory doesn't work when refreshing for ...
Read more >Creating Server-side Rendered Vue.js Apps Using Nuxt.js
This is a big indication that something is wrong with the application logic. Thankfully, an error will be generated in your browser's console...
Read more >Refreshing Server-Side Props - Next.js - Josh W Comeau
Next allows you to do server-side data-fetching, but what happens when ... is that individual routes can opt-in to server-side rendering.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
And as a workaround, I just put this, that is working haha ! 😃
same in V2.2.0