Try switching format below a specific viewport size, and allow users to manage columns/data for what's most important to their context of use.
It seems like you have plenty of columns as is in the desktop view. For that view, you could use a First/last frozen column pattern, which is useful if you have actions that you need to perform per each row without needing to drill into a detail view:
For desktop and larger viewports: 1st and last frozen columns
download bmml source – Wireframes created with Balsamiq Mockups
- Freeze column (or columns) depending on the must-see / do info
- Expands to larger viewports
- Managing columns allows users to tailor to their most important info
- Scrolling as always is a trade off
- Users may forget which columns are hidden (maybe a visual indicator to show how many columns are available
For mobile and smaller views: stacking card tables
This card stack: stackable.js is one option I've used in the past, and hacked to display larger cards in a style I reformatted that worked for our requirements. Since a user can't see all the columns, it changes to a label / value pair. It's repetitive for a purpose.
- Each card repeats the label, so value is always in context
- Cards can stretch to accomodate data which is highest priority
- You can add an 'Actions' icon persistent to mobile in the top right of each card (If that's your use case)
- Cards, unlike a grid make it difficult to see values across multiple items for comparision (although you could still add sort controls above the cards)