Vue Data Grid Component for Enterprise Apps

JQWidgets Data Grid for Vue.js is a professional data grid component built with Vue.js and is ideal for Enterprise class applications. It offers all the features necessary for professional UI development. Vue.js is a progressive frameworks for building user interfaces. It is designed to be incrementally adoptable and offers simplifies integration. Vue Grid

Our Vue.js Grid enables top performance and responsive, fluid design. It is specifically built to work across a range of devices and offer responsive, device-optimized look and behavior on PCs, tablets and mobile phones. It comes with more than 500 ready-to-use demos and extensive documentation.

The JQwidgets UI framework is trusted and used by thousands of companies. It has a big user community and offers frequent releases and continuous improvement and support of the new versions of Vue.js

Sorting, Filtering, Grouping, Paging and Editing in Vue Grid

JQWidgets Data Grid for Vue offers ascending and descending sorting on text numeric and data columns. The data can be sorted by clicking on a column or using a context menu. In addition the API allows developers to extend and customize the sorting with custom sort and compare functions.
The filtering feature is very flexible. The datagrid has standard filters with context menus and selection of filtering operators and conditions. The developer may also choose to use a filter row which will appear at the top of the grid's rows.
The Groping shows the data grouped by a certain column name. It can be done both on the client and on the server.
Paging is a basic feature and enables the Grid to display data in pages having configurable number of rows. It alo allows the user to move to the pages backward or forward with the help of arrow pointers and to go to a specific page by entering the page number.
JQWidgets Grid for Vue.js offers advanced editing capabilities such as Inline rows, dialog editors, row locking, cells editing custom editors and validation.
Vue Grid Editing

Data Binding in Vue Grid

The grid component has built-in data binding capabilities and supports client and server-side paging. It can be bound to Local Data, JSON, XML, CSV, TSV, Remote Data (JSONP) and Virtual Data. In order to bind the Grid to a data source you need to set its source property to point to an instance of jqxDataAdapter.

Columns and cells formatting in Vue Grid

The Grid offers many options for columns and cells formatting. You can align the text in the cells left, right or center and have different bacckround colors. The columns can be shown or hidden and can be auto-sized. You can also have checkboxes, images and other widgets in the columns. In addition jQWidgets Grid for Vue enables complex features like column tooltips, foreign key, computed and pinned columns. You can also do reordering and resizing of the columns.

Vue Grid Cells Formatting

Advanced Features in Vue Grid

For the Vue applications requiring complex features, jqxGrid offers drag and drop (including dragging multiple rows), row details, custom keyboard navigation, deferred scrolling on large data sets, nested grids, master-details grids, toolbars on the grid, status bar, right to left support and more. UI Virtualization is supported and enabled by default. That feature in general allows you to bind the Grid to a large data set, the component creates UI elements only for the view and reuses these UI elements while scrolling the data horizontally or vertically.

Export and printing in Vue Grid



The Grid component offers export to Excel, PDF, XML, HTML, CSV, TSV and JSON. It also offers data printing.