at the end of the day, it was inevitable

frontend/app/components/common/Pager/PageSelector.js

@@ -0,0 +1,34 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { PaginationItem, PaginationLink } from 'reactstrap'
+
+export default class PageSelector extends React.Component {
+  static propTypes = {
+    pagerAction: PropTypes.func.isRequired,
+    index: PropTypes.number.isRequired,
+    isEllipsis: PropTypes.bool.isRequired,
+    isCurrent: PropTypes.bool.isRequired
+  };
+
+  onClick = () => {
+    !this.props.isCurrent &&
+      this.props.pagerAction({ currentPage: this.props.index })
+  };
+
+  render () {
+    if (this.props.isEllipsis) {
+      return <span className="table-pager__ellipsis">. . .</span>
+    } else {
+      // const currentClass = this.props.isCurrent
+      //   ? ' table-pager__page--current'
+      //   : ''
+      return (
+        <PaginationItem active={this.props.isCurrent}>
+          <PaginationLink onClick={this.onClick}>
+            {this.props.index}
+          </PaginationLink>
+        </PaginationItem>
+      )
+    }
+  }
+}