< Try Suite 6.5 with TypeScript support, grouping TreeGrid data, and columns’ drag-n-drop in Grid and TreeGrid

JavaScript DataView

dhtmlxDataView is a highly configurable JavaScript DataView with flexible customization for displaying data in a neat and orderly way.
Part of the modern Material-based Suite UI library.

Product Features

  • Ability to disable/enable items' selection
  • Cross-browser compatibility
  • Support for IE11+
  • Full customization
  • Rich JavaScript API
  • Configurable margin of items
  • Inline editing
  • Drag-n-drop of single and multiple items
  • Custom templates for items
  • Arrow keys navigation
  • Data loading in the JSON format
  • Multiselection of items

JavaScript DataView Initialization

Build a nice-looking DataView just in 5 easy steps:
Create an HTML file
Include the DataView js and css source files in the header
Add a container with an id - e.g. “dataview_container”
Initialize the widget with the dhx.DataView object constructor
Specify configuration options if needed

Why Choose DHTMLX JavaScript DataView?

picture for description

Make your data beautiful with dhtmlxDataView

The component serves for displaying objects according to custom templates. It allows you to arrange multiple objects with similar properties within a single container and get your data organized the way you need. For example, you can present data in the form of a grid or a list. Our JavaScript DataView also supports drag-n-drop of items between several DataViews.

picture for description

Play around with the rich JavaScript API

If you're building an online store, or image gallery, or need to show a number of similar objects on a page, you can use DHTMLX DataView, which will greatly simplify this task. Due to the rich JavaScript API, you can control how many items are in one row and what is the margin around them. Besides, it’s possible to create a custom template for showing the content of items according to your requirements.

picture for description

Customize your DataView to the bits

A wide range of customization options allows you to modify the look and feel of our JavaScript DataView to match the style of your web app and answer all your needs. You can easily create new CSS classes with the necessary settings and style the whole DataView or just the cells of your choice. For instance, apply the styling you wish to each item under the even number.

Support for Angular, React, Vue.js

We have developed special wrappers for using dhtmlxDataView and our other UI components in your projects based on the most widespread frameworks - Angular, React, and Vue.js. You can download the trial version of Suite for a 30-day evaluation, which comes with technical support from our team.

Support & Learning Resources

We provide comprehensive documentation with technical samples. Moreover, our dedicated support team is fast and qualified. Find the suitable way to get support:


File manager built with the help of Suite components: Layout, Grid, DataView, Toolbar, etc.

Try All UI Components for Free

All JavaScript UI components are part of the dhtmlxSuite library. You can download the free trial version of Suite and benefit from:

30 days of free evaluation

Official technical support

Full toolkit of 21 components

PRO features

Need help with dhtmlxDataView integration into your app? Contact us