How to add pagination in office UI Fabric DetailsList control

Question

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.

Answer 1

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

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>
    );
    
  }