JavaScript Data Grid For Millions of Rows

JavaScript data grid for millions of rows

(Disclaimer: I am the author of SlickGrid)

UPDATE
This has now been implemented in SlickGrid.

Please see http://github.com/mleibman/SlickGrid/issues#issue/22 for an ongoing discussion on making SlickGrid work with larger numbers of rows.

The problem is that SlickGrid does not virtualize the scrollbar itself - the scrollable area's height is set to the total height of all the rows. The rows are still being added and removed as the user is scrolling, but the scrolling itself is done by the browser. That allows it to be very fast yet smooth (onscroll events are notoriously slow). The caveat is that there are bugs/limits in the browsers' CSS engines that limit the potential height of an element. For IE, that happens to be 0x123456 or 1193046 pixels. For other browsers it is higher.

There is an experimental workaround in the "largenum-fix" branch that raises that limit significantly by populating the scrollable area with "pages" set to 1M pixels height and then using relative positioning within those pages. Since the height limit in the CSS engine seems to be different and significantly lower than in the actual layout engine, this gives us a much higher upper limit.

I am still looking for a way to get to unlimited number of rows without giving up the performance edge that SlickGrid currently holds over other implementations.

Rudiger, can you elaborate on how you solved this?

Handle 1 million records in Kendo UI grid

If you use SQL server, you can take the paging & filtering object information through the controller read and pass that into a dynamic sql procedure.

You'll have to pass in the filters and paging info as parameters. The paging params can be used as offset / fetch for page size and number that you need. You'll want to include the filtering params to make sure everything stays in the right order.

This allows you to pull the data in chunks per page instead of pulling the entire data set each time.

Set rows to datagrid React

Updating a constant will not trigger any rerender of your component. So you need to store the rows in a local state:

Instead of :

  let rows: any[] = [];

You should have:

const [rows,setRows] = useState<any[]>([])

How to store and populate data into dataGrid or table using reactJs and reactHooks?

I checked the code there are multiple of errors, I fixed them all in this fork: https://codesandbox.io/s/sencrypapp-forked-kon8qh?file=/src/Send.jsx

Most are related to typization problems so maybe TS will be a good tool for you.
The IDs you were giving were the same ID for all items, I changed the IDs to numbers so it works, if you want date IDs you should add that to the data in the handleSubmit method.

How to handle huge table?

Classic example of where to use ajax.

Use javascript in combination with a server side script.

---

Related Topics