bootstrap-table.html

<style>
  .demo-wrap h2 {
    text-decoration: underline;
  }
  .demo-wrap{
    margin-bottom:8em;
  }
  .table-wrap{
    max-width: 1026px;
    height: 350px;
    display:inline-block;
    margin-bottom:5em;
  }
  bootstrap-table table {
    table-layout: fixed;
  }
</style>


<script type="text/stache" class="demo" can-autorender>
  <can-import from="table-testing/components/bootstrap-table/" />

  <div class="demo-wrap">
    <h2>{{demoVm.title}}</h2>

    <div class="table-wrap">
      <bootstrap-table {table-data}="demoVm.tableData" {(performance-map)}="demoVm.performanceMap" />
    </div>



  </div>


  <div class="performance-wrap">
    <div class="render-time metric">
      <label>
        Render Time:
        </label>
      <span>
        {{demoVm.performanceMap.renderTime}}
      </span>
    </div>

    <div class="average-page-duration metric">
      <label>
        Average Page Duration:
        </label>
      <span>
        {{demoVm.performanceMap.pageDurationAverage}}
      </span>
    </div>

    <div class="average-sort-duration metric">
      <label>
        Average Sort Duration:
        </label>
      <span>
        {{demoVm.performanceMap.sortDurationAverage}}
      </span>
    </div>
  </div>




</script>

<script src="../../../node_modules/steal/steal.js" main="@empty">
  import can from 'can';
  import 'can/view/autorender/';
  import 'can/map/define/';
  // import getMockData from 'table-testing/data/getMockData';
  import getMockData from 'table-testing/data/real-getMockData';
  import initFPSCounter from 'table-testing/util/fps';
  import PerformanceMap from 'table-testing/util/performance-map';

  initFPSCounter();

  var DemoVM = can.Map.extend({
      define: {
        title: {},
        tableData: {},
        performanceMap: {
          value: new PerformanceMap()
        }
      }
    }),
    vm = can.viewModel('.demo');


  var startIndex = 0,
      refreshIntervalDuration = 10000,
      // refreshIntervalDuration = 10000,
      cols = 20, //this is not used with real data
      rows = 20000,
      maxRows = 40000,
      // maxRows = 50000,
      mockData = getMockData(cols,rows, startIndex),
      demoVm = new DemoVM({
        title: 'Demo for bootstrap-table',
        tableData: mockData
      }),
      refreshInterval = setInterval(() => {
        // debugger;
        startIndex += rows;
        if(startIndex >= maxRows){
          clearInterval(refreshInterval);
          return;
        }
        let newData = getMockData(cols, rows, startIndex),
            tableData = demoVm.attr("tableData").attr();

        tableData.rows.push.apply(tableData.rows, newData.rows);
        demoVm.attr("tableData", tableData);
      }, refreshIntervalDuration);

  vm.attr({
    demoVm: demoVm
  });

</script>