question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Count option is not refreshed Server side rendering V2.1.0

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:4
  • Comments:17 (5 by maintainers)

github_iconTop GitHub Comments

9reactions
jkeruzeccommented, May 10, 2019

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}
/>
2reactions
Janekkcommented, May 22, 2019

same in V2.2.0

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found