React bootstrap - Table and Client side Validation view

TableComponent.jsx

import PropTypes from "prop-types";
import React, { useEffect, useState } from "react";
import { Container, Pagination, Table } from "react-bootstrap";
import "./TableComponent.scss";

/**
 *
 * @param onRowSelect : When User clicks on a Row, send event back to parrent component with Row data
 * @param rows : Array of Row Data
 * @param cols : Array of Col Data
 * @returns : A Table view based on the provided Information
 */
const TableView = ({ t, onRowSelect, rows, cols }) => {
  return (
    <Table responsive bordered hover>
      <thead>
        <tr>
          {cols.map((col) => (
            <th>{col.title}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {rows &&
          rows.map((row) => {
            const rowCols = Object.values(row);
            return (
              <tr onClick={() => onRowSelect(row)}>
                {rowCols.map((rowCol) => (
                  <td>{rowCol}</td>
                ))}
              </tr>
            );
          })}
      </tbody>
    </Table>
  );
};

/**
 *
 * @param pageCount: Total number of pages
 * @param currentPage: Current Page Number
 * @param onPageSelect: When user selects one of the Page
 * @returns
 */
const PaginationView = ({ t, pageCount, currentPage, onPageSelect }) => {
  const [currVisiblePage, setCurrVisiblePage] = useState(0);

  useEffect(() => {
    setCurrVisiblePage(currentPage);
  }, [currentPage]);

  return (
    <Pagination>
      <Pagination.First
        disabled={currVisiblePage == 0}
        onClick={() => onPageSelect(0)}
      />
      <Pagination.Prev
        disabled={currVisiblePage == 0}
        onClick={() => onPageSelect(currVisiblePage - 1)}
      />
      {Array.from(Array(pageCount).keys()).map((page) => {
        return (
          <Pagination.Item
            onClick={() => onPageSelect(page)}
            key={page}
            active={currVisiblePage === page}>
            {page + 1}
          </Pagination.Item>
        );
      })}
      <Pagination.Next
        disabled={currVisiblePage == pageCount - 1}
        onClick={() => onPageSelect(currVisiblePage + 1)}
      />
      <Pagination.Last
        disabled={currVisiblePage == pageCount - 1}
        onClick={() => onPageSelect(pageCount - 1)}
      />
    </Pagination>
  );
};

/**
 * Exposed Table Component
 * @param {*} props : See Prop types for more details
 * @returns
 */
const TableComponent = (props) => {
  const [rows, setRows] = useState([]);
  const [currentPageNumber, setCurrentPageNumber] = useState(0);

  useEffect(() => {
    if (props.pagination) {
      const { clientSidePagination, rowsPerPage } = props.pagination;
      if (clientSidePagination) {
        setRows(
          props.rows.slice(
            currentPageNumber * rowsPerPage,
            currentPageNumber * rowsPerPage + rowsPerPage
          )
        );
      }
    } else {
      setRows(props.rows);
    }
  }, [currentPageNumber]);

  return (
    <Container>
      <TableView {...props} rows={rows} />

      {props.pagination && (
        <PaginationView
          pageCount={Math.ceil(
            props.rows.length / props.pagination.rowsPerPage
          )}
          currentPage={currentPageNumber}
          onPageSelect={(pageNumber) => setCurrentPageNumber(pageNumber)}
        />
      )}
    </Container>
  );
};

TableComponent.propTypes = {
  rows: PropTypes.arrayOf(PropTypes.object).isRequired,
  cols: PropTypes.arrayOf(
    PropTypes.shape({
      title: PropTypes.string,
    }).isRequired
  ),
  onRowSelect: PropTypes.func,
  pagination: PropTypes.shape({
    rowsPerPage: PropTypes.number.isRequired,
    clientSidePagination: PropTypes.bool,
    onPageNumber: PropTypes.func.isRequired,
  }),
};

export default TableComponent;