We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Overview

The Vue DataGrid, or DataTable, is a feature-rich component for displaying data in a tabular format. Its wide range of functionalities include data binding, editing, filtering, grouping, paging, freezing rows and columns, aggregating rows, and exporting to Excel, CSV, and PDF formats. It is designed and optimized for high performance. A high volume of data can be loaded without performance degradation by using row and column virtualization.


Data binding

The datagrid can be bound to data from a variety of data sources in the form of JavaScript object array collections. It uses the Essential JS 2 data manager to handle data and supports customizing data requests and processing.

Local data binding in Vue datagrid

JavaScript array collection

The array of JavaScript objects can be bound to the datagrid, allowing it to work smoothly in single-page applications.

Remote data binding in Vue datagrid

Remote data binding

Binding the datagrid with RESTful services allows data from services to be consumed using the Essential JS 2 data manager. It supports various data adaptors such as JSON, OData, ODataV4, URL, and Web API.

Extensible data handling in Vue datagrid

Extensible data handling

Data handling is extensible in the datagrid. The appropriate events are raised with the datagrid state when data needs to be processed. Preferred data processing logic can be provided.

Hierarchical binding in Vue datagrid

Hierarchical binding

The datagrid can be configured to show one-to-many relationship data using hierarchical binding. An n-level hierarchy datagrid can be built with minimal configuration that helps users visualize data in parent and child relationships.


Optimized for mobile

The datagrid is highly optimized to work on mobile devices.

Touch support in Vue datagrid

Touch support

All datagrid features will work on touch devices with zero configuration. This enables features such as sorting, grouping, and selection to be used without any customization.

Responsiveness in Vue datagrid

Responsiveness

Responsive features allow the datagrid layout to be viewed on various devices. It is also possible to hide specific columns for particular screen sizes using column-based media query support.

Adaptable pager UI in Vue datagrid

Adaptable pager UI

The pager UI is adaptable in mobile views. When the datagrid is rendered in a smaller screen, the pager UI will be rendered without a page number list, making it suitable for smaller devices.


Editing

The datagrid provides full support for create, read, update, and delete operations. Editing can be enabled and customized with simple property settings.

Type of edit modes in Vue datagrid

Edit modes

The datagrid supports various edit modes such as inline, dialog, and batch edit. These provide an interactive UI to add and edit records. Editing can also be performed programmatically.

Batch editing and saving bulk changes in Vue datagrid

Bulk changes

Bulk changes allow saving added, edited, and deleted records in a single request. This feature can be used in a datagrid through batch editing mode, which provides an Excel-like editing experience and saves the changes in bulk.

Vue datagrid using custom edit UI

Customizable edit UI

An editor for a datagrid cell can be specified by providing the edit type. The preferred editor can also be defined for specific columns.


Aggregation

Aggregates for column values can be easily visualized using the aggregate feature. Aggregates can be customized to display their value in individual summary rows, individual group summary rows, or in group caption rows.

Vue datagrid aggregate row values using built-in aggregate types

Built-in aggregate types

The datagrid relies on the Essential JS 2 data manager to aggregate column values. Default aggregate types such as sum, max, min, average, and count can be used. Aggregate values can be formatted before being displayed in the cell.

Vue datagrid aggregate value using user-defined or custom aggregate

User-defined aggregate types

Custom aggregate logic can be provided for a column. This requires a custom aggregate function that holds custom logic to calculate the aggregate value.


Paging

Through paging, a segment of data can be viewed from the assigned data source.

Vue datagrid on-demand data loading using paging

On-demand

The pager UI of the datagrid can be used to request on-demand data based on page details. Using simple properties, the pager can be customized.

Vue datagrid change page size using drop-down

Page size drop-down

The page size can be changed on the fly using the page size drop-down in the pager. The page size values in the drop-down can be customized.

Vue datagrid customized pager UI

Customizable pager UI

The pager UI can be customized using a pager template.


Filtering

Filtering allows data compaction. The datagrid supports various filter types such as filter bar, menu, check box, and Excel-like filter. The appropriate filter type can be chosen based on the application. Options to customize filter operators, case sensitivity, and diacritics are also available.

Vue datagrid filter rows using Excel filter

Powerful Excel-like filter

The Excel-like filter helps create complex filter criteria for a column by allowing users to select possible filter values from a check box list. Additionally, the advanced filter can be used to build complex filter criteria.

Vue datagrid customized filter UI

Extensible filter UI

Filter UI and column logic is applied based on the column type. It is possible to use a preferred filter UI and filtering logic for a column.

Vue datagrid search data

DataGrid rows can be searched either by using the built-in search box available in the toolbar or programmatically. The search options can be customized.


Sorting

DataGrid rows can be sorted against a column simply by clicking the desired column header. The data can be sorted either in ascending or descending order.

Vue datagrid sort rows by multiple columns

Sort multiple columns

Sort datagrid rows using multiple columns by clicking the desired column headers and holding Ctrl or Command.

Vue datagrid apply custom sort logic

Customize sort comparer

