We are very excited to introduce a new JavaScript component that takes data and lays it out virtually any way you can imagine. This includes tabular grids, calendars, cards, trellis, masonry, Gantt, news feed, timeline and more. You give it JSON data, choose your layout, customize, and deploy. It all just takes a few lines of code. This is the first component of its kind and it is currently in Community Technology Preview mode. That means you can try it for free. This article covers what you need to know to learn about what Spread.Views is and how to get started with it. If you want to get straight to it, here are the four links you need:
How Spread.Views Works
Spread.Views is a very modular JavaScript data presentation library. You apply layouts and other formatting features by referencing JavaScript files. Spread.Views includes four layout engines:
- GridLayoutEngine: Standard grid used as the basis for standard grids, calendars, trellis views, and more. See an example.
- HorizontalLayoutEngine: Similar to the GridLayoutEngine with the columns and rows flipped. See an example.
- CardLayoutEngine: Organizes rows into cards that display in list or grid layout. See an example.
- MasonryLayoutEngine: Creates a card from each row and places it in optimum position according to horizontal size. Think Pinterest. See an example.
Once you have applied your primary layout engine, you can apply grouping strategies to arrange the data into a particular layout. A few examples:
- Apply TimelineGroupStrategy to group grid data into a formatted timeline. See an example.
- Apply TrellisGroupStrategy to group grid data into a Trello-like view. See an example.
- Apply CalendarGroupStrategy to group grid data into a Calendar view. See an example.
Once you have your layout, you can customize everything. Here are some of the customization points:
- Row Templates: Use HTML and CSS to format rows into multi-line templates or cards. See an example.
- Data Presenters: Use built-in or write presenters to present data fields however you like. Example include Sparklines, histograms, gauges, and images. See an example.
- Themes: Use standard CSS to theme everything.
- Editing Modes: Choose to allow users to edit data inline, in a pop-up, or in a form. Each case is customizable. See an example.
Calculation Engine
Spread.Views includes a calculation engine that you can plug in and use to create calculated fields, group summaries, and even provide Excel-like ad-hoc formula creation. Check out these examples:
- Calculated columns: Simple example that adds a calculated field to a table.
- Column Aggregator: Sums grouped data.
Ad-hoc Foumlas: Provides an Excel-like interface to perform calculations on data for what-if scenarios.
Designed for Speed
We haven't forgotten one of the most important factors: speed. Spread.Views is designed to be as fast and lightweight as possible. We have provided a live performance comparison here.
Release Plans
At the time of writing this article, Spread.Views is a Community Technology Preview and is not a production release. We plan to release it as part of the SpreadJS product line with SpreadJS v10 due in November 2016.
GrapeCity