How to Manage Tables with Hundreds of Rows
March 15, 2016

How to Manage Tables with Hundreds of Rows

jQuery Know How Tips


Have you ever had problems viewing through rows and rows of data in a table? Here are some tips on how you can manage tables that has hundreds of rows of data.

Manage Tables with Hundreds of Rows

Sticky Table Header

Ever have to put your finger on the screen while scrolling through the table to find the data that you needed for a specific column? Sticky Table Headers will solve that problem for you.

With the help of Sticky Table Headers, the table header will always be on top when you scroll through the table. That way, you will always know which data belongs to which column.

ID Name Email Phone
1 John Smith john.smith@email.com 01234567890
2 Mary Jane mary.jane@email.com 02345678901
3 Anita Radcliffe anita.radcliffe@email.com 03456789012
4 Billy Bones billy.bones@email.com 04567890123
5 Cornelius Robinson cornelius.robinson@email.com 05678901234
6 Dex Barrington dex.barrington@email.com 06789012345
7 Ellie Mae ellie.mae@email.com 07890123456
8 Flynn Rider flynn.rider@email.com 08901234567
9 Gosalyn Mollard gosalyn.mollard@email.com 09012345678
10 Henry Fenner henry.fenner@email.com 01234567890

Table Wrapper

Even we have the help of Sticky Table Headers, we will still need to scroll through the page which will cause the page to be overly long. The solution to this problem would be to have a div that wraps the table and apply a scroller to the div.

ID Name Email Phone
1 John Smith john.smith@email.com 01234567890
2 Mary Jane mary.jane@email.com 02345678901
3 Anita Radcliffe anita.radcliffe@email.com 03456789012
4 Billy Bones billy.bones@email.com 04567890123
5 Cornelius Robinson cornelius.robinson@email.com 05678901234
6 Dex Barrington dex.barrington@email.com 06789012345
7 Ellie Mae ellie.mae@email.com 07890123456
8 Flynn Rider flynn.rider@email.com 08901234567
9 Gosalyn Mollard gosalyn.mollard@email.com 09012345678
10 Henry Fenner henry.fenner@email.com 01234567890
/* The CSS Code */
#table-wrapper {
  height: 170px;
  overflow-y: scroll;
}
/* End of The CSS Code */

/* The HTML */
<div id="table-wrapper">
<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Smith</td>
      <td>john.smith@email.com</td>
      <td>01234567890</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Mary Jane</td>
      <td>mary.jane@email.com</td>
      <td>02345678901</td>
    </tr>
  </tbody>
</table>
</div>
/* End of The HTML Code */

Alternative: Pagination

If the above solution doesn’t work for you, you can try applying a pagination to your table. You can use the Tablepagination plugin for this purpose.

The next time when you have to display a table that has hundreds of rows, you can consider these options.


Leave a Reply

Your email address will not be published. Required fields are marked *