correct-apricot•6mo ago

onPageChange updated one

onPageChange was used on previous version for pagination change what is the new method for handling pagination change in useDataGrid

8 Replies

kapa.ai•6mo ago

Hi @Alfaz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In the new version of useDataGrid, the onPageChange method has been replaced with onPaginationModelChange. This change is part of the updates made to the useDataGrid hook where it now returns paginationModel and onPaginationModelChange instead of page, pageSize, onPageChange, and onPageSizeChange. If you've modified these props, you'll need to update them to use the new API. Here's an example of how to use the new method:

const PostList = () => {  
  const { dataGridProps } = useDataGrid();  
  const { paginationModel, onPaginationModelChange, ...restDataGridProps } = dataGridProps;  
  
  /* ... */  
  /* Your changes to use the new values */  
  /* ... */  
  
  return (  
    <DataGrid  
      {...restDataGridProps}  
      paginationModel={paginationModel}  
      onPaginationModelChange={onPaginationModelChange}  
    />  
  );  
}

const PostList = () => {  
  const { dataGridProps } = useDataGrid();  
  const { paginationModel, onPaginationModelChange, ...restDataGridProps } = dataGridProps;  
  
  /* ... */  
  /* Your changes to use the new values */  
  /* ... */  
  
  return (  
    <DataGrid  
      {...restDataGridProps}  
      paginationModel={paginationModel}  
      onPaginationModelChange={onPaginationModelChange}  
    />  
  );  
}

You can find more details in the migration guide (https://refine.dev/docs/ui-integrations/material-ui/migration-guide#required-changes). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

<@763439201353596968> kapa.ai is still learning and improving, please let us know how it did by reacting below

correct-apricot•6mo ago

@kapa.ai how can i manually invoke onPaginationModelChange by myself for my custom pagination

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The onPaginationModelChange prop is a function that is automatically invoked when the pagination model changes. It's not designed to be manually invoked, but rather to respond to changes in the pagination state. However, if you want to manually change the pagination state, you can do so by controlling the paginationModel prop. This prop is an object that contains the current page and page size. By changing the values of this object, you can manually control the pagination state. Here's an example:

const PostList = () => {  
  const { dataGridProps } = useDataGrid();  
  const { paginationModel, onPaginationModelChange, ...restDataGridProps } = dataGridProps;  

  // Manually change the page
  const handleNextPage = () => {
    onPaginationModelChange({ ...paginationModel, page: paginationModel.page + 1 });
  };

  return (  
    <div>
      <DataGrid  
        {...restDataGridProps}  
        paginationModel={paginationModel}  
        onPaginationModelChange={onPaginationModelChange}  
      />  
      <button onClick={handleNextPage}>Next Page</button>
    </div>
  );  
};

const PostList = () => {  
  const { dataGridProps } = useDataGrid();  
  const { paginationModel, onPaginationModelChange, ...restDataGridProps } = dataGridProps;  

  // Manually change the page
  const handleNextPage = () => {
    onPaginationModelChange({ ...paginationModel, page: paginationModel.page + 1 });
  };

  return (  
    <div>
      <DataGrid  
        {...restDataGridProps}  
        paginationModel={paginationModel}  
        onPaginationModelChange={onPaginationModelChange}  
      />  
      <button onClick={handleNextPage}>Next Page</button>
    </div>
  );  
};

In this example, clicking the "Next Page" button will manually change the page to the next one. Please note that this is a simplified example and you might need to adjust it according to your needs. For more information, you can refer to the Refine documentation (https://refine.dev/docs/ui-integrations/material-ui/migration-guide#required-changes). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

<@763439201353596968> kapa.ai is still learning and improving, please let us know how it did by reacting below

correct-apricot•6mo ago

@kapa.ai in my component, iam passing dataGridProps from the useDataGrid as a props, so what type should i give it?

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The dataGridProps returned from the useDataGrid hook is of type DataGridPropsType. This type is defined in the Refine library and includes all the properties that the DataGrid component from Material UI expects, along with some additional properties specific to Refine. Here's an example of how you can use it:

import { DataGridPropsType } from "@refinedev/mui";

interface MyComponentProps {
  dataGridProps: DataGridPropsType;
}

const MyComponent: React.FC<MyComponentProps> = ({ dataGridProps }) => {
  // Your component implementation
};

import { DataGridPropsType } from "@refinedev/mui";

interface MyComponentProps {
  dataGridProps: DataGridPropsType;
}

const MyComponent: React.FC<MyComponentProps> = ({ dataGridProps }) => {
  // Your component implementation
};

Please note that the actual import path might differ based on your project setup and the version of Refine you are using. You can find more details in the Refine documentation (https://refine.dev/docs/ui-integrations/material-ui/hooks/use-data-grid#return-values-1). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

<@763439201353596968> kapa.ai is still learning and improving, please let us know how it did by reacting below