Rendering a Million Rows in React by Drawing

• Glide Data Grid

  17 3,414 9.0 TypeScript

  🚀 Glide Data Grid is a no compromise, outrageously react fast data grid with rich rendering, first class accessibility, and full TypeScript support.

  

What we are trying to build is a component that will help us to render a million rows in a ReactJs App. We make use of several techniques that are being used by other products such as google sheets and glide data grid app to achieve it.

• render-million-rows

  1 27 8.0 TypeScript

  A project to demonstrate rendering 1 million rows in React

💡 NOTE: This is a blog to explain all the key concepts required to build this project. You can have a look at the entire code in this repository.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• Papa Parse

  7 12,133 5.2 JavaScript

  Fast and powerful CSV (delimited text) parser that gracefully handles large files and malformed input

At the click of a button, the data is downloaded and parsed into an array of objects with the help of papa-parse library.

• vite

  787 64,769 9.9 TypeScript

  Next generation frontend tooling. It's fast!

  

/** * On component mount, initialze the worker. */ useEffect(() => { if (window.Worker) { // Refer to the Vite's Query Suffix syntax for loading your custom worker: https://vitejs.dev/guide/features.html#import-with-query-suffixes const worker = new CustomWorker(); workerRef.current = worker; } }, []);

Suggest a related project