rare-sapphire
rare-sapphireβ€’2y 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
adverse-sapphire
adverse-sapphireβ€’2y 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 πŸ™
rare-sapphire
rare-sapphireOPβ€’2y 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
Omerβ€’2y ago
Which hook are you using? useList, useTable, useDataGrid etc.
rare-sapphire
rare-sapphireOPβ€’2y ago
I’m using useDataGrid
adverse-sapphire
adverse-sapphireβ€’2y ago
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.
adverse-sapphire
adverse-sapphireβ€’2y 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 πŸ™
rare-sapphire
rare-sapphireOPβ€’2y ago
Thank you @aliemirs but is any way to do it in the DataProvider because i've got many DataGrid ?
adverse-sapphire
adverse-sapphireβ€’2y 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 πŸ™
rare-sapphire
rare-sapphireOPβ€’2y 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 ?
adverse-sapphire
adverse-sapphireβ€’2y 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
rare-sapphire
rare-sapphireOPβ€’2y ago
I think it can be related i check and get back if i have an other issue πŸ˜…
adverse-sapphire
adverse-sapphireβ€’2y 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 πŸš€
rare-sapphire
rare-sapphireOPβ€’2y 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
adverse-sapphire
adverse-sapphireβ€’2y 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
rare-sapphire
rare-sapphireOPβ€’2y 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 ?
adverse-sapphire
adverse-sapphireβ€’2y ago
Yes it will send another request with the new page number
rare-sapphire
rare-sapphireOPβ€’2y ago
ok thank you πŸ’ͺ
adverse-sapphire
adverse-sapphireβ€’2y ago
πŸš€
rare-sapphire
rare-sapphireOPβ€’2y 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
adverse-sapphire
adverse-sapphireβ€’2y 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
rare-sapphire
rare-sapphireOPβ€’2y ago
i can give the DataProvider and a DataGrid
adverse-sapphire
adverse-sapphireβ€’2y ago
I guess dataprovider is only differs with the page param you’ve shared above right? Datagrid and the button will be enough then
rare-sapphire
rare-sapphireOPβ€’2y 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
adverse-sapphire
adverse-sapphireβ€’2y ago
Thank you checking now, i will get back to you soon
rare-sapphire
rare-sapphireOPβ€’2y ago
ok thank you
adverse-sapphire
adverse-sapphireβ€’2y ago
Any reason to not pass the pagination props to the data grid? Are you trying to have custom buttons for pagination?
rare-sapphire
rare-sapphireOPβ€’2y 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
adverse-sapphire
adverse-sapphireβ€’2y ago
So it's working as you expected?
rare-sapphire
rare-sapphireOPβ€’2y ago
yes i'm trying to set the right total If is not the case how can I have custom buttons for pagination ?
adverse-sapphire
adverse-sapphireβ€’2y 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.
adverse-sapphire
adverse-sapphireβ€’2y 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 πŸ˜