How to display a spreadsheet/csv file in a website with react

Question

I am trying to display a spreadsheet or a CSV file on a website using react.js The files are uploaded on the website and I just want to display the files inputted to the website. I have tried the popular meduim.com solution but it does not work for me, and it does not do exactly what I'm looking for.

I am not aware of the contents of the file which is uploaded to the website, but I just want to display whatever is uploaded to the website.

• nyjC1v2Pu8: Does this answer your question? Loading a CSV file into an HTML table using javascript
• greens trial: @kcyq98 no it only shows for csv files, and the file which is either going to be a xlsx/csv gets uploaded to the website, so I want to display what was uploaded and I do not know the contents of what is uploaded.

Answer 1

EDIT: If you want to parse xls file, you will 100% need a library. I've made a uploader that take excel before and parsing a xls file yourself is just a non starter. Look into this one.

---

There are many different library that you can use to do this but if you want to do this yourself, you can parse the csv into an array of array, then use map to create html element.

return (
 <table>
 csvArray.map(row => {
 return <tr><td>row[0]</td></tr>
 })
 </table>
)

• greens trial: is csvArray a library function? because that throws an error in my code
• nyjC1v2Pu8: csvArray is what you get once you parse the csv file. And given that you will need to handle xls files, you will need a library like xls-parser.
• nyjC1v2Pu8: @greenstrail you can also just use a datagrid library that can handle xls, like ag-grid.com/react-data-grid/excel-import