A Vue component to create tables with vertical and horizontal scrolling. Flexbox-based.
vue-scrolling-table is a Vue that provides a flexbox-based table control, where the header, body, and footer of the control are rendered via named slots for maximum flexibility, and the component allows the body to be scrolled horizontally and vertically as needed.
I recently needed a Vue component for a data grid in a desktop application I'm building. No need for responsiveness--in this case, I just need one huge table that scrolls vertically and horizontally, like a spreadsheet. I also needed the table to fit itself neatly into a flexbox layout, taking up any available space.
"No problem, this is late 2017, we have modern browsers with CSS2 sticky!" Nope. Browser support for sticky is still buggy and incomplete, and I also needed the solution to work on IE11 to support outdated corporate environments.
Note: this page uses the Bulma library for basic styling, and that styling overides a few details of the default vue-scrolling-table, notably removing the border from the header cells and adding rounded corners.
Subscribe to Vue.js Examples
Get the latest posts delivered right to your inbox