High-Performance Datagrid Component for Vue for Applications

Experience the industry's most flexible, feature-rich, and lightweight Vue datagrid.

  • Lightweight, high-performance datagrid
  • Seamless integration into Vue apps
  • No dependencies
  • Declarative Markup and Bindings
  • Complete customization with Cell Templates
DOWNLOAD SAMPLES WITH SOURCE CODE (v 5.20221.857)

Overview

A Vue datagrid is a feature-rich control for displaying data in a tabular format. Its wide range of functionalities includes data binding, editing, Excel-like filtering, custom sorting, grouping, row reordering, freezing rows and columns, aggregating rows, and exporting to Excel, CSV, and PDF formats.

Why Choose FlexGrid for Vue?

High Performance Datagrid

FlexGrid rendering is optimized for speed and performance. Virtualization on by default and our low-footprint datagrid module is only 150KB.

Fully Declarative Markup

Improves readability and usability. We put extra efforts into making sure that FlexGrid can be completely configured and databound in markup.

Limitless Cell Templates

FlexGrid features Cell Templates that allow you to fully customize any cell. Cell Templates can contain HTML, Vue.js Components, Binding Expressions and more.

Written in TypeScript

FlexGrid is written in TypeScript and we include definitions for our entire API. With TypeScript, you'll get an object-oriented C# feel, design-time error checking, and complete IntelliSense in VSCode.

Familiar, Excel-Like Functionality

With a familiar, Excel-like interface, FlexGrid offers keyboard support, data aggregation, cell merging, star sizing, and cell freezing. FlexGrid also supports Excel import/export and copy/paste.

Modular Architecture

FlexGrid includes only the key features in the datagrid module, which makes it small. We provide extension modules for special features that you can pick and choose from to keep your app small and fast.

Data Binding

Wijmo's Vue datagrid, FlexGrid, supports client-side and server-side data binding. You can bind it to simple JavaScript arrays, observable CollectionViews, remote OData servers, or real-time WebSocket servers.

More details on Data Binding features

Custom Cells

Custom Cells

Wijmo's Vue datagrid, FlexGrid, allows you to heavily customize the look, feel, and functionality of every cell within the datagrid to match your style requirements. You're able to add both Wijmo and custom components to cells, conditionally style cells and their internal data, and dynamically update cells within the datagrid.

More details on Custom Cells features

DataMaps

Wijmo's Vue datagrid, FlexGrid, offers the DataMap feature as a simple way to provide the grid with automatic lookup capabilities, such as displaying a customer name instead of their ID. FlexGrid will add drop-downs to columns using DataMaps with valid items to use when editing cells. DataMaps also supports dynamic DataMaps and DataMap editors.

More details on DataMaps

Vue Datagrid Paging Feature

Paging

Wijmo's Vue datagrid, FlexGrid, uses the CollectionView component allows you to implement client-side paging by default, allowing you to generate datagrids that display a reasonable amount of data per page. You can also connect the CollectionView directly to your data source and allow for server-side paging.

More details on Paging features

Additional Features

Virtual Scrolling

Wijmo's Vue datagrid, FlexGrid, allows you to virtualize your data when loading it into the datagrid. As you scroll through FlexGrid, it will load the data into the grid as needed, allowing for increased performance and infinite scrolling.

More details on Virtual Scrolling

Selection

Like Excel, Wijmo's Vue datagrid allows you to select a range of cells over multiple rows and columns. FlexGrid also allows you to modify the marquee of the selection and set the selection through other components.

More details on Selection

Accessibility

Wijmo's Vue FlexGrid comes with an extensive feature list that supports accessibility. ARIA technology helps users interact and modify the FlexGrid, and the Excel-like keyboard shortcuts enabling users to traverse easily. 

More details on Accessibility

Clipboard

Wijmo's Vue datagrid, FlexGrid, allows one to copy selected rows or cell data into the clipboard with built-in support. The clipboard gives you the ability to customize the clipboard actions using several of FlexGrid's clipboard events.

More details on Clipboards

Data Customization

Editing

FlexGrid, has built-in support for Excel-like, in-cell editing. Customize the data stored inside of the FlexGrid, such as data validation, pop-up editors, and custom editors.

More details on Editing

Sorting

Wijmo's Vue datagrid, FlexGrid, supports data sorting through its CollectionView and can be customized to allow for features such as on-demand sorting and multi-column sorting.

More details on Sorting

Filtering

Flexgrid supports multiple filter options, from standard text and highlighting to Excel-like filtering. Use server-side filtering when loading data from an OData source.

More details on Filtering

Data Summaries

Grouping

Wijmo's Vue datagrid, FlexGrid, allows you to group data via CollectionView. Set multiple groups in a single datagrid and implement an Outlook-style GroupPanel to allow users to drag-and-drop columns to create groups.

More details on Grouping

Aggregation

