I am trying to write code in React in order to dynamically, i.e., without knowing the data in advance, render big tables (like 10.000 rows X 350 cols) starting from a csv file that is uploaded trough an input form.
I wrote the code that you can find below. It works with limited tables, e.g. 2000 rows x 350 cols. With the target table (10.000 x 350) Chrome stop the execution telling me 'Paused before potential out-of-memory crash' and, after that, the application crashes. Microsoft Edge is not able to run the application too. There is a way to improve my code in order to avoid that?
Thank you so much in advance!
populateRows() {
function populateCols(cols, lineNumber) {
let result = [];
for(let i=0; i<cols.length; i++) {
if(lineNumber === 0){
result.push(<th key={lineNumber + '_' + i}>{cols[i]}</th>);
}
else {
result.push(<td key={lineNumber + '_' + i}>{cols[i]}</td>);
}
}
return result;
}
function populateBody(lines) {
const result = [];
for(let line = 1; line < lines.length; line++){
result.push(<tr key={'line_' + line}>{populateCols(lines[line].split(','), line)}</tr>);
}
return result;
}
let result = [];
result.push(<thead key={"thead"}><tr key={'headRow'}>{populateCols(this.props.cols, 0)}</tr></thead>);
result.push(<tbody key={"tbody"}>{populateBody(this.props.lines)}</tbody>);
return result;
}
render() {
return (
<div>
<p className={'noBoardersP'}><b> {this.props.caption} </b></p>
<div className="tableDiv">
<table>
{this.populateRows()}
</table>
</div>
</div>
);
}
