A Complete Vue Data Presentation and Datagrid Platform

Go beyond traditional tabular displays by choosing from a variety of different presentation views including tree, card, masonry, trellis, timeline, Gantt, calendar, and grid.

Download Free Developer License (V 1.8.12.1371)
  • Free Unlimited Developer Licenses! Only pay for Deployment
  • Fast! Pure Vue, optimized for speed
  • Choose from a variety of views including:
    grids, cards, trellis, calendar, Gantt, news feed, timeline and more
  • Highly customizable
  • Change layouts with a single line of code
  • Full support for Angular, React, and Vue

Vue Data Presentation

DataViewsJS enables you to easily and professionally customize the presentation of your data using different layouts, row templates, data fields, calculations, and editing modes that are completely and easily customizable.

Present Your Data Using Views

Visualize data in your JavaScript application to provide different perspectives using the customizable data presentation options, which include Tree Grid, Horizontal Grid, Card, Calendar, Masonry, Kanban, Timeline, and Gantt.

Powerful Calculation Engine

Leverage the powerful calc engine to perform calculations on any set of JSON data. With our calculation engine, your computing power is optimized for large data and complex calculations.

Full Framework Support

DataViews is not dependent on any external libraries or frameworks, and provides full support for the major JavaScript frameworks, which include Angular, React, and Vue in the form of wrappers.

High Performance

DataViewsJS was designed from the start to be a fast, full-featured, and completely customizable developer tool for efficient data display and editing to meet any of your JavaScript application’s needs.

Localization

Localized resources for Chinese, Japanese, and Korean are included with DataViewsJS. Additional languages can be easily added by creating your own resource files and setting them with simple script code.

Professional Layouts

Modern data presentation patterns such as those you see on social networks and other sites become easy when you use DataViewsJS interchangeable layouts.

Build advanced data views for your CRM, project management, social networking, eCommerce or any business application. Achieve ultimate flexibility by making layouts, row templates, data fields, calculations, and editing modes completely and easily customizable. Use DataViewsJS layouts for analysis, performance monitoring, data reporting, dashboards, product catalogs, eCommerce, news feeds, project management applications, and much more.

Grid

Grid

Present your data in a traditional tabular row and allow the user to sort, filter, group, and edit with ease.

Tree Grid

Tree Grid

A quick and easy tree view for your hierarchical data. Includes special aggregation functions to summarize the data easily.

Horizontal

Horizontal

Columns can be arranged horizontally to create informative product comparison tables.

Card

Card

Lays out each row as easily formatted cards. Display cards in a variety of ways such as a list, in a grid, or in a trellis.

Trellis

Trellis

Trellis card display for perfect Kanban views of your tasks.

Gantt

Gantt

Use the Gantt column to visualize project data ranges.

Calendar

Calendar

Creative calendar implementations, sales reports, and weather forecasts.

Timeline

Timeline

Make each row an object on a timeline with options such as date and line placement and header toggle.

Masonry

Masonry

A size perfect gallery of your images with infinite scrolling, all with a single line of code.

DataViewsJS Top Features

DataViewsJS default grid layout

Grid Layout

Grid Layout is the default layout to present data and allows end-users to sort, filter, group, and edit with ease.

DataViewsJS offers a TreeGrid layout

Tree Grid View

Implement a quick and easy Grid Tree view to display and filter large amounts of hierarchical data.  

DataViewsJS Horizontal Layout

Horizontal Layout

Columns can be arranged horizontally to create informative product comparison tables.

DataViewsJS Card Layout

Card Layout

DataViewsJS provides the Card Layout to place each row in a defined block, or card.

DataViewsJS Trellis Grouping

Trellis Grouping

The trellis view is a grouping strategy that displays data laid out in a set of cells within a grid.

DataViewsJS offers a Masonry Layout option

Masonry Layout

Create a gallery of your images with infinite scrolling, all with a single line of code using the Masonry Layout.

DataViewsJS offers a Calendar grouping view

Calendar Grouping

Display data in a calendar view with custom styling using DataViewsJS's Calendar Grouping.

DataViewsJS Timeline Grouping

Timeline Grouping

Use Timeline Grouping to display rows of an object on a timeline with date, line placement, and header toggle. 

