CODEWITHSUNDEEP
javascripthtmlreactjs
munky
munky

Reputation: 75

Dynamically create big tables with react

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>
        );
    }

Upvotes: 0

Views: 196

Answers (2)

Mark
Mark

Reputation: 1679

React virtualized is made for this exact reason.

https://github.com/bvaughn/react-virtualized

And a working example

https://bvaughn.github.io/react-virtualized/#/components/List

Upvotes: 1

abhishake
abhishake

Reputation: 771

It is always better to use the library. Use the React Table library with pagination. With it you can render as many rows as possible but with max 100 rows visible at a time.

Upvotes: 1

Related Questions