Page is greater than the total available

[rafinha90]

Page is greater than the total available

[gregnb]

It looks like there's a bug. I will look into this today

[gregnb]

This issue should be resolved. Upgrade to version 2.0.0-beta-3

[skalma]

Hi Greg,
First of all, thx for this library, saves me tons of work. I'm a newbee to javascript so there could be a very simple explanation to this,, but i am experiencing this very same issue on version 2.0.0-beta-37. My code:
''''js
import * as React from 'react';
import MUIDataTable from "mui-datatables";
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';

export class ClientList extends React.Component {

state = {
    page: 0,
    count: 100,
    rowsPerPage: 10,
    data: []
};


getMuiTheme = () => createMuiTheme({
    overrides: {
        MuiMenuItem: {
            root: {
                fontSize: '1.25rem'
            }
        }
        , MuiChip: {
            label: {
                fontSize: '1.25rem'
            }
        }
        , MuiInputLabel: {
            root: {
                fontSize: '1.5rem'
            }
        }
        , MuiTooltip: {
            tooltip: {
                fontSize: '1.25rem'
            }
        }
        , MuiInputBase: {
            input: {
                fontSize: '1.25rem'
            }
        }
        , MuiSelect: {
            selectMenu: {
                fontSize: '1.25rem'
            }
        }
        , MuiTypography: {
            h6: {
                fontSize: '2rem'
            }
            , caption: {
                fontSize: '1.25rem'
            }
        }
        , MUIDataTableHeadCell: {
            root: {
                fontSize: '1.25rem'
                , fontWeight: 'bold'
            }
        }
        , MUIDataTableBodyCell: {
            root: {
                fontSize: '1.25rem'
                //,backgroundColor: "#FF0000"
            }
        }
    }
})

componentDidMount() {
    this.getClientListWrapper(0,10);
}

onChangeRowsPerPage = rowsPerPage => {
    this.setState({ rowsPerPage });
};

// get data
//getData = () => {
//    this.getClientList().then(data => {
//        this.setState({ data });
//    });
//}

//get list of clients
getClientList = () => {
    return new Promise((resolve, reject) => {
        fetch('api/Client/Index')
            .then(function (response) { return resolve(response.json()); })
            //.then(function (myJson) { console.log(JSON.stringify(myJson)); })
            ;
    });
}

//route to client overview page
showClientOverview = (id) => {
    this.props.history.push("/client/edit/" + id);
};

getClientListWrapper = (page, rowsPerPage) => {
    this.getClientList().then(data => {
        this.setState({
            page: page,
            rowsPerPage: rowsPerPage,
            data
        });
    });
};

render() {
    const columns = [{ name: "Id", options: { display: false } }, "Clientnummer", "Naam", "Airline"];
    const { data, page } = this.state;
    const data1 = data.map(item => { return [item.clientId, item.clientNumber, item.fullName, item.companyName] });
    const options = {
        filter: true
        ,filterType: 'dropdown'
        ,responsive: 'stacked'
        ,serverSide: false
        ,count: data1.length
        ,page: page
        ,rowsPerPage: this.state.rowsPerPage
        ,rowsPerPageOptions: [10, 15, 50, 100]
        ,onChangeRowsPerpage: this.onChangeRowsPerPage
        ,onRowClick: (rowData, rowMeta) => {
            this.showClientOverview(rowData[0])
        }                
        ,onTableChange: (action, tableState) => {

            //console.log(action, tableState);
            // a developer could react to change on an action basis or
            // examine the state as a whole and do whatever they want

            switch (action) {
                case 'changePage':
                    this.getClientListWrapper(tableState.page, tableState.rowsPerPage);
                    break;
            }
            
        }
        //TODO: load labels from label table 
        ,textLabels: {
            body: {
                noMatch: "Clienten laden...",
                toolTip: "Sorteren",
            }
            , pagination: {
                next: "Volgende Pagina",
                previous: "Vorige Pagina",
                rowsPerPage: "Aantal objecten per pagina:",
                displayRows: "van",
            }
            , toolbar: {
                search: "Zoek",
                downloadCsv: "Download CSV",
                print: "Print",
                viewColumns: "Filter Kolommen",
                filterTable: "Filter Tabel",
            }
            , filter: {
                all: "Alles",
                title: "Filters",
                reset: "Verwijder Filters",
            }
            , viewColumns: {
                title: "Toon Kolommen",
                titleAria: "Toon/Verberg Kolommen",
            }
            , selectedRows: {
                text: "geselecteerde rij(en)",
                delete: "Verwijder",
                deleteAria: "Verwijder Geselecteerde Rijen",
            }
        }
    };

    return (
        <MuiThemeProvider theme={this.getMuiTheme()}>
            <MUIDataTable title={"Team Vervoort - Clienten"} data={data1} columns={columns} options={options} />
        </MuiThemeProvider>   
    );

}

}
''''
I have 21 clients in my database. When navigating to last page (2) there is one last client on that page. If i change rowsPerPage to 15 then, the page goes blank. Refreshing it defaults to first page, rowsPerPage = 10. However: changing rowsPerPage to 50 or 100 works perfectly. Any ideas?