Skip to main content Skip to footer
React Data Presentation and Data Grid Control Examples

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

Present Your Data Using Views

Visualize data in your React 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 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.

React Data Presentation Grid

Grid

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

View Demo

Top Features of Our React Data Presentation Controls

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.

Learn More View Demo
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.  

Learn More View Demo
DataViewsJS Horizontal Layout

Horizontal Layout

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

Learn More View Demo
DataViewsJS Card Layout

Card Layout

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

Learn More View Demo
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.

Learn More View Demo
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.

Learn More View Demo
DataViewsJS offers a Calendar grouping view

Calendar Grouping

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

Learn More View Demo
DataViewsJS Timeline Grouping

Timeline Grouping

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

Learn More View Demo
DataViewsJS Gannt View grouping

Gantt View

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

Learn More View Demo

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.

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

View Demo
Auto Merging

Auto Merging

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

View Demo

Grouping

Grouping

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

Learn more View Demo
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!

Learn More View Demo
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.

Learn More View Demo
Sorting and Filtering

Sorting Filtering

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

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

View Demo
DataViewsJS input options supports setting data validation.

Validation

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

View Demo
DataViewsJS offers a Search Box plug-in

Search Box

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

Learn More View Demo
DataViews supports local data or server side pagination.

Pagination

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

Learn More View Demo
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.

Learn More View Demo

SpreadJS Integration

SpreadJS Integration

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

View Demo
Localization

Localization

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

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

View Demo

Fully Customizable

React Data Presentation - Customize Professional Layouts

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.

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

Inline Editing

Inline Editing

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

View Demo