Sorting logic for a column can be user-defined. The custom sort comparer can use the preferred sorting logic.


Grouping

The datagrid supports grouping to visualize data in an organized way. Data can be grouped in ascending or descending order. Rows can be grouped by dragging and dropping the desired columns in the interactive drop area.

Group rows in Vue datagrid

N-level column grouping

N-level grouping can be performed without any restrictions. Hiding or showing grouped columns can also be defined.

Group rows by format in Vue datagrid

Group by format

By default, grouping is done based on the field value. A column can be grouped by the formatted value instead of the raw value to make viewing formatted date columns easier.


Selection

Rows or cells can be selected in the datagrid. One or more rows or cells can also be selected by holding Ctrl or Cmd, or programmatically.

Select range of cells and rows in Vue datagrid

Range selection

A range of cells can be selected by dragging the pointer over cells. This helps in selecting rows or cells to be copied to the clipboard.

Select rows using check box column in Vue datagrid

Check box selection

Check box selection allows the selection of rows using a check box column. This selection can persist even after other datagrid actions are performed. All the rows can also be selected by using the header Select All check box.


Templates

Templates can be used to create custom user experiences in the datagrid. The datagrid provides various template options, including templates for headers, columns, rows, detail rows, and toolbars.


Column

Choose visible columns using column chooser in Vue datagrid

Column chooser

The column chooser provides a list of column names paired with check boxes that allow the visibility to be toggled on the fly. This helps users control the column visibility through an interactive UI.

Reorder columns in Vue datagrid

Reorder

In the datagrid, columns can be reordered either through user interaction or programmatically. Simply dragging and dropping a column header into the desired column position will reorder the columns.

Resize column width in Vue datagrid

Resize

Resizing allows changing column width on the fly by simply dragging the right corner of the column header. The scroll bar will appear when the datagrid content width exceeds the element width.

Column menu in Vue datagrid

Column menu

Various column-based actions can be performed with the help of the column menu. The menu items can also be customized to list only preferred actions.

Freeze rows and columns in Vue datagrid

Freeze

Columns and rows can be frozen to allow scrolling and comparing cell values.

Cell spanning in Vue datagrid

Cell spanning

DataGrid cells can span multiple columns based on the preferred criteria.

Foreign key column with lookup data in Vue datagrid

Foreign data source

It is possible to show values from external or lookup data sources in a column based on foreign key and value mapping. Sorting, filtering, editing, grouping, and other operations can be performed in the foreign data column.

Custom value getter using value accessor in Vue datagrid

Value accessors

The value accessors specify how the cell value is to be retrieved from the data. The preferred value accessors can be used when the row data is not just a simple object.

Cell styling in Vue datagrid

Cell styling

DataGrid cell styles can be customized either by using CSS or programmatically.


Context menu

The context menu provides a list of actions to be performed in the datagrid. It appears when a cell, header, or the pager is right-clicked. The context menu items can be customized according to user preference.


Clipboard

Selected rows and cells can be copied from the datagrid. Use the Ctrl+C and Ctrl+Shift+H keyboard combinations to copy datagrid data with and without headers, respectively.


Stacked headers

Stacked headers allow grouping and visualizing column headers in a stacked manner. There is no limit to the number of columns that can be grouped. The data columns can still be grouped, sorted, and filtered.


Row height

Row heights can be adjusted to visualize more rows in the view port. It is also possible to set row height conditionally.


Exporting

Export to PDF, CSV, and Excel formats in Vue datagrid

Excel, PDF, CSV export

Export datagrid data to Excel, PDF, and CSV formats. The exported document can also be customized programmatically. This allows data from the datagrid to be used in other applications.

Print Vue datagrid content

Print

Print datagrid data either by using the print option from the toolbar or programmatically. All the rows in the datagrid will be printed regardless of paging. It is also possible to print the current view page only. The scroll bar will be removed before printing.


Accessibility

Keyboard navigation in Vue datagrid

Keyboard navigation

The datagrid ensures that every cell is accessible using the keyboard. Major features like sorting, selection, and editing can be performed using keyboard commands alone, no mouse interaction required. This helps in creating highly accessible applications using the datagrid component.

Accessibility and screen reader support in Vue datagrid

Screen reader

All datagrid cells have ARIA attributes to help them be recognized when using a screen reader.


Globalization and localization

Format date and number in Vue datagrid

Globalization

The datagrid enables users from different locales to use it by formatting the date, currency, and numbering to suit locale preferences. The datagrid uses the Essential JS 2 internalization library for handling value formatting.

Show right-to-left language in Vue datagrid

Right to left (RTL)

The datagrid supports right-to-left rendering, allowing the text direction and layout of the datagrid to be displayed from right to left. This improves the user experience and accessibility for RTL languages.

Localize Vue datagrid UI strings

Localization

All the datagrid strings in the user interface can be localized as needed. The datagrid uses the Essential JS 2 localization library to localize UI strings.


45+ VUE COMPONENTS

Transform your applications today by downloading our free evaluation versionDownload Free Trial

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.