Details
Description
The number of tables made in PF-React is growing and they all shared some common logic, particularly the Pagination:
const selectPerPage = (_event, selectedPerPage) => { url.searchParams.set('per_page', selectedPerPage) url.searchParams.delete('page') window.location.replace(url.toString()) } const goToPage = (page) => { url.searchParams.set('page', page) window.location.replace(url.toString()) } const Pagination = ({ variant }: { variant?: string }) => { const perPage = url.searchParams.get('per_page') const page = url.searchParams.get('page') return ( <PFPagination itemCount={metricsCount} perPage={Number(perPage) || 20} page={Number(page)} onPerPageSelect={selectPerPage} onNextClick={(_ev, page) => goToPage(page)} onPreviousClick={(_ev, page) => goToPage(page)} onFirstClick={(_ev, page) => goToPage(page)} onLastClick={(_ev, page) => goToPage(page)} onPageInput={(_ev, page) => goToPage(page)} perPageOptions={[10, 20].map(n => ({ title: String(n), value: n }))} variant={variant} /> ) }
Tables using this code so far:
- MetricsTable
- Products' IndexPage
- BackendApis' IndexPage
- ApplicationPlansTable