JavaScript Data Presentation and Datagrid | JS Data Viewer

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

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

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

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

Try The Demo

Tree Grid

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

Try The Demo

Horizontal

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

Try The Demo

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.

Try The Demo

Trellis

Trellis card display for perfect Kanban views of your tasks.

Try The Demo

Gantt

Use the Gantt column to visualize project data ranges.

Try The Demo

Calendar

Creative calendar implementations, sales reports, and weather forecasts.

Try The Demo

Timeline

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

Try The Demo

Masonry

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

Try The Demo

Customize Everything

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.

Try The Demo

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.

Try The Demo

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.

Try The Demo

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.

Try The Demo

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.

Try The Demo

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.

Try The Demo

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.

Try The Demo

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.