
A Complete JavaScript 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.16.1407)- Free Unlimited Developer Licenses! Only pay for Deployment
- Fast! Pure JavaScript, 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
Benefits of Our JavaScript Data Presentation Controls
JavaScript 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.
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.
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.
Top Features of Our JavaScript Data Presentation Controls

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

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

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

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

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

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

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

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

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

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
Bind DataViewsJS to data, with support for CRUD operations, infinite scrolling, live loading, pagination, serialization, and server-side sorting and filtering.

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

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

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
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 Filtering
Write expression strings as filter conditions and use one-click sorting on column headers to sort the data.

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

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

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

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

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

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

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

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.
Fully Customizable
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.