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.

  1. Count is initialized with 0 in first render
  2. Then count is fetch with async method
  3. Options is updated with right count
  4. 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

Most upvoted comments

And as a workaround, I just put this, that is working haha ! 😃

 {/* Datatable to display results */}
<MUIDataTable key={this.count}
            data={this.preparedData} 
             columns={this.columns} 
             options={options}
/>

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…