Styles for active page in React JhiPagination component

user_11630791 0
Viewed 518

JhiPagination is abstract component generated with jhipster. it does have a activePage prop that I defined just like the default generated entity page does, but the resulted pagination doesn't have the current active page class like as shown on the picture.

Did anyone encounter such limitation before?

pagination probleme

<JhiPagination
    items={getPaginationItemsNumber(totalStreamsGateways, size)}
    activePage={ activePage + 1 }
    onSelect={this.handlePagination}
    maxButtons={5}
/>
jhipster reactjs pagination
2 Answers

As of version 0.9, the component doesn't contain any code to highlight the active page.

The component comes from react-jhipster. In the source code, you can see that the activePage props is only used to:

  • compute which page numbers should be displayed;
  • enable or disable the first page, previous, next and last page links.
user_10217200

What I did was overriding the original component and create my own pagination class as below.

custom-pagination.tsx

import {JhiItemCount, JhiPagination} from "react-jhipster";
import {PaginationItem, PaginationLink} from 'reactstrap';

class CustomPagination extends JhiPagination {
  displayPaginationItem = i => {
    const {activePage} = this.props;
    return (
      <PaginationItem className={activePage === i + 1 ? " current" : ''} key={i}>
        <PaginationLink onClick={this.updateActivePage(i + 1)}>
          {i + 1}
        </PaginationLink>
      </PaginationItem>
    )
  };
}

custom-pagination.css

.current .page-link {
    /* your style on active element */
}

Finally, I used <CustomPagination /> component instead of <JhiPagnination />

TRiNE_38044220
Related