How to add Pagination in Fluent UI Detaillist using react

Question

I have created the sample by using this link https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist

Now I want to add Pagination in the grid. Please let me know the steps.

Horse

Answer 1

You can use import { Pagination } from '@uifabric/experiments';

  <Pagination
        selectedPageIndex={page}
        pageCount={pageCount}
        onPageChange={onPageChange}
        format
        firstPageIconProps={{ iconName: 'DoubleChevronLeft' }}
        previousPageIconProps={{ iconName: 'ChevronLeft' }}
        nextPageIconProps={{ iconName: 'ChevronRight' }}
        lastPageIconProps={{ iconName: 'DoubleChevronRight' }}
    />

Potsherd

Except the path should be '@fluentui/react-experiments/lib/Pagination' and the package is named @fluentui/react-experiments – Indwell

Sadly, this doesn't work with v9 as the package is trying to use font icons for the buttons. It might be better to copy the source and reimplement it with your own icon buttons: github.com/microsoft/fluentui/tree/master/packages/… – Indwell