ts-paginator

ts-paginator is an unopinionated TypeScript pagination hook for React or NextJS — designed to let you build your own pagination UI.

Args

Instantiate the useTsPaginator hook with the following arguments:

| Args | Description | | -------------------------------- | ----------------------------------------- | | totalRecordCount: number | The total count of records | | currentPage: number | The current page selection (zero indexed) | | rowsPerPage: 10 (default 10) | The current rows per page selection |

UI/UX Functions

| Function | Description | Args | Return Type | Example Returns | | ---------------------------------- | ------------------------------------------------------------------------------------------------------- | -------------------------- | ----------- | ---------------------------------- | | determinePaginationMessage | Calculates the pagination message | options?: { verb: 'Showing' OR 'Displaying', noun?: string, hideMessageOnZeroRecords: boolean } | string | Displaying 1 to 10 of 20 records | | determineRowsPerPageOptions | Calculates the rows per page options | | number[] | [10] | | determinePaginationPages | Calculates the pagination pages and uses 0 as a range placeholder for page ranges greater than three | | number[] | [1, 2] | | determinePaginationDisabledState | Can be used to disable the previous page or next page button | | boolean | true |

State Altering Functions

| Function | Description | Args | Return Type | | ------------------------------ | ------------------------------ | ----------------------------- | ----------- | | handleChangeTotalRecordCount | Changes the total record count | newTotalRecordCount: number | void | | handleChangeRowsPerPage | Changes the rows per page | newRowsPerPage: number | void | | handleChangePage | Changes the current page | newPage: number | void |

Usage

npm i --save ts-paginator

import useTsPaginator from 'ts-paginator';

function MyComponent() {
  const {
    totalRecordCount,
    rowsPerPage,
    currentPage,
    _determinePaginationMessage,
    _determinePaginationDisabledState,
    _determinePaginationPages,
    _determineRowsPerPageOptions,
    _handleChangeTotalRecordCount,
    _handleChangeRowsPerPage,
    _handleChangePage,
  } = useTsPaginator(20, 0);

  const message = _determinePaginationMessage({ verb: 'Showing', noun: 'entries' }); // Showing 1 to 10 of 20 entries

  return <p>{message}</p>;
}

Release Notes

1.6.0

• Adressed a shortcoming in _determinePaginationMessage not properly handling a totalRecordCount of 0
• Added an optional noun key to the _determinePaginationMessage options parameter
• Added an optional hideMessageOnZeroRecords key to the _determinePaginationMessage options parameter which, if set, returns the message as an empty string

Example

https://github.com/WNortier/ts-paginator-example