Demos
Features
Workbook
Scrollbars
Overview

Scrollbars Overview

SpreadJS allows horizontal and vertical scrollbars. In addition, vertically scrolling by mouse wheel, horizontally scrolling by mouse wheel while press the Shift key.

JavaScript
Angular
Vue
Vue3
React
Description
app.component.ts
index.html
app.component.html
app.data.ts
styles.css
Copy to CodeMine

Users can use the vertical scrollbar's arrow buttons to scroll up or down one row at a time and one column at a time for the horizontal scrollbar. They can scroll faster by holding and dragging the scrollbar thumb. The fastest way to scroll is to click in the scroll box container which is the space between the scrollbar's thumb and arrow buttons which scrolls the sheet by page instead of rows.

The SpreadJS scrollbars are enabled by default but can disabled by setting the showVerticalScrollbar and showHorizontalScrollbar methods of the Workbook object to false:

    // get a reference to the workbook
    var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
    // disable the vertical scrollbar
    spread.options.showVerticalScrollbar = false;
    // disable the horizontal scrollbar
    spread.options.showHorizontalScrollbar = false;

The scrollbars can show a tooltip when the user drags a scrollbar's box. If enabled for the vertical scrollbar, the scroll tip shows the top row in view when dragging the vertical scrollbar's box. Similarly, the scroll tip shows the leftmost column in view when dragging the horizontal scrollbar box. The scroll tips are enabled using the workbook's showScrollTip option:

    var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
    // enable scroll tips for both scrollbars
    spread.options.showScrollTip = GC.Spread.Sheets.ShowScrollTip.both;
    // Other possible values:
    //    GC.Spread.Sheets.ShowScrollTip.horizontal;
    //    GC.Spread.Sheets.ShowScrollTip.vertical;
    //    GC.Spread.Sheets.ShowScrollTip.none;

Controlling the scroll box container

Normally, the user can scroll past the last row or column of the active sheet which brings the blank area of the sheet into view. One useful workbook option to set is the scrollbarMaxAlign option which when enabled restricts scrolling to the area of the active sheet that has rows or columns.

    // prevent scrolling past the last row or column
    spread.options.scrollbarMaxAlign = true;

In addition to its use for fast scrolling, the size of the scroll thumb container is a visual indicator to the user on how much he needs to scroll to reach to top or bottom of the sheet. The size of this container can be controlled with two options: The first option is scrollbarShowMax which calculates the size of the container based on the entire number of rows or columns of the active sheet. The second is scrollIgnoreHidden which ignores hidden rows or columns in the calculation of the size of the box container.

The following items are treated as hidden:

  • Zero height rows.
  • Zero height columns.
  • Hidden rows or columns.
  • Rows or columns included in a collapsed group.
  • Filtered out rows in a filtered table or list.
    // control the height or width of the scroll box container:
    // the area between the scrollbar's box and arrows
    spread.options.scrollbarShowMax = true;
    // Ignore hidden rows when calculating the size of the scroll
    // box container
    spread.options.scrollIgnoreHidden = true;
