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
React Data Presentation Tree Grid

Tree Grid

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

View Demo
React Data Presentation Horizontal Grid View

Horizontal

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

View Demo
React Data Presentation Card Layout

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.

View Demo
React Data Presentation Trellis View

Trellis

Trellis card display for perfect Kanban views of your tasks.

View Demo Learn More
React Data Presentation Gantt View

Gantt

Use the Gantt column to visualize project data ranges.

View Demo Learn More
React Data Presentation Calendar View

Calendar

Creative calendar implementations, sales reports, and weather forecasts.

View Demo
React Data Presentation Timeline Grouping

Timeline

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

View Demo
Masonry

Masonry

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

Try the 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 React Data Presentation 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.

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

View Demo
React Data Presentation 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.

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

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

View Demo
Calculated Fields

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.

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
Pop-Up Form Editing

Pop-Up Form Editing

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

View Demo
Drop-Down Form Editing

Drop-Down Form Editing

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

View Demo