jQWidgets
  • Docs
  • License and Pricing
  • Services
  • Community
    • Forums
    • Blogs
    • Follow Us
    • Client Login
  • About
    • About Us
    • Contact Us
    • FAQ
  • Products
    • Angular
    • React
    • Vue
    • jQuery
    • Web Components
    • Blazor
    • Templates
    • Artavolo
  • Download
Vue.js Components
  • Javascript/jQuery
  • Angular
  • Vue
  • React
  • Web Components
  • Blazor
  • ASP .NET MVC
  • Templates
  • Theme Builder
Show Demo List

Vue.js Components

  • jqxGrid
  • jqxTabs
  • jqxTextArea
  • jqxWindow
  • jqxKnob
  • jqxResponsivePanel
  • jqxChart
  • jqxMenu
  • jqxInput
  • jqxDocking
  • jqxGauge
  • jqxNavBar
  • jqxPivotGrid
  • jqxTree
  • jqxPasswordInput
  • jqxNotification
  • jqxBarGauge
  • jqxSortable
  • jqxScheduler
  • jqxNavigationBar
  • jqxMaskedInput
  • jqxPopOver
  • jqxExpander
  • jqxLoader
  • jqxTreeGrid
  • jqxListMenu
  • jqxComplexInput
  • jqxTooltip
  • jqxRating
  • jqxDraw
  • jqxDataTable
  • jqxToolBar
  • jqxFormattedInput
  • jqxColorPicker
  • jqxRangeSelector
  • jqxDragDrop
  • jqxTreeMap
  • jqxComboBox
  • jqxNumberInput
  • jqxScrollView
  • jqxSlider
  • jqxPanel
  • jqxEditor
  • jqxDropDownList
  • jqxDateTimeInput
  • jqxProgressBar
  • jqxScrollBar
  • jqxValidator
  • jqxRibbon
  • jqxListBox
  • jqxCalendar
  • jqxFileUpload
  • jqxSplitter
  • jqxForm
  • jqxValidator
  • jqxLayout
  • jqxButtons
  • jqxKanban
  • jqxBulletChart
  • jqxDockingLayout

jqxGrid

  • Default Functionality
  • Spreadsheet
  • Create, Remove, Update
  • Data Export
  • Data Printing
  • State Maintenance
  • Localization
  • DropDown Grid
  • Sorting
    • Sorting
    • Custom Sorting
  • Filtering
    • Filtering
    • Filter Menu Types
    • Custom Filter Menu
    • Filter Row
    • Excel-like Filter
    • Filter Row & Custom List Items
    • Filter Conditions
    • Date & Range Filter
    • Initial Filter
    • Custom List Items with Key/Value
  • Grouping
    • Grouping
    • Grouping with Pager
    • Toggle Sub Rows
    • Aggregates
  • Paging
    • Paging
    • Initial Page and PageSize
    • Pager Modes
  • Editing
    • Editing
    • Popup Editing
    • Edit Modes
    • Customized Editors
    • Disable Editing of Rows
    • Custom DropDownList Column
    • Custom ComboBox Column
    • Cascading ComboBoxes
    • Full Row Edit
    • Row Edit with Ever Present Row
    • Custom Column Editor
    • Custom Row Editor
  • Data Binding
    • Binding to Array
    • Binding to JS Array
    • Binding to Observable Array
    • Binding to XML
    • Binding to JSON
    • Binding to JSON using PHP
    • Binding to JSON String
    • Binding to CSV
    • Binding to TSV
    • Large Data Set
    • Many Columns
    • Refresh Data
    • Virtual Paging
    • Virtual Scrolling
    • Load from Table
  • Aggregates
    • Aggregates
    • Custom Aggregates
    • Aggregates Renderer
    • Grouping Aggregates
  • Columns
    • Text Alignment
    • Show/Hide Columns
    • Auto-Size Columns
    • Percentage Width for Columns
    • CheckBox Column
    • Row Number Column
    • Column Template
    • Widget Column
    • Columns Hierarchy
    • Cells Styling
    • Image Column
    • Columns Resize
    • Columns Reorder
    • Pinned/Frozen Columns
    • Column Tooltips
    • Computed Column
    • Dynamic Columns
    • Foreign Key Column
    • Keys/Values Column
  • Selection
    • Row Selection
    • Cells Selection
    • CheckBox Selection
  • Drag Drop
    • Drag & Drop
  • Ever Present Row
    • Add New Row
    • Add New Bottom Row
    • Updating Actions at Runtime
    • Ever Present Row with Custom Widgets
    • Ever Present Row with Columns
    • Positioning
    • Validation
    • Add, Remove, Update
    • Localized Add New Row
  • Row Details
  • Nested Grids
  • Master Details
  • Deferred Scrolling
  • Deferred Scrolling on a Large Data Set
  • StatusBar
  • ToolBar
  • Context Menu
  • Auto Row Height
  • Custom Keyboard Navigation
  • Fluid Size
  • Grid in jqxTabs
  • Keyboard Navigation
  • Right to Left Layout
Theme:
Material
  • Demo
  • App.vue
  • main.js
  • index.htm
  • styles.css

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.
jQWidgets
  • Facebook
  • Twitter
  • Demo
  • Download
  • Documentation
  • License and Pricing
  • Services
  • Forums
  • About
  • Terms of Use
  • Privacy Policy
  • Contact Us

jQWidgets © 2011-2025. All Rights Reserved.