Monday, September 4, 2017

Static Data Grid - 10K records with search, pagination, export options

By Hường Hana 9:30 PM Leave a Comment

Tested the following grids

  1. Datatables
  2. Angular UI grid
  3. Slick Grid
  4. Bootstrap

Observation:

  • Datatables and Bootstrap grid is very slow
  • Slick grid is not active as of now
  • Angular UI grid doesn't support or have all export options

What is the fastest data grid which has the following features

  1. search
  2. pagination
  3. html example
  4. export options - csv, copy to clipboard, png, word, excel, csv, png, xml

3 Answers

Answers 1

My current favorite table library is Bootstrap-Table

It has all the features you looking for and works quite well.

  1. HTML Example, Search, Pagination
  2. Export Options

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>    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet" />      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/extensions/export/bootstrap-table-export.min.js"></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:

  1. 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.

  2. 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.

Answers 2

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!

Answers 3

10K data very large for a normal client. Doesn't matter which js component. DataTables BootStrap and etc's very slow because client ram is not enough for showing 10k data.

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment