The Definitive Guide to Vue Datagrids

DataGrids have been one of the most common visual software elements since the advent of UIs. They appeal to the instinct that drives all of us to take in and understand as much data as possible as quickly as possible. DataGrids are more useful than ever now that they can run in powerful JavaScript frameworks like Vue.

Vue.js is a ubiquitous framework for building modern web applications. It offers a full set of features for enterprise developers to use, similar to what would formerly be built in .NET or Java systems. Those same applications can now be built for the web and run on any device with a browser.

One thing not included in Vue.js itself is a Vue DataGrid. However, there are open-source and third-party options from which developers can choose. A Vue DataGrid is a custom Vue component similar to traditional DataGrids, but that can be used in Vue, including markup, binding, and rendering using the Vue.js framework.

Why DataGrids?

Even if you’re not a developer, you’re probably familiar with the paradigm of a DataGrid. Grouping and sorting data isn’t merely for the meticulous; it’s human nature. DataGrids appeal to the instinct that drives us to organize, absorb, and understand as much data as possible as efficiently as possible.

The usefulness and universality of DataGrids have allowed them to permeate throughout time, but not without some amount of evolution. With the advent of screens in the digital age, the DataGrid has changed more than ever.

Now, grids are more useful than ever, not only for displaying data but also for editing it. Imagine creating a sales report or monthly budget using Microsoft Word. Microsoft Excel would be the natural choice for most users with automatic conveniences, such as sorting, filtering, and autocomplete, plus advanced features like custom formulas.

Beyond the helpful and time-saving features, most users would naturally choose Excel because it’s what they first experienced when it came to DataGrids on a computer. Excel is familiar. Any good UX designer or business analyst will tell you educating users is difficult and expensive. One of the most significant advantages of DataGrids, in general, is that they are intuitive.

Although Excel has become the most common example of software using a DataGrid, the paradigm has increased throughout the software world. As web apps continue to replace the traditional native applications that we’re used to, it only makes sense that DataGrids would also make their way to web app UIs.

At MESCIUS, we’ve found that industries across the board are including DataGrid UI components in new web app projects.

Whether you’re building an app to track manufacturing stats, analyze financial data, or create sales reports, we’re willing to bet you’ve already considered the intuitiveness a DataGrid would add. As we’ll see, Wijmo’s Vue DataGrid can maximize the bang for your buck by providing the best DataGrid UX with the best performance available.

Vue DataGrid components, like FlexGrid, provide natural intuitive interfaces between humans and data.

Tables vs. DataGrids

If you aren’t using a DataGrid, then you are likely using an HTML table element in your application to display lists of data. HTML tables are an excellent tool for basic data display, but they quickly fall short when your end users expect Excel-like features in your app.

Even relatively simple features, like dynamic sorting and filtering, are not built into HTML tables. The list of DataGrid features that tables do not include is too long to define.

You might think HTML tables perform better than DataGrids, but that is only true in specific scenarios. Tables can outperform DataGrids when there are a limited number of rows and columns. The simple reason is that HTML tables require DOM to be rendered for all columns, rows, and cells. DataGrids, on the other hand, can virtualize rendering so that only visible cells are rendered and recycled as the view changes. So, when working with large volumes of data, DataGrids outperform tables by far.

When choosing between Tables and DataGrids, we think it comes down to two key factors. If either or both are true, then you need a DataGrid:

1. Do your users want to interact (organize, analyze, edit, etc.) with your data in a way that is similar to Excel?
2. Do you need to bind to thousands of records?

Again, we think if either of these is true, then a DataGrid is the right choice for you. If not, then a simple HTML table should suffice.

The Top Features of a Vue DataGrid

A Vue DataGrid provides various functionalities to the applications that contain them. The primary uses include displaying, editing, and analyzing data. Let’s look at the top features for each use case and how we define them in a DataGrid API.

Top Displaying Features
The Vue DataGrid display features help users read and understand the data more quickly and efficiently. Developers can improve how the raw data is presented to the user by making it more readable with cell formatting, merging, and column bands. Users can make the data easier to view with features like column reordering, resizing, and scrolling.

Vue FlexGrid with collapsible row details

A more complete list of top display features includes:

