Table body rows amount not changing

[Luiz Comiran de Lima]

Hey! First of all, tyvm for the great work! Now, about the problem: I cannot increase the amount of rows per page, it does work the other way around tho, if I initialize rowsPerPage with the biggest option (20) it does work as intended whenever I change rows per page, but if I initialize with the smallest option (10), no matter what I do, the table doesnt render more than 10 rows, I've checked and the data is indeed being updated (checked with useEffect and with react dev tools)... am I missing something?
Here is my component:

import AuthLayout from '@/components/layout/auth/index';
import { DatatableWrapper, Filter, Pagination, PaginationOptions, TableBody, TableHeader } from 'react-bs-datatable';
import { Col, Row, Table } from 'react-bootstrap';
import axios from '@/lib/axios';
import { useState } from 'react';
import useSWR from 'swr';

const headers = [
    { title: 'id', prop: 'id', isFilterable: true },
    { title: 'Name', prop: 'name', isFilterable: true },
];

export default function Storage() {
    const [page, setPage] = useState(1);
    const [rowsPerPage, setRowsPerPage] = useState(10);

    const handleRowsPerPageChange = next => {
        setRowsPerPage(next);
    };

    const { data, error, mutate } = useSWR(
        `/api/products?page=${ page }&limit=${ rowsPerPage }`,
        url => {
            return axios.get(url)
                .then(res => res.data);
        }
    );

    return (
        <AuthLayout>
            <div>
                <DatatableWrapper
                    body={ data?.data ?? [] }
                    headers={ headers }
                    paginationOptionsProps={ { initialState: { rowsPerPage: rowsPerPage, options: [10, 15, 20] } } }
                >
                    <Row className="mb-4">
                        <Col
                            xs={ 12 }
                            lg={ 4 }
                            className="d-flex flex-col justify-content-end align-items-end"
                        >
                            <Filter/>
                        </Col>
                        <Col
                            xs={ 12 }
                            sm={ 6 }
                            lg={ 4 }
                            className="d-flex flex-col justify-content-center align-items-center"
                        >
                            <PaginationOptions controlledProps={ {
                                rowsPerPage,
                                onRowsPerPageChange: handleRowsPerPageChange
                            } }/>
                        </Col>
                        <Col
                            xs={ 12 }
                            sm={ 6 }
                            lg={ 4 }
                            className="d-flex flex-col justify-content-end align-items-end"
                        >
                            <Pagination controlledProps={ {
                                currentPage: page,
                                maxPage: data?.last_page,
                                onPaginationChange: next => setPage(next)
                            } }/>
                        </Col>
                    </Row>
                    <Table>
                        <TableHeader/>
                        <TableBody/>
                    </Table>
                </DatatableWrapper>
            </div>
        </AuthLayout>
    );
}

Thank you in advance :)

[Luiz Comiran de Lima]

I went on with the dev, and then I realized sorting wasnt working as expected as well, then I started going over the lib components again and this little... well, as always, it was a tiny detail, I missed the isControlled prop in DatatableWrapper, after setting it to true seems like everything is working! My bad!

[Try Ajitiono]

hey @luizgdi, glad you have sorted it out! Do you have suggestions regarding how this can be improved?

I'm thinking of logging a warning in each component that has controlledProps passed but the isControlled prop to DatatableWrapper isn't being passed on. Something like:

[react-bs-datatable] You have passed controlledProps prop to <component name>, but isControlled prop is not set to true in DatatableWrapper.

Please let me know your thoughts. Thanks!

[Luiz Comiran de Lima]

@imballinst yes! it would've saved my life 100%, will definatively help beginners to the lib to figure out that whenever they are controlling something, they must have that prop in the wrapper as well
btw ty for the quick reply!

[Try Ajitiono]

@luizgdi sounds good, I'll find a time around this week to implement it. I'm aiming to emit console warning when process.env.NODE_ENV === 'development', so that it can be removed during compilation. Thanks for the feedback!

[Try Ajitiono]

hey @luizgdi, I actually went on ahead with making isControlled not required anymore. Now when there is a child component with controlledProps, then it will make the table controlled. Sample demo here: https://codesandbox.io/s/react-bs-datatable-3-6-0-alpha-0-typescript-92e5k7?file=/src/App.tsx (you can try it locally by installing react-bs-datatable@3.6.0-alpha.0.

Please let me know what you think. Thanks!

[Luiz Comiran de Lima]

@imballinst yo! oh yeah, I was tracking progress, had the alpha version running before you even commented lol. Definatively better than the warnings! From my tests, everything working like a charm! Nice work!

[Try Ajitiono]

@luizgdi alright, I'll release 3.6.0 in a bit. Thanks for the feedback again!