Display summarized information for rows and columns in either the entire datagrid or individual sections. Set the displayed aggregated data and create custom aggregations and format options.

More details on Aggregation

TreeGrid

Wijmo's Vue datagrid, FlexGrid, allows you to bind child items to the datagrid, creating a TreeGrid to display your data. TreeGrid supports both bound and an unbound mode, lazy loading of data to increase performance, and importing XML data to display.

More details on TreeGrid

Master-Detail

Wijmo's Vue datagrid, FlexGrid, allows you to view hierarchical data through both a master-detail model and through the use of RowDetail. Use the master-detail model to select an item inside of a FlexGrid and view its details, or use RowDetail to allow nesting data within FlexGrid's rows.

More details on Master-Detail

Exporting

Import Export Excel

If your business relies on Excel for data management, you can use FlexGrid to import XLSX files and export and view data in Excel. FlexGrid supports both synchronous and asynchronous data exportation. 

More details on Import Export Excel

Export PDF

Wijmo's Vue datagrid, FlexGrid, supports content exporting and formatting to PDFs; this allows you to view data in a browser and add the Vue datagrid, FlexGrid, to newly-created PDFs. Modify PDFs and reports to include FlexGrid.

More details on Exporting PDFs

Printing

FlexGrid supports using printers as export options, allowing you to convert the datagrid into a format that supports printing. With FlexGrid's PrintDocument class, convert a datagrid into a table element, render onto a page, and print out.

More details on Printing

Globalization and Localization

Globalization

The globalization class allows you to format the display of FlexGrid's content. You'll be able to select the language that FlexGrid uses to display its data and format how it displays dates and numbers.

More details on Globalization

Right-to-Left

Some languages render content from the right to the left side of a page. HTML accommodates this with the dir attribute, rtl on an element When FlexGrid Is placed within an element set to display content from right to left.

More details on Right-To-Left

Freezing and Pinning

Wijmo's Vue datagrid, FlexGrid, offers Excel-like row and column freezing and pinning. This allows you to keep rows and columns in view as users navigate the content of the datagrid.

More details on Freezing & Pinning

Sticky Headers

Wijmo's Vue datagrid, FlexGrid, supports the implementation of sticky headers. Sticky headers remain visible when users scroll through the datagrid while maintaining all of the functionality of a static header row.

More details on Sticky Headers

Searching

Wijmo's Vue datagrid, FlexGrid, allows you to perform full-text searches–filtering your data to show all matching instances found in the datagrid. You can then highlight all matching occurrences of the scanned text.

More details on Searching

Add New Rows

Wijmo's Vue datagrid, FlexGrid, allows you to implement a new row feature without writing code for additional rows. Adding a blank row to the datagrid allows users to add even more rows of data. You can automatically include the blank row at either the top or bottom of the datagrid when you set the grid's allowAddNew property.

More details on Adding New Rows

Layout

Reordering

Allow users to modify columns by dragging and dropping their headers. FlexGrid allows you to disable reordering in the entire datagrid or individual columns. Enable reordering by setting the allowReordering property as true and dragging and dropping the column header from one index to another.

More details on Reordering

Cell Merging

Wijmo's Vue datagrid, FlexGrid, supports content-driven cell merging. Cell merging allows users to merge data cells by matching content through the allowMerging property. Merge header cells, create custom cell merging rules, and set restrictions on how Vue datagrid merges cells.

More details on Cell Merging

Column Sizing

Wijmo's Vue datagrid, FlexGrid, allows you to specify column sizing in code, as well as allow users to resize columns after rendering the datagrid. Like Excel, users may drag the column header's right edge to expand or decrease sizing, or double-click the edge to auto-size the column to fit its content.

More details on Resizing

Wijmo's Customer Feedback & Awards

"Good value for money and high quality components"

RICHARD HERBERT

"Great tools, not cheap, but worth the money for us."

TRUSTED CUSTOMER

"I've been using Wijmo controls for about a year and a half. Fantastic product. Fantastic support!"

TRUSTED CUSTOMER

2021 #2 Publisher Award 2021 #3 Top Product Award

"I don’t give kudos lightly, and without merit, but the Wijmo team has been awesome to work with. Just amazingly responsive! I am so glad I recommended Wijmo to my partners."

GABOR FARI, PARTNER TECHNOLOGY STRATEGIST - MICROSOFT CORP

"With Wijmo's extensibility model, the Microsoft Dynamics team was able to quickly customize and incorporate Wijmo 5 components into our new release."

PARAM KAHLON, GENERAL MANAGER, MICROSOFT DYNAMICS CRM ENGINEERING

"We rely on functionality of Wijmo Core's FlexGrid in our massive next-generation platform products. Wijmo's modern, full-featured FlexGrid with sophisticated grid manipulations is what you will find at the heart of our workflow."

AARON MENDEZ, MANAGER OF THE USER EXPERIENCE, THOMSON REUTERS