mui-datatables: Count option is not refreshed Server side rendering V2.1.0
I’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>
);
}
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 4
- Comments: 17 (5 by maintainers)
Commits related to this issue
- chore(pkg): update mui-datatables to v2.2.0 fix(mui-datatables): issue https://github.com/gregnb/mui-datatables/issues/610 — committed to bndynet/admin-template-for-react by bndynet 5 years ago
- Fix issue #610 about count from server does not refresh — committed to bndynet/mui-datatables by bndynet 5 years ago
- Fix issue #610 about count from server does not refresh (#648) * Fix issue #610 about count from server does not refresh * fix the confusion count value * fix the confusion count value * Use... — committed to gregnb/mui-datatables by bndynet 5 years ago
And as a workaround, I just put this, that is working haha ! 😃
same in V2.2.0
@gabrielliwerant PR #682 ready, u can test with the code from @bndynet, tested here and all works fine incoming data and filters.
Not all work was in vain, I believe that the example I put in my PR could help to test the bug fix proposed by @bndynet. The example simulates a server-side rendering with data length equals to rowsPerPage, but with the count value coming from the server, that represents all the length of the database for a given query. About the issue #643 I will give a try to fix.
@VagnerNico Yes I saw that too on my side, sorry for that, Solution I proposed was only a workaround waiting for a proper fix…