Data Grid library for JavaScript

MindFusion DataViews lets you to render vast data sets with impressive performance, style and user-friendly interface.

Sorting, Filtering and Navigation in a JavaScript Grid

Various Data Types

The data types supported by the grid model include Date, DateTime, Lookup, Image, Integer, String, RealNumber and more. You can add your own data type by implementing the GridModel interface. Data can be filtered and sorted.

Online Sample: A Grid with Quick Navigation and Sorting
Video Tutorial: A Grid with Various Data Type Columns

Cell Editors

The various cell editors provide a convenient way for users to edit cell data. The editors include combo box, which can contain values of your choice; an image picker; a customizable calendar that renders date and time values in a format you specify, and more.

Online Sample: Data Validation in the JavaScript Grid Library
Video Tutorial: How to Implement Data Validation in the Grid Control

CRUD Operations

Create, read, update and delete operations can be executed either through the UI or programmatically. Right-click on each grid row renders a context menu for add and delete of a row. Grid-columns can be read-only.

Online Sample: CRUD (Create, Read, Update, Delete) operations in the JavaScript Grid Library
Video Tutorial: Different Ways to Add an Image Column to a Grid

User Interaction

In-place edit of cells is fully supported and cells can render custom data editors. The grid control allows multiple selection of rows. Custom commands on grid rows can be executed. The rich event set allows you to handle any user action and cancel those you choose.

Online Sample: Events in the JavaScript DataViews Library
Video Tutorial: Search and Cycling of Results in a Grid

Fast Rendering

The Grid control uses row virtualization to draw only those cells that are currently visible. This approach greatly improves the speed with which data is visualized on the screen and makes browsing grids with thousands of rows fast and resource-efficient.

Online Sample: Various Data Types and Rendering Large Data Sets with the JavaScript Grid Library

Appearance

The grid control supports theme-based appearance. The themes are in CSS format and you can freely edit them or replicate them in order to create a new theme. Conditional styling can be applied as well as custom drawing of cells. Data can be localized and rendered in a format of your choice.

Online Sample: Selection in the JavaScript Grid