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?

5
  • 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, 2020 at 8:36
  • does this help you? 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. Feb 11, 2020 at 9:06
  • mdbootstrap.com/docs/jquery/tables/scroll see this Feb 12, 2020 at 6: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, 2020 at 8: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: 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 (datagridxl.com/demos/readonly-grid)
    – Robbert
    Dec 7, 2020 at 13:39

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.