diff --git a/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js b/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js index ccb960b14a9f719eb08d7408a63b6c32ae8242b3..3fbebefc8bc019b84d613c4472574d169bb1b78f 100644 --- a/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js +++ b/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js @@ -214,11 +214,13 @@ function Table({ columns, data, defaultheader, optionalheader }) { })} </tbody> </table> + + </div> <div className="pagination" style={{marginTop:"10px"}}> - <button onClick={() => gotoPage(0)} disabled={!canPreviousPage} style={{marginLeft:"3px",backgroundColor:"#c8c8c8"}}> + <button onClick={() => gotoPage(0)} disabled={!canPreviousPage} title="Go to first page"> {'<<'} </button>{' '} - <button onClick={() => previousPage()} disabled={!canPreviousPage} style={{marginLeft:"3px",backgroundColor:"#c8c8c8"}}> + <button onClick={() => previousPage()} disabled={!canPreviousPage} title="Go to previous page"> {'<'} </button>{' '} <span style={{marginLeft:"5px"}}> @@ -227,10 +229,10 @@ function Table({ columns, data, defaultheader, optionalheader }) { {pageIndex + 1} of {pageOptions.length} </strong>{' '} </span> - <button onClick={() => nextPage()} disabled={!canNextPage} style={{marginLeft:"5px",backgroundColor:"#c8c8c8"}}> + <button onClick={() => nextPage()} disabled={!canNextPage} title="Go to next page"> {'>'} </button>{' '} - <button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage} style={{marginLeft:"3px",backgroundColor:"#c8c8c8"}}> + <button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage} title="Go to last page"> {'>>'} </button>{' '} <select @@ -247,7 +249,6 @@ function Table({ columns, data, defaultheader, optionalheader }) { ))} </select> </div> - </div> </> ) } diff --git a/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_viewtable.scss b/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_viewtable.scss index 1ff00e3767bed05640a6646c99d5dc1e391e481e..d0fbd873bc26c3e701607d8181d3fb04e8ef1ad5 100644 --- a/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_viewtable.scss +++ b/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_viewtable.scss @@ -51,3 +51,20 @@ width: 175px; } +.pagination button { + margin-left: 3px; + background-color: #005b9f; + border: 1px solid #005b9f; + border-radius: 4px; + color: white; + font-weight: 900; +} + +.pagination button:disabled { + margin-left: 3px; + background-color: #c8c9c9; + border: 1px solid #c8c9c9; + border-radius: 4px; + color: white; +} +