@knowmax/pager-fluentuiv9/dist/index.d.ts

Knowmax Pager with Fluent V9 user interface implementation.

import { FunctionComponent } from 'react';
import { ButtonProps } from '@fluentui/react-components';

/**
 * Represents the props that can be passed to the Pager component.
 */
interface IPagerProps {
    /**
     * The number of items to display per page.
     */
    pageSize: number;
    /**
     * The total number of results available.
     */
    totalResults: number;
    /**
     * The current active page. 1-based.
     */
    currentPage: number;
    /**
     * Callback function to handle page changes. Should accept the new page number.
     */
    onChange: (newPage: number) => void;
    /**
     * (Optional) The outerButtonsThreshold value that determines whether the outer navigation buttons are displayed to jump to the the first or last page.
     * This is relevant only for the 'text' display mode.
     */
    outerButtonsThreshold?: number;
    /**
     * (Optional) Specifies the display mode for navigation controls.
     * - 'text': Display page numbers as text.
     * - 'buttons': Display page numbers as buttons.
     */
    display?: 'text' | 'buttons';
    /**
     * Props that can be passed to customize the appearance and behavior of the button within the component.
     * If provided, these props will overwrite the default props defined for all the buttons.
     */
    buttonProps?: ButtonProps;
    /**
     * Props that can be passed to customize the appearance and behavior of the selected button representing the current within the component.
     * If provided, these props will overwrite the default props defined for all the buttons.
    */
    selectedButtonProps?: ButtonProps;
    /**
     * (Optional) Controls the maximum number of page-number buttons shown in the 'buttons' display mode.
     * If omitted, Pager keeps the current legacy behavior.
     */
    maxVisiblePageButtons?: number;
}

/**
 * Pager component provides navigation controls for page switching. It can display the navigation
 * as text or button blocks based on the `display` prop.
 * @param IPagerProps Props for Pager component.
 */
declare const Pager: FunctionComponent<IPagerProps>;

export { type IPagerProps, Pager };