1

I am working on SPFX Extension. I need to add pagination to the grid(Office UI Fabric -Details List control),Which is inside Dialog Control.

I got this this Link .When I tried to import the Pagination as : import Pagination from 'office-ui-fabric-react-pagination'; it is showing error "Cannot find Module - 'office-ui-fabric-react-pagination'".

Can anyone help me on how to install this pagination module inorder to implement Or suggest me with links which implemented pagination.

Please help ASAP.

1 Answer 1

0

You need to run npm i office-ui-fabric-react-pagination, then import Pagination component to the code. enter image description here

import * as React from 'react';
import styles from './OfficeUispfx.module.scss';   
import { escape } from '@microsoft/sp-lodash-subset';    
import Pagination from 'office-ui-fabric-react-pagination';    
import * as MyScript from './myscript';


export default class OfficeUispfx extends React.Component<IOfficeUispfxProps, any> {
  
  
  public render(): React.ReactElement<IOfficeUispfxProps> {     
    return (
      <div className={ styles.officeUispfx }>
        <div className={ styles.container }>
          <div className={ styles.row }>
            <div className={ styles.column }>
              <span className={ styles.title }>Welcome to SharePoint!</span>
              <p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
              <p className={ styles.description }>{escape(this.props.description)}</p>
              <a href="https://aka.ms/spfx" className={ styles.button }>
                <span className={ styles.label }>Learn more</span>
              </a>
            </div>
            <a href="#" className={ styles.button } onClick={  MyScript.Greeting }  >
                <span className={ styles.label }>Greeting</span>
              </a>
          </div>  
        </div>
        
        <Pagination
            currentPage={1}
            totalPages={10}
            onChange={(page) => {alert('Send user to page: ' + page)}}
        />
      </div>
    );
    
  }
2
  • I have implemented the above Pagination control. How can I limit items per page.I wnt to show 20 items per page.If items got increased after 20 remaining items should be displayed in next page.Can any tell me what is property to display no.of items per page?
    – Swetha
    Dec 2, 2020 at 12:41
  • 1
    The count of items displayed on each page should be controlled by DetailsList item property. You can get the desired item through the paging syntax of SharePoint Rest Api.
    – Amos
    Dec 3, 2020 at 1:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.