Mui-datatables: Count option is not refreshed Server side rendering V2.1.0

[jkeruzec]

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>
        );
    }

[jkeruzec]

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}
/>

[Janekk]

same in V2.2.0

[bndynet]

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}
/>

Works in v2.2.0

[nathancharles]

This is also the case for filterList in the column options. I was able to solve it using the same technique of key={filterValue}

[seta-hungDang]

I think it's quite similar with my issue #658 . I return to version 2.0.0 and it works well

[jkeruzec]

I have some regressions with v2.3.0 on columns parameters too..

I change this object but mui-datatables till have the old columns settings put in first place.

I did this by the past to make it work but it doesn't now with or without this :

// Change array reference so that datatable API knows sthing changed 
this.columns = this.columns.slice(0);

...

 return (
                <MUIDataTable 
                title={<Typography variant="subtitle1" component="span" color="textSecondary" noWrap>{this.props.componentName}</Typography>}
                data={this.data} 
                columns={this.columns} 
                options={this.options}
                />
                );

It was working before with old version I had : 2.0.0-beta-54

I think we are in the same kind and related situation.

[gabrielliwerant]

@jkeruzec We have a separate issue to track column props more generally: https://github.com/gregnb/mui-datatables/issues/643.

[VagnerNico]

The solution of using the prop key fixes the problem but creates another.
When u are filtering the table and the server returns a different count value the filters menu closes and, besides, if u try to clear the filter deleting the chip the 'tableState.filterList' don't change, he keeps always the same array of values.

[jkeruzec]

@VagnerNico Yes I saw that too on my side, sorry for that, Solution I proposed was only a workaround waiting for a proper fix...

[VagnerNico]

I checked the code and found the problem. The count options are passed to the component only one time on componentWillMount lifecycle method. I solved the problem, that solution consists of add count to the state of the table and on componentDidUpdate u compare props received with the component state.
I've created a branch with the fix and one working example with filters.

[gabrielliwerant]

@VagnerNico This fix is already in PR. Make sure to check up on the PRs first before duplicating effort!

[VagnerNico]

My mistake I have not read all the comments kkkk

[gabrielliwerant]

No worries, I appreciate the initiative! :) Just wanted to save you some effort.

Something we do need at this point is a temporary fix for column props updating, if you want to take a look: https://github.com/gregnb/mui-datatables/issues/643. There is also a PR open for that, but I've given feedback around needed fixes.

[VagnerNico]

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.

[gabrielliwerant]

@VagnerNico Can you submit a PR with those tests? Would be much appreciated!

[VagnerNico]

@gabrielliwerant PR #682 ready, u can test with the code from @bndynet, tested here and all works fine incoming data and filters.

[gabrielliwerant]

Should be fixed in 2.4.0. Please open a new ticket with reproducible steps if there are additional issues.