Create Pagination Component

[ANU1o]

Disclaimer: English is not my first language, apologizing for the grammar in advance

This help in handling large data load and saves time for developing custom pagination.

Below is a sample scenario for pagination.

Sample Props

• Here I'm using Toolbar Component as container.
• Both Previous and Next is Button component,
• The numbers are normal button tag with following modifications:

HTML

<button className={mergeClasses(eventPageClasses.paginationButton, eventPageClasses.paginationButtonActive)}>
     1
</button>
<button className={mergeClasses(eventPageClasses.paginationButton)}>2</button>
<button className={mergeClasses(eventPageClasses.paginationButton)}>3</button>

Griffel Styling (using makeStyles())

  paginationButton: {
    border: "none",
    backgroundColor: "transparent",
    color: tokens.colorNeutralForeground1,
    ...shorthands.padding(tokens.spacingHorizontalS, tokens.spacingHorizontalL),
    borderRadius: tokens.borderRadiusCircular,
    fontFamily: tokens.fontFamilyNumeric,
    fontSize: tokens.fontSizeBase200,
    ":hover": {
      backgroundColor: tokens.colorNeutralBackground2Hover,
    },
  },
  paginationButtonActive: {
    backgroundColor: tokens.colorBrandBackground,
    color: tokens.colorNeutralForegroundStaticInverted,
    fontWeight: tokens.fontWeightBold,
  },

Notes:

• Sample snippets provided above is static.
• Reason for using button instead Button is due to width issues that I wasn't able to resolve in style/className of the Button component.

• for <button className={mergeClasses(eventPageClasses.paginationButton, eventPageClasses.paginationButtonActive)}>1</button>, the eventPageClasses.paginationButtonActive should be conditionally activated.

Suggestions

• To manage page number overflow create truncate props,
• The number button should have variations such as circular (perfect circle where the dimensions of button should be 1:1 - not like the picture above), button, no-shape, e.t.c..
• It is recommended to have a dedicated Toolbar component for pagination so it can store the basic component and a dropdown that can set data display limit (by passing a number Array )
• Last, but not the least, check comments for valuable ideas that can be incorporated to the component.

[bubulux]

I potentially also need this later in a project that I am currently rewriting with Fluent. If there are more who would benefit from this, or / and the Fluent team deems this to be a good contribution, I'd be glad to build and contribute to the project.