Users can use the vertical scrollbar's arrow buttons to scroll up or down one row at a time and one column at a time for the horizontal scrollbar. They can scroll faster by holding and dragging the scrollbar thumb. The fastest way to scroll is to click in the scroll box container which is the space between the scrollbar's thumb and arrow buttons which scrolls the sheet by page instead of rows. The SpreadJS scrollbars are enabled by default but can disabled by setting the showVerticalScrollbar and showHorizontalScrollbar methods of the Workbook object to false: The scrollbars can show a tooltip when the user drags a scrollbar's box. If enabled for the vertical scrollbar, the scroll tip shows the top row in view when dragging the vertical scrollbar's box. Similarly, the scroll tip shows the leftmost column in view when dragging the horizontal scrollbar box. The scroll tips are enabled using the workbook's showScrollTip option: Controlling the scroll box container Normally, the user can scroll past the last row or column of the active sheet which brings the blank area of the sheet into view. One useful workbook option to set is the scrollbarMaxAlign option which when enabled restricts scrolling to the area of the active sheet that has rows or columns. In addition to its use for fast scrolling, the size of the scroll thumb container is a visual indicator to the user on how much he needs to scroll to reach to top or bottom of the sheet. The size of this container can be controlled with two options: The first option is scrollbarShowMax which calculates the size of the container based on the entire number of rows or columns of the active sheet. The second is scrollIgnoreHidden which ignores hidden rows or columns in the calculation of the size of the box container. The following items are treated as hidden: Zero height rows. Zero height columns. Hidden rows or columns. Rows or columns included in a collapsed group. Filtered out rows in a filtered table or list.
import { Component, NgModule, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { SpreadSheetsModule } from '@mescius/spread-sheets-angular'; import GC from '@mescius/spread-sheets'; import { getData } from './app.data'; import './styles.css'; @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { autoGenerateColumns = false; dataSource: any[]; spread: GC.Spread.Sheets.Workbook; hostStyle = { width: 'calc(100% - 280px)', height: '100%', overflow: 'hidden', float: 'left' }; constructor() { } initSpread($event: any) { this.spread = $event.spread; } showScrollTip(e: any) { let spread = this.spread; var result = parseInt(e.target.value); spread.options.showScrollTip = result; } showHorizontalScrollbar(e: any) { let spread = this.spread; spread.options.showHorizontalScrollbar = e.target.checked; } showVerticalScrollbar(e: any) { let spread = this.spread; spread.options.showVerticalScrollbar = e.target.checked; } scrollbarMaxAlign(e: any) { let spread = this.spread; spread.options.scrollbarMaxAlign = e.target.checked; } scrollbarShowMax(e: any) { let spread = this.spread; spread.options.scrollbarShowMax = e.target.checked; } scrollIgnoreHidden(e: any) { let spread = this.spread; spread.options.scrollIgnoreHidden = e.target.checked; } } @NgModule({ imports: [BrowserModule, SpreadSheetsModule], declarations: [AppComponent], exports: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule);
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/angular/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <!-- Polyfills --> <script src="$DEMOROOT$/en/angular/node_modules/core-js/client/shim.min.js"></script> <script src="$DEMOROOT$/en/angular/node_modules/zone.js/fesm2015/zone.min.js"></script> <!-- SystemJS --> <script src="$DEMOROOT$/en/angular/node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.import('@angular/compiler'); System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('$DEMOROOT$/en/lib/angular/license.ts'); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html>
<div class="sample-tutorial"> <gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="initSpread($event)"> <gc-worksheet></gc-worksheet> </gc-spread-sheets> <div class="options-container"> <p> Change the different properties below to see how it affects the different aspects of the workbook scrollbars.</p> <div class="option-row"> <label>showScrollTip:</label> <select id="optShowScrollTip" (change)="showScrollTip($event)"> <option value="0" selected="selected">None</option> <option value="1">Horizontal</option> <option value="2">Vertical</option> <option value="3">Both</option> </select> </div> <hr /> <div class="option-row"> <input type="checkbox" id="showHorizontalScrollbar" checked="checked" (change)="showHorizontalScrollbar($event)" /> <label for="showHorizontalScrollbar">Horizontal Scrollbar</label> </div> <label >Set this to have the horizontal scrollbar show.</label> <div class="option-row"> <input type="checkbox" id="showVerticalScrollbar" checked="checked" (change)="showVerticalScrollbar($event)" /> <label for="showVerticalScrollbar">Vertical Scrollbar</label> </div> <label >Set this to have the vertical scrollbar show.</label> <div class="option-row"> <input type="checkbox" id="scrollbarMaxAlign" (change)="scrollbarMaxAlign($event)" /> <label for="scrollbarMaxAlign">Scrollbar Max Align</label> </div> <label>Set this to restrict the scrolling to the max number of rows/columns.</label> <div class="option-row"> <input type="checkbox" id="scrollbarShowMax" checked="checked" (change)="scrollbarShowMax($event)" /> <label for="scrollbarShowMax">Scrollbar Show Max</label> </div> <label>Set this to have the scrollbar show the max scroll space.</label> <hr /> <div class="option-row"> <input type="checkbox" id="scrollIgnoreHidden" (change)="scrollIgnoreHidden($event)" /> <label for="scrollIgnoreHidden">Scroll Ignore Hidden</label> </div> <label >Set this to ignore the hidden rows or columns.</label> </div> </div>
export function getData() { return [ { "Film": "27 Dresses", "Genre": "Comedy", "Lead Studio": "Fox", "Audience Score %": 71, "Profitability": 5.34, "Rating": 40, "Worldwide Gross": 160.30, "Year": 2008 }, { "Film": "(500) Days of Summer", "Genre": "Comedy", "Lead Studio": "Fox", "Audience Score %": 81, "Profitability": 8.09, "Rating": 87, "Worldwide Gross": 60.72, "Year": 2009 }, { "Film": "A Dangerous Method", "Genre": "Drama", "Lead Studio": "Independent", "Audience Score %": 89, "Profitability": 0.44, "Rating": 79, "Worldwide Gross": 8.97, "Year": 2011 }, { "Film": "A Serious Man", "Genre": "Drama", "Lead Studio": "Universal", "Audience Score %": 64, "Profitability": 4.38, "Rating": 89, "Worldwide Gross": 30.68, "Year": 2009 }, { "Film": "Across the Universe", "Genre": "Romance", "Lead Studio": "Independent", "Audience Score %": 84, "Profitability": 0.65, "Rating": 54, "Worldwide Gross": 29.36, "Year": 2007 }, { "Film": "Beginners", "Genre": "Comedy", "Lead Studio": "Independent", "Audience Score %": 80, "Profitability": 4.47, "Rating": 84, "Worldwide Gross": 14.31, "Year": 2011 }, { "Film": "Dear John", "Genre": "Drama", "Lead Studio": "Sony", "Audience Score %": 66, "Profitability": 4.5988, "Rating": 29, "Worldwide Gross": 114.97, "Year": 2010 }, { "Film": "Enchanted", "Genre": "Comedy", "Lead Studio": "Disney", "Audience Score %": 80, "Profitability": 4.00, "Rating": 93, "Worldwide Gross": 340.48, "Year": 2007 }, { "Film": "Fireproof", "Genre": "Drama", "Lead Studio": "Independent", "Audience Score %": 51, "Profitability": 66.93, "Rating": 40, "Worldwide Gross": 33.46, "Year": 2008 }, { "Film": "Four Christmases", "Genre": "Comedy", "Lead Studio": "Warner Bros.", "Audience Score %": 52, "Profitability": 2.02, "Rating": 26, "Worldwide Gross": 161.83, "Year": 2008 }, { "Film": "Ghosts of Girlfriends Past", "Genre": "Comedy", "Lead Studio": "Warner Bros.", "Audience Score %": 47, "Profitability": 2.0444, "Rating": 27, "Worldwide Gross": 102.22, "Year": 2009 }, { "Film": "Gnomeo and Juliet", "Genre": "Animation", "Lead Studio": "Disney", "Audience Score %": 52, "Profitability": 5.38, "Rating": 56, "Worldwide Gross": 193.96, "Year": 2011 }, { "Film": "Going the Distance", "Genre": "Comedy", "Lead Studio": "Warner Bros.", "Audience Score %": 56, "Profitability": 1.31, "Rating": 53, "Worldwide Gross": 42.05, "Year": 2010 }, { "Film": "Good Luck Chuck", "Genre": "Comedy", "Lead Studio": "Lionsgate", "Audience Score %": 61, "Profitability": 2.36, "Rating": 3, "Worldwide Gross": 59.19, "Year": 2007 }, { "Film": "He's Just Not That Into You", "Genre": "Comedy", "Lead Studio": "Warner Bros.", "Audience Score %": 60, "Profitability": 7.15, "Rating": 42, "Worldwide Gross": 178.84, "Year": 2009 }, { "Film": "High School Musical 3: Senior Year", "Genre": "Comedy", "Lead Studio": "Disney", "Audience Score %": 76, "Profitability": 22.91, "Rating": 65, "Worldwide Gross": 252.04, "Year": 2008 }, { "Film": "I Love You Phillip Morris", "Genre": "Comedy", "Lead Studio": "Independent", "Audience Score %": 57, "Profitability": 1.34, "Rating": 71, "Worldwide Gross": 20.1, "Year": 2010 }, { "Film": "It's Complicated", "Genre": "Comedy", "Lead Studio": "Universal", "Audience Score %": 63, "Profitability": 2.64, "Rating": 56, "Worldwide Gross": 224.6, "Year": 2009 }, { "Film": "Jane Eyre", "Genre": "Romance", "Lead Studio": "Universal", "Audience Score %": 77, "Profitability": null, "Rating": 85, "Worldwide Gross": 30.14, "Year": 2011 }, { "Film": "Just Wright", "Genre": "Comedy", "Lead Studio": "Fox", "Audience Score %": 58, "Profitability": 1.79, "Rating": 45, "Worldwide Gross": 21.56, "Year": 2010 }, { "Film": "Killers", "Genre": "Action", "Lead Studio": "Lionsgate", "Audience Score %": 45, "Profitability": 1.24, "Rating": 11, "Worldwide Gross": 93.4, "Year": 2010 }, { "Film": "Knocked Up", "Genre": "Comedy", "Lead Studio": "Universal", "Audience Score %": 83, "Profitability": 6.63, "Rating": 91, "Worldwide Gross": 219.00, "Year": 2007 }, { "Film": "Leap Year", "Genre": "Comedy", "Lead Studio": "Universal", "Audience Score %": 49, "Profitability": 1.71, "Rating": 21, "Worldwide Gross": 32.59, "Year": 2010 }, { "Film": "Letters to Juliet", "Genre": "Comedy", "Lead Studio": "Summit", "Audience Score %": 62, "Profitability": 2.639333333, "Rating": 40, "Worldwide Gross": 79.18, "Year": 2010 }, { "Film": "License to Wed", "Genre": "Comedy", "Lead Studio": "Warner Bros.", "Audience Score %": 55, "Profitability": 1.98, "Rating": 8, "Worldwide Gross": 69.30, "Year": 2007 }, { "Film": "Life as We Know It", "Genre": "Comedy", "Lead Studio": "Independent", "Audience Score %": 62, "Profitability": 2.53, "Rating": 28, "Worldwide Gross": 96.16, "Year": 2010 }, { "Film": "Love & Other Drugs", "Genre": "Comedy", "Lead Studio": "Fox", "Audience Score %": 55, "Profitability": 1.81, "Rating": 48, "Worldwide Gross": 54.53, "Year": 2010 }, { "Film": "Love Happens", "Genre": "Drama", "Lead Studio": "Universal", "Audience Score %": 40, "Profitability": 2.00, "Rating": 18, "Worldwide Gross": 36.08, "Year": 2009 }, { "Film": "Made of Honor", "Genre": "Comedy", "Lead Studio": "Sony", "Audience Score %": 61, "Profitability": 2.64, "Rating": 13, "Worldwide Gross": 105.96, "Year": 2008 }, { "Film": "Mamma Mia!", "Genre": "Comedy", "Lead Studio": "Universal", "Audience Score %": 76, "Profitability": 9.23, "Rating": 53, "Worldwide Gross": 609.47, "Year": 2008 }, { "Film": "Marley and Me", "Genre": "Comedy", "Lead Studio": "Fox", "Audience Score %": 77, "Profitability": 3.746781818, "Rating": 63, "Worldwide Gross": 206.073, "Year": 2008 }, { "Film": "Midnight in Paris", "Genre": "Romance", "Lead Studio": "Sony", "Audience Score %": 84, "Profitability": 8.74, "Rating": 93, "Worldwide Gross": 148.66, "Year": 2011 }, { "Film": "Miss Pettigrew Lives for a Day", "Genre": "Comedy", "Lead Studio": "Independent", "Audience Score %": 70, "Profitability": 0.25, "Rating": 78, "Worldwide Gross": 15.17, "Year": 2008 }, { "Film": "Monte Carlo", "Genre": "Romance", "Lead Studio": "20th Century Fox", "Audience Score %": 50, "Profitability": 1.98, "Rating": 38, "Worldwide Gross": 39.66, "Year": 2011 }, { "Film": "Music and Lyrics", "Genre": "Romance", "Lead Studio": "Warner Bros.", "Audience Score %": 70, "Profitability": 3.64, "Rating": 63, "Worldwide Gross": 145.89, "Year": 2007 }, { "Film": "My Week with Marilyn", "Genre": "Drama", "Lead Studio": "The Weinstein Company", "Audience Score %": 84, "Profitability": 0.82, "Rating": 83, "Worldwide Gross": 8.25, "Year": 2011 }, { "Film": "New Year's Eve", "Genre": "Romance", "Lead Studio": "Warner Bros.", "Audience Score %": 48, "Profitability": 2.53, "Rating": 8, "Worldwide Gross": 142.04, "Year": 2011 }, { "Film": "Nick and Norah's Infinite Playlist", "Genre": "Comedy", "Lead Studio": "Sony", "Audience Score %": 67, "Profitability": 3.35, "Rating": 73, "Worldwide Gross": 33.52, "Year": 2008 }, { "Film": "No Reservations", "Genre": "Comedy", "Lead Studio": "", "Audience Score %": 64, "Profitability": 3.30, "Rating": 39, "Worldwide Gross": 92.60, "Year": 2007 }, { "Film": "Not Easily Broken", "Genre": "Drama", "Lead Studio": "Independent", "Audience Score %": 66, "Profitability": 2.14, "Rating": 34, "Worldwide Gross": 10.7, "Year": 2009 }, { "Film": "One Day", "Genre": "Romance", "Lead Studio": "Independent", "Audience Score %": 54, "Profitability": 3.68, "Rating": 37, "Worldwide Gross": 55.24, "Year": 2011 }, { "Film": "Our Family Wedding", "Genre": "Comedy", "Lead Studio": "Independent", "Audience Score %": 49, "Profitability": null, "Rating": 14, "Worldwide Gross": 21.37, "Year": 2010 }, { "Film": "Over Her Dead Body", "Genre": "Comedy", "Lead Studio": "New Line", "Audience Score %": 47, "Profitability": 2.07, "Rating": 15, "Worldwide Gross": 20.71, "Year": 2008 }, { "Film": "P.S. I Love You", "Genre": "Romance", "Lead Studio": "Independent", "Audience Score %": 82, "Profitability": 5.10, "Rating": 21, "Worldwide Gross": 153.09, "Year": 2007 }, { "Film": "Penelope", "Genre": "Comedy", "Lead Studio": "Summit", "Audience Score %": 74, "Profitability": 1.38, "Rating": 52, "Worldwide Gross": 20.74, "Year": 2008 }, { "Film": "Rachel Getting Married", "Genre": "Drama", "Lead Studio": "Independent", "Audience Score %": 61, "Profitability": 1.38, "Rating": 85, "Worldwide Gross": 16.61, "Year": 2008 }, { "Film": "Remember Me", "Genre": "Drama", "Lead Studio": "Summit", "Audience Score %": 70, "Profitability": 3.49, "Rating": 28, "Worldwide Gross": 55.86, "Year": 2010 }, { "Film": "Sex and the City", "Genre": "Comedy", "Lead Studio": "Warner Bros.", "Audience Score %": 81, "Profitability": 7.22, "Rating": 49, "Worldwide Gross": 415.25, "Year": 2008 }, { "Film": "Sex and the City 2", "Genre": "Comedy", "Lead Studio": "Warner Bros.", "Audience Score %": 49, "Profitability": 2.88, "Rating": 15, "Worldwide Gross": 288.35, "Year": 2010 }, { "Film": "She's Out of My League", "Genre": "Comedy", "Lead Studio": "Paramount", "Audience Score %": 60, "Profitability": 2.44, "Rating": 57, "Worldwide Gross": 48.81, "Year": 2010 }, { "Film": "Something Borrowed", "Genre": "Romance", "Lead Studio": "Independent", "Audience Score %": null, "Profitability": 1.71, "Rating": null, "Worldwide Gross": 60.18, "Year": 2011 }, { "Film": "Tangled", "Genre": "Animation", "Lead Studio": "Disney", "Audience Score %": 88, "Profitability": 1.36, "Rating": 89, "Worldwide Gross": 355.08, "Year": 2010 }, { "Film": "The Back-up Plan", "Genre": "Comedy", "Lead Studio": "CBS", "Audience Score %": 47, "Profitability": 2.20, "Rating": 20, "Worldwide Gross": 77.09, "Year": 2010 }, { "Film": "The Curious Case of Benjamin Button", "Genre": "Fantasy", "Lead Studio": "Warner Bros.", "Audience Score %": 81, "Profitability": 1.78, "Rating": 73, "Worldwide Gross": 285.43, "Year": 2008 }, { "Film": "The Duchess", "Genre": "Drama", "Lead Studio": "Paramount", "Audience Score %": 68, "Profitability": 3.20, "Rating": 60, "Worldwide Gross": 43.30, "Year": 2008 }, { "Film": "The Heartbreak Kid", "Genre": "Comedy", "Lead Studio": "Paramount", "Audience Score %": 41, "Profitability": 2.12, "Rating": 30, "Worldwide Gross": 127.76, "Year": 2007 }, { "Film": "The Invention of Lying", "Genre": "Comedy", "Lead Studio": "Warner Bros.", "Audience Score %": 47, "Profitability": 1.75, "Rating": 56, "Worldwide Gross": 32.4, "Year": 2009 }, { "Film": "The Proposal", "Genre": "Comedy", "Lead Studio": "Disney", "Audience Score %": 74, "Profitability": 7.86, "Rating": 43, "Worldwide Gross": 314.7, "Year": 2009 }, { "Film": "The Time Traveler's Wife", "Genre": "Drama", "Lead Studio": "Paramount", "Audience Score %": 65, "Profitability": 2.59, "Rating": 38, "Worldwide Gross": 101.33, "Year": 2009 }, { "Film": "The Twilight Saga: New Moon", "Genre": "Drama", "Lead Studio": "Summit", "Audience Score %": 78, "Profitability": 14.19, "Rating": 27, "Worldwide Gross": 709.82, "Year": 2009 }, { "Film": "The Ugly Truth", "Genre": "Comedy", "Lead Studio": "Independent", "Audience Score %": 68, "Profitability": 5.40, "Rating": 14, "Worldwide Gross": 205.3, "Year": 2009 }, { "Film": "Twilight", "Genre": "Romance", "Lead Studio": "Summit", "Audience Score %": 82, "Profitability": 10.18, "Rating": 49, "Worldwide Gross": 376.66, "Year": 2008 }, { "Film": "Twilight: Breaking Dawn", "Genre": "Romance", "Lead Studio": "Independent", "Audience Score %": 68, "Profitability": 6.38, "Rating": 26, "Worldwide Gross": 702.17, "Year": 2011 }, { "Film": "Tyler Perry's Why Did I get Married", "Genre": "Romance", "Lead Studio": "Independent", "Audience Score %": 47, "Profitability": 3.72, "Rating": 46, "Worldwide Gross": 55.862886, "Year": 2007 }, { "Film": "Valentine's Day", "Genre": "Comedy", "Lead Studio": "Warner Bros.", "Audience Score %": 54, "Profitability": 4.18, "Rating": 17, "Worldwide Gross": 217.57, "Year": 2010 }, { "Film": "Waiting For Forever", "Genre": "Romance", "Lead Studio": "Independent", "Audience Score %": 53, "Profitability": 0.005, "Rating": 6, "Worldwide Gross": 0.025, "Year": 2011 }, { "Film": "Waitress", "Genre": "Romance", "Lead Studio": "Independent", "Audience Score %": 67, "Profitability": 11.08, "Rating": 89, "Worldwide Gross": 22.17, "Year": 2007 }, { "Film": "WALL-E", "Genre": "Animation", "Lead Studio": "Disney", "Audience Score %": 89, "Profitability": 2.89, "Rating": 96, "Worldwide Gross": 521.28, "Year": 2008 }, { "Film": "Water For Elephants", "Genre": "Drama", "Lead Studio": "20th Century Fox", "Audience Score %": 72, "Profitability": 3.081421053, "Rating": 60, "Worldwide Gross": 117.094, "Year": 2011 }, { "Film": "What Happens in Vegas", "Genre": "Comedy", "Lead Studio": "Fox", "Audience Score %": 72, "Profitability": 6.26, "Rating": 28, "Worldwide Gross": 219.36, "Year": 2008 }, { "Film": "When in Rome", "Genre": "Comedy", "Lead Studio": "Disney", "Audience Score %": 44, "Profitability": 0, "Rating": 15, "Worldwide Gross": 43.04, "Year": 2010 }, { "Film": "You Will Meet a Tall Dark Stranger", "Genre": "Comedy", "Lead Studio": "Independent", "Audience Score %": 35, "Profitability": 1.21, "Rating": 43, "Worldwide Gross": 26.66, "Year": 2010 }, { "Film": "Youth in Revolt", "Genre": "Comedy", "Lead Studio": "The Weinstein Company", "Audience Score %": 52, "Profitability": 1.09, "Rating": 68, "Worldwide Gross": 19.62, "Year": 2010 }, { "Film": "Zack and Miri Make a Porno", "Genre": "Romance", "Lead Studio": "The Weinstein Company", "Audience Score %": 70, "Profitability": 1.74, "Rating": 64, "Worldwide Gross": 41.94, "Year": 2008 } ]; }
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding: 5px; margin-top: 10px; } label { margin-bottom: 6px; } input { padding: 4px 6px; } input[type=button] { margin-top: 6px; display: block; } hr { border-color: #fff; opacity: .2; margin-top: 20px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
(function (global) { System.config({ transpiler: 'ts', typescriptOptions: { tsconfig: true }, meta: { 'typescript': { "exports": "ts" }, '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'core-js': 'npm:core-js/client/shim.min.js', 'zone': 'npm:zone.js/fesm2015/zone.min.js', 'rxjs': 'npm:rxjs/dist/bundles/rxjs.umd.min.js', '@angular/core': 'npm:@angular/core/fesm2022', '@angular/common': 'npm:@angular/common/fesm2022/common.mjs', '@angular/compiler': 'npm:@angular/compiler/fesm2022/compiler.mjs', '@angular/platform-browser': 'npm:@angular/platform-browser/fesm2022/platform-browser.mjs', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/fesm2022/platform-browser-dynamic.mjs', '@angular/common/http': 'npm:@angular/common/fesm2022/http.mjs', '@angular/router': 'npm:@angular/router/fesm2022/router.mjs', '@angular/forms': 'npm:@angular/forms/fesm2022/forms.mjs', 'jszip': 'npm:jszip/dist/jszip.min.js', 'typescript': 'npm:typescript/lib/typescript.js', 'ts': './plugin.js', 'tslib':'npm:tslib/tslib.js', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js', '@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js', '@mescius/spread-sheets-angular': 'npm:@mescius/spread-sheets-angular/fesm2020/mescius-spread-sheets-angular.mjs', '@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'ts' }, rxjs: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, "node_modules/@angular": { defaultExtension: 'mjs' }, "@mescius/spread-sheets-angular": { defaultExtension: 'mjs' }, '@angular/core': { defaultExtension: 'mjs', main: 'core.mjs' } } }); })(this);