Skip to main content Skip to footer
Vue Icon

Data Binding for Vue Datagrids

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.


Arrays and CollectionViews

Bind Wijmo's Vue datagrid, FlexGrid, to a JavaScript array. It automatically creates an internal CollectionView to use as a data source to provide sorting and editing features.

Array DataBinding Demo

Array DataBinding Documentation

Remote Data Binding

Bind Wijmo's FlexGrid to remote data sources by consuming an API that returns arrays of data in JSON format. You can also write your own custom CollectionView to communicate with the server, similar to our ODataCollectionView.

Remote DataBinding Documentation

OData Data Binding

Bind FlexGrid to an ODataCollectionView. This Vue class extends CollectionView to provide support for OData sources. Simply point to your OData service's URL and FlexGrid will sort, filter, page, and more on the server.

OData DataBinding Demo

OData DataBinding Documentation

Unbound Mode

FlexGrid supports an unbound mode where you add rows and columns in code. With no external data source, the Vue datagrid stores the data internally–allowing you to add cells to the grid arbitrarily.

Unbound Mode Demo