DataViews Library for JavaScript and TypeScript
DataViews Grid is a grid control, that binds to an array of objects and displays the data in tabular format. Available column data types include String, Integer, RealNumber, Date, DateTime, Currency, Image and Lookup. Supports row virtualization, inplace editing, CRUD (create, rad, update, delete) operations, selection, sorting, localization and custom theming.
Installing
For the latest stable version:
npm i @mindfusion/dataviews
Features
- Different data typesSort and filter of grid data
- Custom data models through implementation of the GridModel interface
- In-place edit of cells
- Custom cell editors
- Read-only grid columns
- Multiple row selection
- CRUD operations can be executed through the UI or programmatically
- Custom commands on grid rows
- Localization of cell data
- Conditional styling
- Styling through themes
- Row virtualization for faster rendering
What's new in JS DataViews 2.1.2
The library registers the Grid class as a web component. You can use the tag to create the control.
When instantiated as a web component, the control creates required HTML elements as internal shadow DOM. You can get the JavaScript object corresponding to a web component by calling the find method with id argument.
<mindfusion-grid id="grid">
</mindfusion-grid>
var dv = MindFusion.DataViews;
var grid = dv.Grid.find("grid");
grid.model = new dv.ArrayModel(participants, columns, "index");
What's new in JS DataViews 2.1
The DataViews module now includes a Property Grid providing user interface for browsing and editing the properties of an object. The PropertyGrid control can be bound to any object or an array of objects as specified by its selectedObject property. If showAllProperties is set to true, the control enumerates all properties and fields of the object and its prototype chain, resolves their data types and displays their name and value in a grid layout. If showAllProperties is set to false, only properties and fields included in the metaData dictionary are displayed.
React support
The GridView React component allows integrating the MindFusion.DataViews API into React applications. It is a wrapper component for the Grid control, handles the rendering and keeps its DOM in sync with React’s virtual DOM. Grid properties can be set from JSX, and grid events can be handled through JSX syntax as well.
The GridView component for React on npm.
Documentation
Samples
A variety of online samples are uploaded at the demo site. You can download an archive with all samples and all files for the library from here.
Additional Information
Learn more about JS DataViews from the official product page. Stay in touch with MindFusion about our latest product announcements, tutorials and programming guidelines via Twitter or our company blog.
Technical Support
Licensing
The end-user license agreement for MindFusion developer tools is uploaded here.