2

I have a large size of data to show as a table on my page and render a table with all the data is too heavy. So I want to show it as a virtual table that render cells only when necessary.

I know there is a way to fix the header and scroll the tbody, but by that way header widths must be fixed while I want the width could automatically changed according to the data.

So I consider to reuse a fixed number of rows to solve this problem.

I work this out, which works for mouse wheel, but I also want a scrollbar so that users without a mouse wheel could also scroll it. 

function updateTable(event) {
  var topIdTd = document.getElementById('data-0-id');
  var topId = parseInt(topIdTd.innerHTML);
  topId += event.deltaY;
  for (var i = 0; i < 4; i++) {
    document.getElementById('data-' + i + '-id').innerHTML = topId + i;
    document.getElementById('data-' + i + '-value').innerHTML = 'looooooooooooooooooooong-value-' + topId + i;
  }
  return false;
}
var tbody = document.getElementById('table-body');
tbody.onwheel = updateTable;
table {
  border-collapse: collapse;
}

table, td, th {
  border: 1px solid gray;
}

th {
  background-color: #eef;
}
<table>
  <thead>
    <tr>
      <th>
        ID
      </th>
      <th>
        Value
      </th>
    </tr>
  </thead>
  <tbody id="table-body">
    <tr>
      <td id="data-0-id">
        0
      </td>
      <td id="data-0-value">
        looooooooooooooooooooong-value-0
      </td>
    </tr>
    <tr>
      <td id="data-1-id">
        1
      </td>
      <td id="data-1-value">
        looooooooooooooooooooong-value-1
      </td>
    </tr>
    <tr>
      <td id="data-2-id">
        2
      </td>
      <td id="data-2-value">
        looooooooooooooooooooong-value-2
      </td>
    </tr>
    <tr>
      <td id="data-3-id">
        3
      </td>
      <td id="data-3-value">
        looooooooooooooooooooong-value-3
      </td>
    </tr>
  </tbody>
</table>

How can I create a scrollbar on an unscrollable element?

Or is there any better solutions for this problem?

Programus
  • 338
  • 2
  • 16
  • 1
    Very simple solution for this problem would be replace scrolling with pagination. It's much simpler to implement and it would work faster than scrolling. – Stalinko Feb 11 '20 at 08:36
  • does this help you? [add scroll bar to table body](https://stackoverflow.com/questions/17450861/add-scroll-bar-to-table-body) and yah, _pagination_ is more efficient. but i respect your idea, refer the link given hope its help you. – Citizen Patrol Feb 11 '20 at 09:06
  • https://mdbootstrap.com/docs/jquery/tables/scroll/ see this – Citizen Patrol Feb 12 '20 at 06:37
  • 1
    Thank you for your advice. Actually, I replaced it with pagination finally in my project. But I still want to know whether it is possible to implement a scrolling solution. And thank you for your links about the scrolling solution, but unfortunately, they are not suitable in my case because the fixed header css and the performance problem if there are thousands or millions of rows in the table. :-( – Programus Feb 12 '20 at 08:47
  • 1
    It can be quite a bit of work to get virtual scrolling right & performant. I have created a JS library for this. Have a look at the One Million Cells demo: https://www.datagridxl.com/demos/one-million-cells. The lib is primarily meant to be an Excel-like editor, but you can set the grid to readonly (https://www.datagridxl.com/demos/readonly-grid) – Robbert Dec 07 '20 at 13:39

0 Answers0