DataViewsJS - Enhanced Data Presentation Views
Choose from a variety of views including: grids, cards, trellis, calendar, Gantt, news feed, timeline and more
Write customized reports entirely in code
Change layouts with a single line of code
DataViewsJS enables you and your users to easily and professionally customize the presentation of the data. Visualize and provide different perspectives into the data using Grid, Horizontal Grid, Card, Masonry, Kanban, Timeline, and Gantt.
Virtual Loading and Server-Side Paging
You get to make the decision. Only load the specific data that you need from a server as you need it to better optimize the performance of your application.
Standalone 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. The calculation engine can also be used separately from DataViewsJS.
Full Framework Support
Fast, full-featured, and customizable data grid for efficient data display and editing.
Includes localized resources for Chinese, Japanese and Korean. Additional languages can be easily added.
Professional Layout Plugins
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.
Each layout includes a full set of 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.
Use the Gantt column to visualize project data ranges
Write your own presenters to format data fields. Useful to format images, visualize numbers, and apply conditional formatting.
Dropdown Form Editing
Edit records in a form that appears under the record being edited
Write functions and display results as numbers, strings, sparklines, and other indicators
This example shows the most basic implementation of DataViews and demonstrates how easy it is to add a DataView component to a page
Explore all of the DataViewJS Features
DataViews Angular Component
Using DataViews in PureJS
DataViews React Component
Referencing DataViews in your npm-based applications
DataViews Vue Component
Creating a Basic Grid
Using Touch Support
Using DataViews Libraries
Adding Action Columns
Binding Multiple Data Fields to a Single Column
Adding Column Presenters
Adding a Column Tool Panel
Adding Multiple Column Headers
Adding Pinned Columns
Adding a Sparkline Column
Working with Rows
Auto Add Row
Enabling Auto Row Height
Using a Column Header Row
Using Row Templates
Calculations using DAX
Adding a Search Box
Using the Tree Grid
Using a Custom Inline Editor
Creating an editForm Template
Using Editor Modes
Using Grouping Strategy
In DataViewsJS, the Trellis grouping strategy combined with the Grid layout engine gives you the power to create this kind of organization. With this implementation, cards are organized into vertical lists in a grid view, allowing the user to drag and drop cards from different columns depending on what is being worked on.
Resources for GrapeCity's Dataviewsjs
| firstname.lastname@example.org | www.grapecity.com | 800.858.2739 | 412.681.4343 ©2020 GrapeCity, Inc. All Rights Reserved.