Edit - Stack Overflow

You are not logged in. Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

Required fields*

Rev

Title*

Body*

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][1]

**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


 [1]: https://codepen.io/Lvasche/pen/jOpXrYJ

Draft saved

Draft discarded

CollectivesTM on Stack Overflow