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) |