@bdt-component-library/pagination NPM

Pagination Component

About

This is a component published as its own package from our component library monorepo: https://github.com/BenefitsDataTrust/ui-components. Setup instructions, as well as higher-level goals and concerns can be found from the main project README.

Description

Handles display of pagination according to style guide conventions.

https://zeroheight.com/990ea04ab/p/807e1f-pagination

API

prop	type	required	default	explanation
className	string	no	n/a	Adds an optional classname to the main component container
rowsPerPageOptions	array(object("name": string, "value": number))	yes	no	The list of options for how many rows to display per page
rows	array(object)	yes	no	Data consisting of an array of objects to paginate
updateDisplayRows	function(array(object))	yes	no	The callback function to fire when rows are updated for display on pagination action, which passes in the row data as an array of objects
totalRows	number	yes	no	The total number of rows in the row data (we require this instead of deriving it from the `rows` prop because it allows server-side pagination which would obscure the total number from just those passed in at any given point)
serverSideNext	function("page": number, "rowsPerPage": number, "update": function("newRows": array(object))) OR false	no	false	Allows server-side functionality by enabling actions during the page update lifecycle, and firing the component's internal update function based on whatever conditions are needed (like in the success of a promise resolution)