genetic-orange•3y ago

Change pagination method

Hello everybody, I am trying to implement pagination with a datagrid, but my API do not use "_start" and "_end" but it use "page" as GET parameter with a default page size set on the API side. How can change the pagination method to use "page" instead of "_start" and "_end" ?

31 Replies

tame-yellow•3y ago

Hey @harisris you can run swizzle command to export the data provider (Is a feature of @pankod/refine-cli) And you can customize that as you like. For more info about swizzle check out https://refine.dev/docs/packages/documentation/cli/#swizzle We currently don't have a quick way to change this by an option but a feature to allow this and more customizations for data providers is on our backlog 🙏

genetic-orangeOP•3y ago

Hi @aliemirs i am going to try and get back to you if i have an issue. Thank you for your efficacity 👌

getList: async ({
        resource,
        hasPagination = true,
        pagination = {current: 1, pageSize: 10},
        filters,
        sort,
    }) => {
        const url = `${apiUrl}/${resource}`;

        const {current = 1, pageSize = 30} = pagination ?? {};

        const queryFilters = generateFilter(filters);

        const query: {
            page?: number;
            _sort?: string;
            _order?: string;
        } = hasPagination
            ? {
                  // page: (current - 1) * pageSize,
                  page: current,
              }
            : {};

        const generatedSort = generateSort(sort);

getList: async ({
        resource,
        hasPagination = true,
        pagination = {current: 1, pageSize: 10},
        filters,
        sort,
    }) => {
        const url = `${apiUrl}/${resource}`;

        const {current = 1, pageSize = 30} = pagination ?? {};

        const queryFilters = generateFilter(filters);

        const query: {
            page?: number;
            _sort?: string;
            _order?: string;
        } = hasPagination
            ? {
                  // page: (current - 1) * pageSize,
                  page: current,
              }
            : {};

        const generatedSort = generateSort(sort);

I've made this working and it display the 30 first (the pageSize do not change anything in my case) as i want but i would like to know in which part of the file can I overwrite the page changing(made the changing page buttons work), to display the other query result ?

Omer•3y ago

Which hook are you using? useList, useTable, useDataGrid etc.

genetic-orangeOP•3y ago

I’m using useDataGrid

tame-yellow•3y ago

https://refine.dev/docs/api-reference/mui/hooks/useDataGrid/#return-values check out this doc

useDataGrid | refine

By using useDataGrid, you are able to get properties that are compatible with MUI X

 component. All features such as sorting, filtering and pagination comes as out of box. For all the other features, you can refer to the MUI X

documentation.

tame-yellow•3y ago

useDataGrid returns setCurrent function to change the page In your case, current is mapped to page so i think this will take care of your issue 🙏

genetic-orangeOP•3y ago

Thank you @aliemirs but is any way to do it in the DataProvider because i've got many DataGrid ?

tame-yellow•3y ago

@harisris sorry i couldn't understand the issue here. After you override the getList method of the data provider and passing that to the dataProvider prop, doesn't the pagination works already? refine internally stores the page as current but in the data provider it will be converted to page by your code and all should be good. Can you please elaborate the not-working part 🙏

genetic-orangeOP•3y ago

i override the getList to set the page with current as value of the parameter page which I get from the GET url but i would like to know how can make the change page button work because now the pagination do not work ?

tame-yellow•3y ago

Can this be related with the total value returned from the getList method? By default @pankod/refine-simple-rest reads it from the x-total-count header

genetic-orangeOP•3y ago

I think it can be related i check and get back if i have an other issue 😅

tame-yellow•3y ago

In your API it can be something else or some property in the response. When it's undefined or 0, pagination will not work (obviously 🤣 ) Let's check that and I'll be waiting for your update 🚀

genetic-orangeOP•3y ago

when i set total to a big number, the pagination work but i need to update the GET parameter page to make a new api call with the new page in which part of the DataProvider should i make this update ? the api return a 400 error when i put the page 0 and return the page 1 for undefined

tame-yellow•3y ago

About updating the page, you mean the current from the parameters of the getList? If so, it's handled by the datagrid but of course you can use setCurrent from useDataGrid to update that dynamically or use initialCurrent to pass a default value. If the issue is with page URL parameter and it having edge cases to be handled, you can do that in the getList method as well. query object is stringified and appended to the request url

genetic-orangeOP•3y ago

ok thank you, but will the getList trigger the changing of the page when i click on the button or should i do also in the getList ?

tame-yellow•3y ago

Yes it will send another request with the new page number

genetic-orangeOP•3y ago

ok thank you 💪

tame-yellow•3y ago

🚀

genetic-orangeOP•3y ago

I don't know i doing something wrong but when i click on the changing page button, there is not new API call, as if the click was not triggered

tame-yellow•3y ago

Can you try to create a reproduction repo/example? I will also try to reproduce the issue not sure what’s causing this is a bug or a mis use

genetic-orangeOP•3y ago

i can give the DataProvider and a DataGrid

tame-yellow•3y ago

I guess dataprovider is only differs with the page param you’ve shared above right? Datagrid and the button will be enough then

genetic-orangeOP•3y ago

yes i pnly change the getList method

export const SkiDomainsList: React.FC = () => {
    const translate = useTranslate();
    const columns: GridColumns = [
        {
            field: "id",
            headerName: translate("ski_domains.fields.id"),
            type: "number",
            maxWidth: 30,
        },
        {
            field: "active_sales",
            headerName: translate("ski_domains.fields.active_sales"),
            type: "boolean",
        },
    ];

    const {dataGridProps} = useDataGrid<IDomains>({initialPageSize: 10});

    const {
        paginationMode,
        page,
        onPageChange,
        pageSize,
        onPageSizeChange,
        ...restDataGridProps
    } = dataGridProps;
    return (
        <>
            <Header pageTitle={"ski_domains.ski_domains"} />
            <DataGrid
                {...restDataGridProps}
                pagination
                columns={columns}
                autoHeight
            />
        </>
    );
};

export const SkiDomainsList: React.FC = () => {
    const translate = useTranslate();
    const columns: GridColumns = [
        {
            field: "id",
            headerName: translate("ski_domains.fields.id"),
            type: "number",
            maxWidth: 30,
        },
        {
            field: "active_sales",
            headerName: translate("ski_domains.fields.active_sales"),
            type: "boolean",
        },
    ];

    const {dataGridProps} = useDataGrid<IDomains>({initialPageSize: 10});

    const {
        paginationMode,
        page,
        onPageChange,
        pageSize,
        onPageSizeChange,
        ...restDataGridProps
    } = dataGridProps;
    return (
        <>
            <Header pageTitle={"ski_domains.ski_domains"} />
            <DataGrid
                {...restDataGridProps}
                pagination
                columns={columns}
                autoHeight
            />
        </>
    );
};

i remove some columns so can read easily

tame-yellow•3y ago

Thank you checking now, i will get back to you soon

genetic-orangeOP•3y ago

ok thank you

tame-yellow•3y ago

Any reason to not pass the pagination props to the data grid? Are you trying to have custom buttons for pagination?

genetic-orangeOP•3y ago

i try to remove them to see if something will change i add back the onPageChange={onPageChange} and now the get method as send again

tame-yellow•3y ago

So it's working as you expected?

genetic-orangeOP•3y ago

yes i'm trying to set the right total If is not the case how can I have custom buttons for pagination ?

tame-yellow•3y ago

You can use current and setCurrent from the useDataGrid hook. Check out the docs here http://refine.dev/docs/api-reference/mui/hooks/useDataGrid/#return-values

useDataGrid | refine

By using useDataGrid, you are able to get properties that are compatible with MUI X

 component. All features such as sorting, filtering and pagination comes as out of box. For all the other features, you can refer to the MUI X

documentation.

tame-yellow•3y ago

as a matter of fact, onPageChange and other pagination props from dataGridProps are using those methods (setCurrent, current, setPageSize etc.) under the hood and you can achieve the same functionality by using those 😅

Change pagination method

Did you find this page helpful?