Make index change by click on button

Question

Logic of my page in a nutshell:

• .csv file uploads (I have an array in code so I don't need to upload it every time)
• code receives array from this .csv file that consists of [array, headers], where array - csv file data and headers - the first line of csv file and then it converts into object[]
• after clicking on submit button selection table appears where you can choose which columns will be static, and others will be dynamic, so if f.e. you have 20 columns in file, you choose 3 static columns, and the rest is building with arrows that will change 'table page' (Everything can be seen in result and console)

I've separated columns so I can call data by index from array:

• I have array: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
• After it is being separated: [['h1', 'h2'], ['h3', 'h4'], ['h5', 'h6]]

My logic of building a table is creating two arrows and set initial index to 0. Right arrow will do index++ and left arrow will do index--.

When building a table, I can do like:

const headers = [['h1', 'h2'], ['h3', 'h4'], ['h5', 'h6]]
let tableIndex = 0
/* code with index++ and index-- */
arr.forEach(obj => {
 const dynamicTableRow = document.createElement('tr')
 headers[tableIndex].forEach(header => {
 const dynamicTableDataCell = document.createElement('td')
 dynamicTableDataCell.innerHTML = obj[header]
 dynamicTableRow.appendChild(dynamicTableDataCell)
 })
 dynamicTableBody.appendChild(dynamicTableRow)
 })

So the array that I actually need will be called by index - headers[tableIndex]

Full working code is here:

Updated codepen - here

My question is: how to make index change by clicking on buttons?

I had 2 variants how to make it:

• Add onclick functions to buttons, but I don't really understand how to make it correctly and workable
• Import buttons to js code, and do like

buttonPrevious.onclick = () => {
 tableIndex--
 /* render table with updated index */
}
buttonNext.onclick = () => {
 tableIndex++
 /* render table with updated index */
}

But this method is really not good, because I will render table 3 times - after headers selection and after click on one of the buttons

• Peter Pointer: Just don't do the arr.forEach(obj => { then, right? There seems to be a typo in your headers example code but I think that's just a mistake when posting here? 'h6 should be 'h6' so the code highlighting works correctly.
• Lvasche: this case with ‘h6 instead of ‘h6’ was type by my own in the question. With this thing my code works fine. Question is not in that

Answer 1

So the answer is much easier than I thought. I placed my dynamic table render into a function, and then created 2 eventListeners for each button.

Full working code is on codepen in the question

buttonPrevious.onclick = () => {
 const copy = [...dynamicTableKeys]
 const headers = getSplicedHeaders(copy)
 console.log(dynamicTableKeys)
 console.log(headers)
 if (tableIndex === 0 && tableIndex > -1)
 tableIndex = 0
 else
 tableIndex--
 renderDynamicTable(tableIndex, dynamicTableKeys, headers)
 }
 buttonNext.onclick = () => {
 const copy = [...dynamicTableKeys]
 const headers = getSplicedHeaders(copy)
 console.log(dynamicTableKeys)
 console.log(headers)
 console.log(tableIndex)
 if (tableIndex === headers.length - 1)
 tableIndex === headers.length - 1
 else
 tableIndex++
 console.log(tableIndex)
 renderDynamicTable(tableIndex, dynamicTableKeys, headers)
 }