Mobile UI Scrollbar | Features | SpreadJS JavaScript Demos

SpreadJS provides two scrollbar appearances: skin and mobile. These two appearances will automatically switch according to different devices. User can also change it manually by using spread.options.scrollbarAppearance. The mobile scrollbar appearance will inherit all spread themes and all external themes we supported. In addition, user could customize the mobile scrollbar appearance by using Public CSS Classname & CSS Styles.

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import './styles.css';
import { AppFunc } from './app-func';
import { App } from './app-class';
// 1. Functional Component sample
createRoot(document.getElementById('app')).render(<AppFunc />);
// 2. Class Component sample
//  createRoot(document.getElementById('app')).render(<App />);

import * as React from 'react';
import { useState } from 'react';
import GC from '@mescius/spread-sheets';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import './styles.css';
let spread = null;
export function AppFunc() {
const [state, setState] = useState({
useMobileScrollbar: true
});
const initSpread = (currSpread) => {
spread = currSpread;
spread.options.scrollbarAppearance = GC.Spread.Sheets.ScrollbarAppearance.mobile;
var sheet = spread.getActiveSheet();
sheet.setColumnCount(40);
addThemeLink(document.getElementById('themes').value, 'external');
addThemeLink(document.getElementById('customize').value, 'customize');
}
const addThemeLink = (href, type) => {
var link = document.createElement('link');
link.type = "text/css";
link.rel = "stylesheet";
link.href = href;
link.setAttribute("name", type);
link.onload = function () {
spread.refresh();
};
var header = document.getElementsByTagName('head')[0];
header.appendChild(link);
}
const applyTheme = ($event, type) => {
var href = $event.target.value,
themeLink = document.querySelector('link[name="' + type + '"]');
var header = document.getElementsByTagName('head')[0];
themeLink && header.removeChild(themeLink);
if (href) {
href.split("&&").forEach((item) => {
addThemeLink(item, type);
});
} else {
spread.refresh();
}
}
const onScrollbarAppearanceChanged = (value) => {
spread.options.scrollbarAppearance = value ? GC.Spread.Sheets.ScrollbarAppearance.mobile : GC.Spread.Sheets.ScrollbarAppearance.skin;
}
return <div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => initSpread(spread)}>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
<Panel applyTheme={(e, type) => { applyTheme(e, type) }} onScrollbarAppearanceChanged={(e) => onScrollbarAppearanceChanged(e)} setting={state} />
</div>;
}
function Panel(props) {
const [state, setState] = useState(props.setting);
return (
<div class="options-container">
<p>Change the options below to see the different scrollbar appearances.</p>
<div class="option-row">
<input type="checkbox" id="mobileScrollbar" checked={state.useMobileScrollbar} onClick={(e) => { const value = !state.useMobileScrollbar; setState({ useMobileScrollbar: value }); props.onScrollbarAppearanceChanged(value) }} />
<label for="mobileScrollbar">Mobile UI</label>
</div>
<div class="option-row">
<label>Spread & External Theme:</label>
<br />
<select id="themes" onChange={(e) => { props.applyTheme(e, 'external') }}>
<optgroup label="SpreadJS">
<option value="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css" selected="selected">Excel 2013white</option>
<option value="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013lightGray.css">Excel 2013lightGray</option>
<option value="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013darkGray.css">Excel 2013darkGray</option>
<option value="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css">Excel 2016colorful</option>
<option value="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2016darkGray.css">Excel 2016darkGray</option>
<option value="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2016black.css">Excel 2016black</option>
</optgroup>
<optgroup label="Bootstrap">
<option value="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css&&https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
Bootstrap 3.3.4
</option>
</optgroup>
<optgroup label="jQuery UI">
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/black-tie/jquery-ui.css">
Black Tie
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/blitzer/jquery-ui.css">
Blitzer
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/cupertino/jquery-ui.css">
Cupertino
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/dark-hive/jquery-ui.css">
Dark Hive
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/dot-luv/jquery-ui.css">
Dot Luv
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/eggplant/jquery-ui.css">
Eggplant
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/excite-bike/jquery-ui.css">
Excite Bike
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/flick/jquery-ui.css">
Flick
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/hot-sneaks/jquery-ui.css">
Hot Sneaks
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/humanity/jquery-ui.css">
Humanity
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/le-frog/jquery-ui.css">
Le Frog
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/mint-choc/jquery-ui.css">
Mint Chocolate
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/overcast/jquery-ui.css">
overcast
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/pepper-grinder/jquery-ui.css">
Pepper Grinder
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/redmond/jquery-ui.css">
Redmond
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/smoothness/jquery-ui.css">
Smoothness
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/south-street/jquery-ui.css">
South Street
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/start/jquery-ui.css">
Start
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/sunny/jquery-ui.css">
Sunny
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/swanky-purse/jquery-ui.css">
Swanky Purse
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/trontastic/jquery-ui.css">
Trontastic
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-darkness/jquery-ui.css">
UI Darkness
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css">
UI Lightness
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/vader/jquery-ui.css">
Vader
</option>
</optgroup>
</select>
</div>
<div class="option-row">
<label for="customize">Custom Styling:</label>
<br />
<select id="customize" onChange={(e) => { props.applyTheme(e, 'customize') }}>
<option value="./custmize/none.css" selected="selected">None</option>
<option value="./custmize/shadowTrack.css">Shadow Track</option>
<option value="./custmize/linearGradient.css">Linear Gradient</option>
<option value="./custmize/dataGridLike.css">Data Grid Like</option>
<option value="./custmize/closeToTheEdge.css">Close to the Edge</option>
</select>
</div>
</div>
)
}

