@itwin/itwinui-react/esm/core/Table/TablePaginator.d.ts

A react component library for iTwinUI

import * as React from 'react';
import type { CommonProps } from '../../utils/index.js';
import type { TablePaginatorRendererProps } from './Table.js';
export type TablePaginatorProps = {
    /**
     * Control whether focusing tabs (using arrow keys) should automatically select them.
     * Use 'manual' if tab panel content is not preloaded.
     * @default 'manual'
     */
    focusActivationMode?: 'auto' | 'manual';
    /**
     * Array of possible page size options. When provided then shows the range of rows within the current page and page size selection.
     * @example
     * <TablePaginator
     *   // ...
     *   pageSizeList={[10, 25, 50]}
     * />
     */
    pageSizeList?: number[];
    /**
     * Object of labels and functions used for pagination localization.
     */
    localization?: {
        /**
         * Function that returns a label for the page size selector.
         * @default (size: number) => `${size} per page`
         */
        pageSizeLabel?: (size: number) => string;
        /**
         * Function that returns a label for the range of rows within the current page and the length of the whole data.
         * @default
         *  (startIndex, endIndex, totalRows, isLoading) =>
         *    isLoading
         *      ? `${startIndex}-${endIndex}…`
         *      : `${startIndex}-${endIndex} of ${totalRows}`;
         */
        rangeLabel?: (startIndex: number, endIndex: number, totalRows: number, isLoading: boolean) => string;
        /**
         * A label for previous page button. Used for accessibility attribute.
         * @default 'Previous page'
         */
        previousPage?: string;
        /**
         * A label for next page button. Used for accessibility attribute.
         * @default 'Next page'
         */
        nextPage?: string;
        /**
         * Function that returns a label for page selector buttons. Used for accessibility attribute.
         * @default (page: number) => `Go to page ${page}`
         */
        goToPageLabel?: (page: number) => string;
        /**
         * A label shown next to the page size selector. Use `null` to hide.
         * @default 'Rows per page'
         */
        rowsPerPageLabel?: string | null;
        /**
         * Function that returns a label shown in the bottom left to notify how many rows are selected.
         * Only used if multi-selection mode is enabled.
         * @default (totalSelectedRowsCount: number) => `${totalSelectedRowsCount} ${totalSelectedRowsCount === 1 ? 'row' : 'rows'} selected`;
         */
        rowsSelectedLabel?: (totalSelectedRowsCount: number) => string;
    };
} & TablePaginatorRendererProps & Omit<CommonProps, 'title'>;
/**
 * Table paginator component. Recommended to pass to the `Table` as `paginatorRenderer` prop.
 * Passing `props` from `paginatorRenderer` handles all state management and is enough for basic use-cases.
 * @example
 * <Table
 *   // ...
 *   paginatorRenderer={(props) => <TablePaginator {...props} />}
 * />
 */
export declare const TablePaginator: (props: TablePaginatorProps) => React.JSX.Element | null;