業務システムでは大量のデータを一覧表示して欲しいというニーズがよく出ます。しかしあまり大量のデータを描画すると、それだけレンダリングに時間がかかったり、スクロールも困難になります。 そこで使ってみたいのがSmart Table Scrollです。なんと100万行以上のレコードも高速に描画できるJavaScriptライブラリです。

Smart Table Scrollの使い方

Smart Table Scrollのデモです。3カラムでの表示例となっています。

一番下は100万です（インデックスは0からはじまっています）。

実際のデモです。スムーズに動いているのが分かるかと思います。

Smart Table Scrollの種としては、描画しているデータ量にあります。

var table = new SmartTableScroll({

  // DOM element to render to
  el: document.querySelector('#some-table'),

  // Array of objects that will be used to build and update each row
  data: [ { row1Data }, { row2Data } ... ],

  // Function used to calculate the height of each row
  heightFn: function(rowData) { return rowData.hasPicture ? 20 : 10; },

  // Used when first creating dom nodes for each row
  buildRow: function(rowData) {
    var node = document.createElement('div');
      node.classList.add('test-row');
      node.innerHTML =
        "<div class='test-col index'>"+rowData.index+"</div>"+
        "<div class='test-col color'>"+rowData.color+"</div>"+
        "<div class='test-col random'>"+rowData.random+"</div>";
    return node;
  },

  // Used to yield an existing row to a new element in `data`
  updateRow: function(rowData, rowEl) {
    rowEl.childNodes[0].textContent = rowData.index;
    rowEl.childNodes[1].textContent = rowData.color;
    rowEl.childNodes[2].textContent = rowData.random;
  },

  // (Optional) How many rows to create nodes for
  //  this needs to be > than the max number of rows that can fit on screen (2x this value seems right)
  //  play around, this will have performance implications
  availableNodes: 200,
});

のように高さを指定した上で表示されているデータだけを描画しているのでスクロールバーは長くても実際にはレンダリングはないので軽くて済むという方法です。すべてのデータを同じ高さという訳ではないので、細かく制御できる点も便利そうです。後は一覧ではあるものの、テーブルタグを使っていない点も大事です。

Smart Table ScrollはHTML5/JavaScript製のオープンソースソフトウェア（MIT License）です。

Smart Table Scroll cmpolis/smart-table-scroll