DataViewsJS Gannt View grouping

Gantt View

Visualize project start and end dates to maintain deliverables using the Gantt View grouping strategy.

Performance Benchmark

Performance Benchmark

Test out the performance of different grids compared to DataViewsJS with this interactive benchmark that tries out the same data rendering in different grids.

Data Binding

Data Binding

Bind DataViewsJS to data, with support for CRUD operations, infinite scrolling, live loading, pagination, serialization, and server-side sorting and filtering.

Auto Merging

Auto Merging

Combine DataViewsJS with SpreadJS by synchronizing data between different controls and DataViewsJS, or use the calculation engine on its own.

Grouping

Grouping

Customize how you group your data, including custom headers, footers, drag and drop to group, and header sparklines.

DataViewsJS offers customizable editing modes

Edit Modes

Allow editing to your data and set an edit mode, DVJS offers an inline editor, a pop-up form, and a drop-down edit form - all completely customizable!

Row Features

Row Features

Use rows in DataViewsJS in many different ways, including summarizing data in column headers, as navigation for other controls, or as a summary chart.

Sorting and Filtering

Sorting Filtering

Write expression strings as filter conditions and use one-click sorting on column headers to sort the data.

DataViewsJS support row locking to prevent editing

Lock Row

Take control of your data by locking a row to prevent user editing from editing a set of data.

DataViewsJS input options supports setting data validation.

Validation

Define data input validations to ensure end-users enter accurate and clean data.

DataViewsJS offers a Search Box plug-in

Search Box

Provide a visual search box to filter based on the data and the data type.

 

DataViews supports local data or server side pagination.

Pagination

Implement client-side paging of local or server-side data with DataViewsJS pagination.

DataViewsJS offers a header selection feature to select sets of data

Header Selection

DataViewsJS's header selection feature allows a user to select entire sets of data based on the rows and groups.

SpreadJS Integration

SpreadJS Integration

Combine DataViewsJS with SpreadJS by synchronizing data between different controls and DataViewsJS, or use the calculation engine on its own.

Localization

Localization

Change localization resources using built-in resources or custom text to change the language of DataViewsJS.

CSV Export

CSV Export

Exports rows of data in DataViewsJS to CSV files, copy them as CSV-formatted data to the clipboard, or load CSV as a data source into DataViewsJS.

Customize Everything

Layouts

Layouts

Each layout includes a full set of options and an API, so customization is simple. Decide between vertical or horizontal alignment, determine field placement, or format the overall look. The possibilities are endless.

Row Templates

Row Templates

Create templates for rows, groups, headers, and footers with plain HTML and CSS. Use templates to present a row on multiple lines in a traditional tabular display or create any kind of card you can imagine.

Built-In and Custom Data Field Presenters

Built-In and Custom Data Field Presenters

Use configurable presenters to determine how to show data fields, columns, and headers. Choose from built-in presenters, such as Sparklines, progress bars, and image containers or write your own.

Sparklines

Sparklines

Show data alerts and spot trends in your data with small graphs in the view known as sparklines. Customize where and how they are displayed with different styles and types.

Number Formatting

Number Formatting

Format data in DataViewsJS using formatting strings similar to those used in Microsoft Excel. Format data such as dates, currency, and percentages to fit your application needs.

Custom Presenters

Custom Presenters

Apply presenters and custom CSS classes to visualize your data the way you want by formatting data fields. Format images, visualize numbers, and apply conditional formatting.

Calculated Fields

Calculated Fields

Present calculated data fields outside of the data view by using predefined name formulas that can be placed anywhere on the page. Write functions and display results as numbers, strings, sparklines, and other indicators.

Customize Edit Modes

Allow users to edit data inline, with a pop-up form, or with a drop-down form. DataViewsJS will display fields in data appropriate controls such as text fields for strings and spinners for numbers. Each method is completely customizable, so you can make it look and behave the way you need.

Inline Editing

Inline Editing

Edit cells in place, much as you would when editing a spreadsheet.

Pop-Up Form Editing

Pop-Up Form Editing

Edit records in a form that overlays the React data view.

Drop-Down Form Editing

Drop-Down Form Editing

Edit records in a form that appears under the record being edited.