Best approach for huge data tables (currently using scrolls)

Experts,

I need help in assessing the best approach for huge tables (lets say 500 rows), we want something that is intuitive, visibly appealing and gives more focus to table data. Most pages will have 1 table but there are scenarios where we have multiple tables so we need to account that as well

Currently, we are using scrollbars on table div but the issue is that it adds to another scrollbar (apart from scrollbar on sidebar navigation and content area). Rough sketch of our current approach is below:

enter image description here

For mobile we are using stack-table approach using footable plugin.

Although, one feature in Gmail looks appealing that is,

  • when we open a long email thread
  • and goto compose section press reply etc to activate that section
  • within that previous thread is truncated in "..." if you click that it will show content and update the main scrollbar if you scroll up and down you will notice a nice smooth scroller and keeping the focus on content.

UPDATE: Please consider that table holds financial data, to be precise a Balance Sheet with multiple periods in column. First column is sticky/freeze/fixed rest are horizontally scrollable. Our main concerns are multiple scrollbars, if we can avoid the table scrollbars with loosing usability.

Tags: