React table displaying full data instead of a page of 20 items

Question

What I have tried is :- set pageSize={20} or defaultPageSize={20}, or both. My component is still rendering a list of all my data, regardless the fact that I passed pageSize props. What am I missing here? I have a similar table with thoses props passed in and it is working. Can't find where is the problem.

const VehiclesList = ({loading, setLoading}) => {

    return (
        <div className={classes.VehiclesList}>
            {loading ? null :
            <Row>
                <Col md="12">
                    <Card className="main-card mb-3">
                        <CardBody>
                            <ReactTable data={vehicleList? vehicleList.vehicleList.data : []}
                            columns={[CUTED NOT TO BOTHER YOU]}
                            pageSize={20}
                            manual
                            page={3}
                            loading={false}
                            loadingText="Chargement..."
                            nextText="Suivant"
                            previousText="Précédent"
                            noDataText="Aucune données correspondantes"
                            showPageSizeOptions={false}
                            className="-striped -highlight"
                            />
                        </CardBody>
                    </Card>
                </Col>
            </Row>
        }
            
        </div>
    )
}

export default VehiclesList;

Answer 1

Remove manual from the props. This prop tells react-table that you're going to be handling things server-side.