9

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.

Pushparaj saimon
  • 93
  • 2
  • 9

1 Answers1

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' }}
    />
Wing Bui
  • 19
  • 3
  • Except the path should be `'@fluentui/react-experiments/lib/Pagination'` and the package is named @fluentui/react-experiments – Lee McPherson Aug 17 '23 at 22:28
  • 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: https://github.com/microsoft/fluentui/tree/master/packages/react-experiments/src/components/Pagination – Lee McPherson Aug 17 '23 at 22:42