Vue.js Datagrid Component for Vault
with Paged Data or Virtual Scrolling
The core of Vault’s frontend is its data grid. A single Client may send hundreds of jobs in a day, and Account Managers need to be able to see and process them quickly.
Even with virtual DOM and smart patching for updates, rendering hundreds or even thousands of rows at a time can be slow, especially with lots of columns. To help improve performance, I explored and shipped two options:
Paged Data
Splitting data into smaller groups and implementing paging is a common way to handle tables of large data.
For familiarity moving forward into the new system, I implemented paging with options for 25-200 jobs per page (the original system used pages of 25 items). Those using this feature are able to choose the right balance between page size and performance on their local machine.
In practice, paging works for scrolling performance, but it doesn’t always deliver the best experience. The users of the system often manage groups of jobs that span across pages because “real-world data”—it’s random. Switching between pages while keeping mental tabs on what’s happening adds complexity to a workflow when a page needs turning.
Virtual Scrolling
Since the first React prototype of Vault, which used react-virtualized to render the data grid’s rows, virtual scrolling as an alternative to paging had been on my mind.
In Vue, I tested several implementations of virtual scrollers and finally settled on vue-virtual-scroller as the base for the datagrid. It required a lot of optimization to achieve acceptable performance on 4K+ screens, both in the library and with CSS, but the work was well worth it.
The final datagrid component can hold hundreds or thousands of records at once without any noticeable slowdowns. AMs can move through and process large sets of data without having to worry about keeping up with the mental overhead of paging, if they so choose.
The final grid component has the following features:
Paged Data
Splitting data into smaller groups and implementing paging is a common way to handle tables of large data.
For familiarity moving forward into the new system, I implemented paging with options for 25-200 jobs per page (the original system used pages of 25 items). Those using this feature are able to choose the right balance between page size and performance on their local machine.
In practice, paging works for scrolling performance, but it doesn’t always deliver the best experience. The users of the system often manage groups of jobs that span across pages because “real-world data”—it’s random. Switching between pages while keeping mental tabs on what’s happening adds complexity to a workflow when a page needs turning.
Virtual Scrolling
Since the first React prototype of Vault, which used react-virtualized to render the data grid’s rows, virtual scrolling as an alternative to paging had been on my mind.
In Vue, I tested several implementations of virtual scrollers and finally settled on vue-virtual-scroller as the base for the datagrid. It required a lot of optimization to achieve acceptable performance on 4K+ screens, both in the library and with CSS, but the work was well worth it.
The final datagrid component can hold hundreds or thousands of records at once without any noticeable slowdowns. AMs can move through and process large sets of data without having to worry about keeping up with the mental overhead of paging, if they so choose.
The final grid component has the following features:
- Ability to switch between virtual scrolling and paged data
- Customizable columns—resizing, ordering, show/hide
- Display options for grid lines
- Select and deselect using checkboxes, including using the Shift key to select and deselect contiguous blocks of data
- For paged data, the number of records per page is customizable and selections can span multiple pages
Images:
- Datagrid with visible Grid Options on the right.
- Column resizing in action. The column being resized is hilighted in blue. When the column reaches its minimum width, the highlight turns red.
- Datagrid in its default state with several items selected.
- Datagrid using paged data. Navigation elements and paged data options are shown in zoomed in circles.
