import React from 'react' ; import { EuiFlexGroup , EuiFlexItem , EuiTablePagination } from '@elastic/eui' ; interface TablePaginationBarProps { itemLabel ? : string ; itemsPerPage ? : number ; totalPages : number ; totalItems : number ; activePage ? : number ; hidePerPageOptions ? : boolean ; hideLabelCount ? : boolean ; clearFiltersLink ? : React . ReactElement ; onChangePage ( nextPage ) : void ; } const MAX_PAGES = 100 ; export const TablePaginationBar = ( { itemLabel = 'Items' , itemsPerPage = 10 , totalPages , totalItems , activePage = 1 , hidePerPageOptions = true , hideLabelCount = false , onChangePage , clearFiltersLink , } ) => { const currentPage = activePage - 1 ; const showAllPages = totalPages < MAX_PAGES ; const pageRangeText = ( ) => { const rangeEnd = activePage === totalPages ? totalItems : itemsPerPage * activePage ; const rangeStart = currentPage * itemsPerPage + 1 ; const rangeEl = ( < strong > { rangeStart } - { rangeEnd } < /strong>); const totalEl = < strong > { totalItems . toLocaleString ( ) } < /strong>; return ( < EuiFlexGroup alignItems = "center" justifyContent = "flexStart" > < EuiFlexItem grow = { false } > < div > Showing { rangeEl } { showAllPages && ( < > { ' ' } of { totalEl } { itemLabel } < />)} < /div> < /EuiFlexItem> < EuiFlexItem > { clearFiltersLink } < /EuiFlexItem> < /EuiFlexGroup>); } ; return ( < EuiFlexGroup alignItems = "center" > { ! hideLabelCount && < EuiFlexItem > { pageRangeText ( ) } < /EuiFlexItem>} < EuiFlexItem > < EuiTablePagination hidePerPageOptions = { hidePerPageOptions } activePage = { currentPage } itemsPerPage = { itemsPerPage } pageCount = { showAllPages ? totalPages : MAX_PAGES } onChangePage = { onChangePage } / > < /EuiFlexItem> < /EuiFlexGroup>); } ;