Created
May 11, 2021 13:26
-
-
Save guptasanchit90/9b555d34df64280df8046ac746a8ffe9 to your computer and use it in GitHub Desktop.
React bootstrap - Table and Client side Validation view
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment