A Complete React 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 React, 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 React Data Presentation Controls
React 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 React 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
Present your data in a traditional tabular row and allow the user to sort, filter, group, and edit with ease.
Tree Grid
A quick and easy tree view for your hierarchical data. Includes special aggregation functions to summarize the data easily.
Horizontal
Columns can be arranged horizontally to create informative product comparison tables.
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.
Timeline
Make each row an object on a timeline with options such as date and line placement and header toggle.
Masonry
A size perfect gallery of your images with infinite scrolling, all with a single line of code.
Top Features of Our React 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
Layouts
Each layout includes a full set of React 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
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
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
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
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
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
Present calculated data fields outside of the React 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 React 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.
