@bdt-component-library/pagination

Pagination component

Usage no npm install needed!

<script type="module">
  import bdtComponentLibraryPagination from 'https://cdn.skypack.dev/@bdt-component-library/pagination';
</script>

README

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.

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)