• Cell formatting — Format numbers and dates such as rounding numbers, displaying percentages, and displaying dates as month names.
• Cell merging — Adjacent cells containing the same values are merged into one larger cell, either automatically by the application or manually by the user.
• Custom cell rendering — Add custom UI elements within a DataGrid cell, such as buttons, images, or virtually anything that can be rendered in JavaScript. This is sometimes referred to as a Cell Template.
• Column bands — A visual grouping of related columns, such as grouping Street, City, and Postal Code under an “Address” band.
• Column reordering and resizing — At runtime, users can change the order and size of columns to suit their needs.
• Scrolling — Scrolling is essential to reach additional data rows and columns that don’t fit on the screen.
• Collapsible row details — Display less important information about a record within a collapsible panel on each row.
• Frozen columns and rows — Affix any number of rows and columns to prevent them from scrolling out of view.
• Right-to-Left — Adjust the columns and text to read from right to left, a critical feature for some cultures.
• Themes and styles — Provide more than one aesthetic to deliver modern-looking or company-branded UIs. A rich UI control provides extensive style customization.

Top Editing Features
The Vue DataGrid editing features enable users to insert, update, and even delete data at the underlying source. While extra code is typically required to complete the connection and pass updates to the data source, the DataGrid control is responsible for accepting the input from the user in the most efficient and intuitive ways possible.

Vue FlexGrid with input validation errors

For example, when you need to make your data editable by a user, you can build a Vue application containing a DataGrid. Users can navigate the DataGrid cell by cell and insert or edit the values. Additional editing features include adding new rows, input validation, clipboard support, importing data from external files, and even specialized cell editors such as calendars for dates, checkboxes for Boolean values, etc. A more complete list of top editing features includes:

• Cell navigation and editing by keyboard — Allow users to navigate and edit cells through the keyboard. We often follow Microsoft Excel behavior using a combination of the tab, arrow, control and enter keys to perform all editing operations.
• Read-only cells and columns — Make any column or cell non-editable.
• Input masking and validation — Prevent the user from entering invalid information, such as poorly formatted emails, IDs, phone numbers, locations, and date ranges.
• Select cells — Allow users to select or highlight any number of rows or individual cells. Cell selection is often used for additional drill-down or export functions so that the developer may restrict the selection based on the application requirements.
• Add new rows — Allow users to add new records to the data source through the DataGrid itself. While many UI designers choose a separate input form for this operation, it’s helpful to have this feature in the DataGrid for quicker solutions.
• Delete rows — Allow users to delete records from the data source through the DataGrid itself. This can be supported with the delete key or a button embedded in a cell.
• Custom cell editors — Specify a particular editor for certain columns and data types. For example, editing colors is best implemented with a color picker rather than a textbox.
• Clipboard support — Enable users to use their keyboards to cut, copy, and paste commands to edit the DataGrid.
• Importing data — Import tabular data from common sources like Microsoft Excel, CSV, JSON, and XML.

Top Analyzing Features
While displaying and editing data are the most common use cases, the true potential of a Vue DataGrid lies in its analytical features. DataGrids make great analysis tools, especially for creating “live” reports, and are often included in dashboards.

Vue FlexGrid control with tree-grid subtotals

Advanced Vue DataGrids typically include analytical features such as sorting, grouping, and filtering. These actions allow the user to drill-down, slice, and aggregate the entire data set to discover trends and insights in the data set. For example, sorting and grouping allow the user to organize the data meaningfully to find the highest or lowest records. Filtering is an essential feature that lets the user search and find specific records. A more complete list of top analyzing features includes:

• Sorting by column — Allow users to sort the entire DataGrid by a single column’s values in ascending or descending order. This is typically performed by clicking the column header and displaying an up or down arrow.
• Sorting by multiple columns — Allow users to perform a sort across multiple columns simultaneously. This is typically done by clicking the column header while simultaneously pressing a key.
• Grouping by column — Group the data within the DataGrid by a single column, which organizes the data similarly to sorting but with added header rows to separate each group.
• Drag-and-drop Grouping — Allow users to perform grouping at runtime by dragging any number of column headers into a grouping panel or by grouping through a menu.
• Excel-like Filtering — Provide filters within each column header to enable conditional and value-based filters for the user.
• Filter row — Provide a filter input box for each column in a fixed row at the top or bottom of the DataGrid.
• Full-text filtering (search box) — Provide filtering functionality to the DataGrid from an external text box. This is commonly referred to as “searching” as it feels like a Google search box for your DataGrid.
• Subtotals and aggregates — When a DataGrid is grouped, it may optionally display aggregated subtotals for each group. The aggregated values are typically displayed in the group header row. Totals may also be calculated for the entire data set and displayed at the bottom footer of the DataGrid.
• Conditional formatting — Apply special formatting to cells based on their value. A common example is shading cells with different colors based on various thresholds.
• Custom calculations — Provide additional calculations that may not be present in the raw data. For example, if your data set includes column fields for “Price” and “Discount,” the DataGrid could display a custom column with a calculation of Price*Discount.

