JSFiddle - React, Tailwind, and code Playground

HTML

<html lang="en">
 <head>
  <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
 <body>
 <h3 style="margin-left:21px">Paged transct transposed html table data</h3>
 <table id="myTable" border="1" style="border-collapse:collapse">
   <tr><th>crrntNmbr</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th></tr>
   <tr><th>OB</th><td>180</td><td>180</td><td>159</td><td>126</td><td>109</td><td>65</td><td>36</td></tr>
   <tr><th>amnt</th><td>-</td><td>21</td><td>33</td><td>17</td><td>44</td><td>29</td><td>17</td></tr>
   <tr><th>CB</th><td>180</td><td>159</td><td>126</td><td>109</td><td>65</td><td>36</td><td>19</td></tr>
   <tr><th>date</th> <td>19/01/01</td><td>19/02/02</td><td>19/03/03</td><td>19/07/03</td><td>19/04/04</td><td>19/05/05</td><td>19/06/08</td></tr>
  </table>
  <span id="pagination-container"></span>
 </body>
</html>

CSS

table
{
 border-collapse: collapse;
 width: 35%;
 margin-left:0.8cm;
}

th, td
{
 border: 1px solid #ddd;
 padding: 4px;
 text-align:center;
}
    
th
{
 background-color: #f2f2f2;
}

#pagination-container
{
 margin-left:1.5cm;
}

/*.pagination
{
 display: flex;
 list-style: none;
 margin: 10px 0;
 padding: 1;
} */

#pagination-container a
{
 margin-right:10px;    
}

#pgnInf
{
 margin-right: 8px;
}

/*.pagination li
{
 margin-right: 10px
 cursor: pointer

} */

JavaScript

onload=function()  
	{
	colsPerPage=3 
	currentPage=1
	table=document.getElementById('myTable')  

	totalCols = table.rows[0].cells.length - 1 // Exclude the header row
 	// calculate the total number of pages
  totalPages = Math.ceil(totalCols/colsPerPage)

	// Initialize the pagination container
 	paginationContainer=document.getElementById('pagination-container')

 	// Initial display of the first page
  displayPage(1)
 }

// Function to display the specified page
function displayPage(pageNumber)
{
 startIndex=(pageNumber-1)*colsPerPage + 1
 endIndex=Math.min(startIndex+colsPerPage-1,totalCols)

 for(i=0;i<table.rows.length;i++)
  for(j=1;j<=totalCols;j++)
   table.rows[i].cells[j].style.display=(j>=startIndex && j <= endIndex)?'':'none'
   
 currentPage=pageNumber
 updatePagination()
}

function updatePagination() // update pagination controls
{
 const paginationLinks=generatePaginationLinks()
 paginationContainer.innerHTML=''
 paginationContainer.appendChild(paginationLinks)
}

function generatePaginationLinks()
{
 fragment = document.createDocumentFragment()
 createLink = function(text,clickHandler)
		{
		 link=document.createElement('a')
		 link.href = '#'
		 link.textContent = text
		 link.addEventListener('click',function(event)
			{
			 event.preventDefault()
     	 clickHandler()
			})
		 return link
		 }

 first = createLink('|<First',function()
			{
			 displayPage(1)
			})
 fragment.appendChild(first)
 previous = createLink('<Previous',function()
			 {
			  if(currentPage>1)
			   displayPage(currentPage-1)
			 })
 fragment.appendChild(previous)

 pageInfo = document.createElement('span')
 pageInfo.id = 'pgnInf' 
 pageInfo.textContent = `${currentPage}/${totalPages}`
 fragment.appendChild(pageInfo)

 next = createLink('Next>',function()
			 {
			  if(currentPage<totalPages)
			   displayPage(currentPage + 1)
			 })
 fragment.appendChild(next)

 last=createLink('Last>|',function()
			  {
        displayPage(totalPages)
			  })
...