import * as React from 'react';
import GC from '@mescius/spread-sheets';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import './styles.css';
const Component = React.Component;
export class App extends Component {
constructor(props) {
super(props);
this.spread = null;
this.state = {
useMobileScrollbar: true
};
}
render() {
return <div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
<Panel applyTheme={(e, type) => { this.applyTheme(e, type) }} onScrollbarAppearanceChanged={(e) => this.onScrollbarAppearanceChanged(e)} setting={this.state} />
</div>;
}
initSpread(spread) {
this.spread = spread;
this.spread.options.scrollbarAppearance = GC.Spread.Sheets.ScrollbarAppearance.mobile;
var sheet = spread.getActiveSheet();
sheet.setColumnCount(40);
this.addThemeLink(document.getElementById('themes').value, 'external');
this.addThemeLink(document.getElementById('customize').value, 'customize');
}
applyTheme($event, type) {
var href = $event.target.value,
themeLink = document.querySelector('link[name="' + type + '"]');
var header = document.getElementsByTagName('head')[0];
themeLink && header.removeChild(themeLink);
if (href) {
href.split("&&").forEach((item) => {
this.addThemeLink(item, type);
});
} else {
this.spread.refresh();
}
}
addThemeLink(href, type) {
var link = document.createElement('link');
var spread = this.spread;
link.type = "text/css";
link.rel = "stylesheet";
link.href = href;
link.setAttribute("name", type);
link.onload = function () {
spread.refresh();
};
var header = document.getElementsByTagName('head')[0];
header.appendChild(link);
}
onScrollbarAppearanceChanged(value) {
this.spread.options.scrollbarAppearance = value ? GC.Spread.Sheets.ScrollbarAppearance.mobile : GC.Spread.Sheets.ScrollbarAppearance.skin;
}
}
class Panel extends Component {
constructor(props) {
super(props);
this.state = this.props.setting;
}
componentWillReceiveProps(nextProps) {
this.setState(nextProps.setting);
}
render() {
return (
<div class="options-container">
<p>Change the options below to see the different scrollbar appearances.</p>
<div class="option-row">
<input type="checkbox" id="mobileScrollbar" checked={this.state.useMobileScrollbar} onClick={(e) => { const value = !this.state.useMobileScrollbar; this.setState({ useMobileScrollbar: value }); this.props.onScrollbarAppearanceChanged(value) }} />
<label for="mobileScrollbar">Mobile UI</label>
</div>
<div class="option-row">
<label>Spread & External Theme:</label>
<br />
<select id="themes" onChange={(e) => { this.props.applyTheme(e, 'external') }}>
<optgroup label="SpreadJS">
<option value="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css" selected="selected">Excel 2013white</option>
<option value="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013lightGray.css">Excel 2013lightGray</option>
<option value="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013darkGray.css">Excel 2013darkGray</option>
<option value="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css">Excel 2016colorful</option>
<option value="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2016darkGray.css">Excel 2016darkGray</option>
<option value="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2016black.css">Excel 2016black</option>
</optgroup>
<optgroup label="Bootstrap">
<option value="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css&&https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
Bootstrap 3.3.4
</option>
</optgroup>
<optgroup label="jQuery UI">
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/black-tie/jquery-ui.css">
Black Tie
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/blitzer/jquery-ui.css">
Blitzer
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/cupertino/jquery-ui.css">
Cupertino
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/dark-hive/jquery-ui.css">
Dark Hive
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/dot-luv/jquery-ui.css">
Dot Luv
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/eggplant/jquery-ui.css">
Eggplant
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/excite-bike/jquery-ui.css">
Excite Bike
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/flick/jquery-ui.css">
Flick
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/hot-sneaks/jquery-ui.css">
Hot Sneaks
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/humanity/jquery-ui.css">
Humanity
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/le-frog/jquery-ui.css">
Le Frog
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/mint-choc/jquery-ui.css">
Mint Chocolate
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/overcast/jquery-ui.css">
overcast
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/pepper-grinder/jquery-ui.css">
Pepper Grinder
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/redmond/jquery-ui.css">
Redmond
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/smoothness/jquery-ui.css">
Smoothness
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/south-street/jquery-ui.css">
South Street
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/start/jquery-ui.css">
Start
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/sunny/jquery-ui.css">
Sunny
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/swanky-purse/jquery-ui.css">
Swanky Purse
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/trontastic/jquery-ui.css">
Trontastic
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-darkness/jquery-ui.css">
UI Darkness
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css">
UI Lightness
</option>
<option value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/vader/jquery-ui.css">
Vader
</option>
</optgroup>
</select>
</div>
<div class="option-row">
<label for="customize">Custom Styling:</label>
<br />
<select id="customize" onChange={(e) => { this.props.applyTheme(e, 'customize') }}>
<option value="./custmize/none.css" selected="selected">None</option>
<option value="./custmize/shadowTrack.css">Shadow Track</option>
<option value="./custmize/linearGradient.css">Linear Gradient</option>
<option value="./custmize/dataGridLike.css">Data Grid Like</option>
<option value="./custmize/closeToTheEdge.css">Close to the Edge</option>
</select>
</div>
</div>
)
}
}

<!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/react/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- SystemJS -->
<script src="$DEMOROOT$/en/react/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('$DEMOROOT$/en/lib/react/license.js').then(function () {
System.import('./src/app');
}); 
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>

.sample {
position: relative;
height: 100%;
overflow: auto;
}
.sample::after {
display: block;
content: "";
clear: both;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
label {
display: block;
margin-bottom: 6px;
}
input,
select {
padding: 4px 6px;
box-sizing: border-box;
margin-bottom: 6px;
}
.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;
}
.option-row label {
display: inline-block;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#app {
height: 100%;
}

export const dataSource = [
{
"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": "Romeo 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
}
];

(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true,
react: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-react': 'npm:@mescius/spread-sheets-react/index.js',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js',
'react': 'npm:react/cjs/react.production.js',
'react-dom': 'npm:react-dom/cjs/react-dom.production.js',
'react-dom/client': 'npm:react-dom/cjs/react-dom-client.production.js',
'scheduler': 'npm:scheduler/cjs/scheduler.production.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'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'jsx'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
})(this);