This project is a demonstration of how you can render 1 million rows in a table by drawing. I made use of the canvas API to achieve this task. I have also demonstrated this project as a part of the talk in Reactjs-pune meetup. Details about the talk can be found below:
- Slides - Render Million Rows.pdf
- Talk
I took this repository as my data source - https://github.com/datablist/sample-csv-files. It contains sample CSV data for a range of rows, i.e., 0.5M, 1M rows, etc.
I got inspired to do this project when I was exploring how Google Sheets are able to render 0.5 million rows. I also got inspired by the Glide Apps Data Grid library, which helped me understand the concept of canvas drawing: https://github.com/glideapps/glide-data-grid.
I took an approach of drawing each and every row of a CSV file onto a target canvas that displays these rows. Once the CSV data is loaded, a worker is created that creates an offscreen canvas based on the scroll top value. This offscreen canvas will have 100 rows drawn onto it.
I make use of the drawImage function to blit the rows from the offscreen canvas to the target canvas. This happens on every scroll.
Here is a short video that demonstrates ~1 Million rows drawn:
1M_rows.mov
Also, I was able to render ~2 Million rows as well:
2M_rows.mov
- Improve the current blitting approach by self-blitting the target canvas.