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
DISPLAY
There are a number of ways to accomplish this using either CSS (flexbox) or by using one of many existing javascript-based tools for this. Responsive tables have been a source for questions for a long time, so it's definitely worth spending some quality time with Google to evaluate solutions based on your use case.
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
change the markup or start manipulating with JavaScript.
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).
This approach certainly makes it easier to move around the page, though. It's a lot cleaner looking, too -- and you can use javascript/jQ to rearrange the accordions as needed when sorting.
SORTING
Once you have your data collapsing properly, you can resort to javascript/jQ to rearrange the DOM elements as per the user's choice. You can trigger this either with links (like the table headers) or via one or more dropdowns (that you can expose in mobile view only). This part should be relatively trivial if you are using classes or IDs in your rows/accordions.
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.
TL;DR: Make friends with flexbox, but prepare to degrade if flexbox isn't available. If the data is too "long" for mobile view, find a way to collapse each row (accordions, perhaps). Then use javascript/jQ to push the elements around as needed (you can likely re-use whatever filtering/sorting method you are currently using as long as your content is ID'd properly).
