I see this being broken down into two issues:
1.) Display of the information
2.) Sorting/filtering of the information once the presentation has been adapted to device
However, going off what you've stated (e.g. since you have so many rows), I'd suggest you find a way to make this easier to scroll through on a mobile device -- maybe by collapsing rows into accordions or something. A 10x10 table is one thing... but with 150 records being displayed, you should think about making the user do any extra work. You don't want them being forced to swipe like a crazy person to traverse the data. In essence, you would be hiding the columns and allowing the user to expose them. (Note: As I state below, this isn't the best approach if the table is meant for comparison use, e.g. comparing values between two rows.)
With that said, Accessible, Simple, Responsive Tables by Davide Rizzo is probably a great starting point for you. I like this approach because it retains accessibility.
Here is an important excerpt (in case the link ever 404's):
Approaches for Responsive Tables Let's think about the different ways a table could behave responsively:
- Squash: If columns have little content they might squash horizontally with no issues on a mobile screen so not changing the
layout needs to be a valid option.
- Vertical scroll: If the layout and content is exact and critical, a user could scroll to the left or right. This is trivial in
CSS with an overflow="auto" wrapper.
- Collapse by rows: Split each row into its own single column mini-table on small screens. Switching display:table into
display:block will cause this with normal table markup.
- Collapse by columns: This is where things get tricky. You can't do this with normal table markup in pure CSS because the code
order is by rows and the wrappers lock it in. We either have to
Since you have many columns, collapsing by row (i.e. no scrolling) is what you are looking for. So:
Responsive tables with flexbox
1a) For row-oriented tables...
- Order markup exactly how a mobile or screen reader should read it, use semantic headers and content.
- Abandon all concept of 'row' wrappers.
- Set the width of each cell as a percentage based on number of columns or rows.
- Auto sizing column widths is not possible.
Once you have your layout fixed, you need to style it for clarity (zebra stripe, etc.):
Style to help make connections
- Style cells individually in any pattern you require.
- Fix cell border duplication with negative margins.
However, if you need to have support for legacy browsers, this is an important thing to keep in mind when using a flexbox approach:
IE9 and below does not support flexbox. For older browsers, you can
detect flexbox (with Modernizer) and show the mobile version,
which is a good example of graceful degradation.
You can then further enhance this by collapsing to tabs (not really appropriate for your situation) or accordions (far more suitable -- links shows codepen example). This is only useful if the data isn't being visually compared, as it will hide the content and force a user to expose the information manually by opening each "row" (accordion).
You can find a code examples here:
Sorting elements with jQuery (github source)
jQuery Plugin For Reordering and Filtering Html Elements - filter.js
I think those will help. If not, it's time to read up on manipulating the DOM tree.