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?

Improve this question
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. Commented 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. Commented Feb 11, 2020 at 9:06
  • mdbootstrap.com/docs/jquery/tables/scroll see this Commented 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. :-( Commented 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) Commented Dec 7, 2020 at 13:39
Related questions
1
How to scrollbar a table with variable amount of rows and columns
2
Scrollable table ideas (tricky)
53
Large dynamically sized html table with a fixed scroll row and fixed scroll column
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.