How to Build a Vue DataGrid

Follow these steps to get started using a third-party Vue DataGrid, such as the Wijmo FlexGrid component.

To start, we will assume you have an existing Vue application. You can create one easily by using something like the create-vue api.

Step 1: Install Packages from npm
To use the Vue FlexGrid, we will need to add the dependent packages from npm. This command will install all of the required packages.

npm install @mescius/wijmo.vue2.all

Step 2: Importing the Modules and Registering the Grid
Now that we have the required packages in our application, main.js, we need to import the modules (JS and CSS) and register the grid component so we can use the Vue DataGrid in our <template>.

import { createApp } from 'vue' 
import App from './App.vue' 
import '@mescius/wijmo.styles/wijmo.css'; 
import {registerGrid} from "@mescius/wijmo.vue2.grid" 

let app = createApp(App); 
registerGrid(app); 
app.mount('#app') 

Note: This is registering the Grid at the application level, but you could also register it at the component level.

Step 3: Add Vue DataGrid Markup
In our component view (app.vue), we will add data and declare our Vue DataGrid in markup. The best Vue DataGrids are fully configurable in markup, including bindings, columns, and custom cell templates.

<script setup> 
import { ref } from 'vue' 
// variables 

const data = ref(getData()) 
//methods 

function getData() { 
  var data = [
        { id: 0, country: "US", sales: 1318.37, expenses: 4212.41 },
        { id: 1, country: "Germany", sales: 5847.95, expenses: 89.79 },
        { id: 2, country: "UK", sales: 502.55, expenses: 2878.50 },
        { id: 3, country: "Japan", sales: 4675.40, expenses: 488.65 },
        { id: 4, country: "Italy", sales: 2117.57, expenses: 925.60 },
        { id: 5, country: "Greece", sales: 322.10, expenses: 4163.96 }
    ]; 
  return data; 
} 
</script> 

<template> 
  <wj-flex-grid :itemsSource="data"></wj-flex-grid> 
</template> 

Step 4: Run the Vue DataGrid
That’s it! Just run your application and see your Vue DataGrid in action. Your grid will already support sorting, editing, selection, and much more.

How to Optimize Vue DataGrid Performance

As discussed earlier, features are important, but performance is arguably an even more significant benefit of DataGrids when working with large volumes of data. Let’s look at some techniques that can improve DataGrid performance.

• Modular architecture — The best DataGrids are built using a module design pattern, so only key features are included in the core grid, allowing developers to pick and choose which specialized features to include. By only including what is needed, our applications will stay lean.
• Leverage virtualization — Virtualization gives DataGrids the ability to outperform HTML tables so that not all cells need to be created as DOM elements. Because of this, it’s essential to choose a DataGrid that supports virtualization to leverage this feature. We want to ensure that the DataGrid has a height and width set so that it is scrollable. This scrolling is what allows virtualization to render only cells needed inside the ViewPort and recycle cells as the user scrolls.
• Defer updates during configuration — DataGrids are built to rerender when changes are made, so we need to consider that when configuring them. For example, if we have code that is making many changes to the grid, we want to defer rendering until we are done making the updates. The most common use case for this is when the grid is configured, or major data changes are being made simultaneously.

Specialized Vue DataGrids

The sky is typically the limit regarding web development, so it’s no surprise that there’s still a lot more you can do with a Vue DataGrid. Developers and teams alike can keep adding more and more features to a single DataGrid library, but at a certain point, it makes more sense to branch some features off into a specialized DataGrid control. Some popular examples of specialized DataGrids include:

Pivot Grid
A DataGrid that displays a cross-tab view of one or more dimensions with built-in aggregation and extensive runtime configuration.

Vue PivotGrid showing aggregate data for analysis

Transposed Grid
A DataGrid that renders rows horizontally instead of vertically. This is a very specialized use case.

Vue Transposed Grid

MultiRow Grid
A DataGrid that renders single records in multiple rows of cells. This style of grid is very popular in Japan.

Vue MultiRow Grid

Conclusion

The HTML table is good for simply viewing and editing tabular data in your Vue applications, but for more advanced features, such as built-in analysis and data operations, you will want to explore third-party Vue DataGrids. You can use the feature list from this article as a checklist when you compare different third-party DataGrids. Try it for yourself with Wijmo’s FlexGrid Vue DataGrid samples.