Menu
Tested the following grids
Observation:
What is the fastest data grid which has the following features
591
My current favorite table library is Bootstrap-Table
It has all the features you looking for and works quite well.
To achieve decent loading times on 10k+ records you will most likely need to use AJAX and/or Pagination.
Here is a snippet showing 5000 results working fine:
<html>
<head>
<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<!-- bootstrap-table-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.css" integrity="sha512-5RNDl2gYvm6wpoVAU4J2+cMGZQeE2o4/AksK/bi355p/C31aRibC93EYxXczXq3ja2PJj60uifzcocu2Ca2FBg==" crossorigin="anonymous" />
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.js" integrity="sha512-Wm00XTqNHcGqQgiDlZVpK4QIhO2MmMJfzNJfh8wwbBC9BR0FtdJwPqDhEYy8jCfKEhWWZe/LDB6FwY7YE9QhMg==" crossorigin="anonymous"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.3/extensions/export/bootstrap-table-export.min.js" integrity="sha512-cAMZL39BuY4jWHUkLWRS+TlHzd/riowdz6RNNVI6CdKRQw1p1rDn8n34lu6pricfL0i8YXeWQIDF5Xa/HBVLRg==" crossorigin="anonymous"></script>
<!-- font-awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" integrity="sha512-RXf+QSDCUQs5uwRKaDoXt55jygZZm2V++WUZduaU/Ui/9EGp3f/2KZVahFZBKGH0s774sd3HmrhUy+SgOFQLVQ==" crossorigin="anonymous"></script>
<!-- jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
</head>
<body>
<table data-toggle="table"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-show-export="true"
data-minimum-count-columns="2"
data-show-pagination-switch="true"
data-pagination="true"
data-id-field="id"
data-page-list="[10, 25, 50, 100, ALL]"
data-show-footer="false"
data-side-pagination="client"
data-url="https://jsonplaceholder.typicode.com/photos">
<thead>
<tr>
<th data-field="id">Id</th>
<th data-field="title">Title</th>
<th data-field="url">URL</th>
<th data-field="thumbnailUrl">Thumbnail URL</th>
</tr>
</thead>
</body>
</html>So a few things are happening here that are improving performance:
Since the data is flowing more naturally to the library we get a nice "Loading ..." which makes users all warm and fussy on the inside. If not only because it is giving feedback to the user. Therefore we are willing to wait a few extra seconds.
We are switching from a HTML table with data in it to a JSON object.
When using HTML for a data source the page has to fully render an overly verbose representation of the data (this blocks JavaScript form loading). Then the library loads and starts parsing this data (5,000 rows X 10 columns = 50,000 elements). Then the library has to apply its logic to the DOM. Depending on how the code is written this would mean processing all the results 3x.
OR
When using JSON (JavaScript Object Notation) the HTML page is very light so it finishes rendering immediately. Also the data is in a native language to JavaScript and therefore it is read directly into a JavaScript object. The library creates a object and binds it to the content of the table. Meaning that it takes 1 object to be added for the table to start rendering.
Essentially we are adding parallelism to the rendering of the results. So all 3 steps are still happening but in the former case each step has to wait for the next. Whereas in the latter case the steps are happening in parallel. And since we feel its done loading as soon as it renders 1 row it feels much faster.
Added exporting per your request but the actual library errors probably a limitation of the snippet tool.
For Bootstrap v4 start, we use Font Awesome as the default icons, so need to import Font Awesome.
You can find the newest library from cdnjs
181
Not sure if you are able to use React but have you checked out https://react-table.js.org or https://facebook.github.io/fixed-data-table ? They both seem to meet everything on your list, except for export.
Export into different formats is hard to do generically, so there are bunch of different projects on https://www.npmjs.com that specifically deal with exporting data into different formats.
Good luck!
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
