Drop-downs provide a developer the ability to add a drop-down menu with specific properties to cells in a workbook. These drop-down menus don't require any extra code other than simply specifying which one to use for the drop-down menu.
SpreadJS has 9 different kinds of drop-downs, and this demo shows how to use the MultiColumn Picker.
Before opening the MultiColumn Picker, you need to set the options data in cell's style.
When select any data item, the data item value will submit to the current cell value as the object type. For the returned object value, user can use PROPERTY function to parse the object to get the specified property value.
OR, user can use the valuePath option to choose the field value of the object value and submit into the cell.
You can use MultiColumn Picker drop-down with the following code :
The option of MultiColumn Picker should follow the structure like this :
var spreadNS = GC.Spread.Sheets;
window.onload = function () {
initSpread();
};
function initSpread() {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 6 });
spread.options.allowDynamicArray = true;
spread.suspendPaint();
initTemplateSheet(spread);
initArrayDataSourceSheet(spread);
initRangeRefDataSourceSheet(spread);
initTableRefDataSourceSheet(spread);
initFormulaRefDataSourceSheet(spread);
initFormulaQueryDataSourceSheet(spread);
spread.resumePaint();
}
function initArrayDataSourceSheet(spread) {
var sheet = spread.getSheet(0);
sheet.suspendPaint();
sheet.name("ArrayDataSource");
var colInfos = [
{ name: "Film", displayName: "FILM", size: "2*" },
{ name: "Genre", displayName: "GENRE", size: "*" },
{ name: "Lead Studio", size: "*" },
{ name: "Audience Score %", size: 120},
{ name: "Worldwide Gross", size: 100, formatter: "$#,##0.00"},
{ name: "Year", size: 50 }
];
var style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openMultiColumn",
useButtonStyle: true,
}
];
style.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.multiColumn,
option: {
width: 700,
height: 400,
dataSource: dataSource,
bindingInfos: colInfos
}
}
];
style.formatter = '=PROPERTY(@, "Film")';
sheet.setColumnWidth(2, 150);
sheet.getCell(1, 2).wordWrap(true);
sheet.setText(1, 2, "DataSource is array, return data parsed to the value of property 'Film'.");
sheet.setStyle(1, 3, style);
sheet.getCell(1, 3).wordWrap(true);
sheet.setColumnWidth(3, 400);
sheet.setRowHeight(1, 50);
var style1 = new GC.Spread.Sheets.Style();
style1.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openMultiColumn",
useButtonStyle: true,
}
];
style1.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.multiColumn,
option: {
width: 700,
height: 400,
dataSource: dataSource
}
}
];
sheet.setText(2, 2, "DataSource is array, return data is object.");
sheet.getCell(2, 2).wordWrap(true);
sheet.setStyle(2, 3, style1);
sheet.getCell(2, 3).wordWrap(true);
sheet.setColumnWidth(3, 400);
sheet.setRowHeight(2, 200);
var templateSheet = spread.getSheet(1);
var cellType = new GC.Spread.Sheets.CellTypes.RangeTemplate(templateSheet, 0, 0, 5, 2);
sheet.setCellType(2, 3, cellType, GC.Spread.Sheets.SheetArea.viewport);
sheet.resumePaint();
}
function initTemplateSheet (spread) {
var templateSheet = spread.getSheet(1);
templateSheet.suspendPaint();
templateSheet.visible(false);
templateSheet.setRowCount(5);
templateSheet.setColumnCount(2);
templateSheet.setValue(0, 0, "Film Name: ");
templateSheet.getCell(0, 0).font("14px Arial");
templateSheet.setBindingPath(0, 1, "Film");
templateSheet.setValue(1, 0, "Film Type: ");
templateSheet.getCell(1, 0).font("14px Arial");
templateSheet.setBindingPath(1, 1, "Genre");
templateSheet.setValue(2, 0, "Lead Studio: ");
templateSheet.getCell(2, 0).font("14px Arial");
templateSheet.setBindingPath(2, 1, "Lead Studio");
templateSheet.setValue(3, 0, "Audience Score %: ");
templateSheet.getCell(3, 0).font("14px Arial");
templateSheet.setBindingPath(3, 1, "Audience Score %");
templateSheet.setValue(4, 0, "Profitability: ");
templateSheet.getCell(4, 0).font("14px Arial");
templateSheet.setBindingPath(4, 1, "Profitability");
templateSheet.setFormatter(4, 1, "$#,##0.00");
templateSheet.resumePaint();
}
function initRangeRefDataSourceSheet(spread) {
var sheet = spread.getSheet(2);
sheet.suspendPaint();
sheet.name("RangeRefDataSource");
var colInfos = [
{ name: "Film", displayName: "FILM", size: "2*" },
{ name: "Genre", displayName: "GENRE", size: "*" },
{ name: "Lead Studio", size: "*" },
];
sheet.setText(0, 0, "27 Dresses");
sheet.setText(0, 1, "Comedy");
sheet.setText(0, 2, "Fox");
sheet.setText(1, 0, "(500) Days of Summer");
sheet.setText(1, 1, "Comedy");
sheet.setText(1, 2, "Fox");
var dataSource = "RangeRefDataSource!$A$1:$C$2";
var style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openMultiColumn",
useButtonStyle: true,
}
];
style.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.multiColumn,
option: {
width: 400,
height: 100,
dataSource: dataSource,
bindingInfos: colInfos
}
}
];
style.formatter = '=PROPERTY(@, "Genre")';
sheet.setText(0, 3, "DataSource is range reference, return data parsed to the value of property 'Genre'.");
sheet.setStyle(1, 3, style);
sheet.getCell(1, 3).wordWrap(true);
sheet.setColumnWidth(3, 400);
sheet.setRowHeight(1, 50);
sheet.resumePaint();
}
function initTableRefDataSourceSheet(spread) {
var sheet = spread.getSheet(3);
sheet.suspendPaint();
sheet.name("TableRefDataSource");
var data = [
{ name: "Yang", age: 24 },
{ name: "Wang", age: 35 },
{ name: "Zhang", age: 20 }
];
sheet.setDataSource(new GC.Spread.Sheets.Bindings.CellBindingSource({
name: "Yang",
age: 24,
country: "China",
city: "Xi'an",
ds: data
}));
var table = sheet.tables.add("tableSource", 6, 0, 1, 1);
table.bindingPath("ds");
var style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openMultiColumn",
useButtonStyle: true,
}
];
style.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.multiColumn,
option: {
width: 180,
height: 120,
dataSource: "tableSource[[#Headers], [#Data]]"
}
}
];
style.formatter = '=PROPERTY(@, "age")';
sheet.setText(0, 3, "DataSource is table reference, return data parsed to the value of property 'age'.");
sheet.setStyle(1, 3, style);
sheet.getCell(1, 3).wordWrap(true);
sheet.setColumnWidth(3, 400);
sheet.setRowHeight(1, 50);
sheet.resumePaint();
}
function initFormulaRefDataSourceSheet(spread) {
var sheet = spread.getSheet(4);
sheet.suspendPaint();
sheet.name("FormulaRefDataSource");
var colInfos = [
{ name: "Rate1", size: "*" },
{ name: "Rate2", size: "*" },
{ name: "Rate3", size: "*" },
];
var style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openMultiColumn",
useButtonStyle: true,
}
];
style.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.multiColumn,
option: {
width: 400,
height: 120,
dataSource: "=RANDARRAY(3,3)",
bindingInfos: colInfos
}
}
];
style.formatter = '=PROPERTY(@, "Rate2")';
sheet.setText(0, 3, "DataSource is formula '=RANDARRAY(3,3)', return data parsed to the value of property 'Rate2'.");
sheet.setStyle(1, 3, style);
sheet.getCell(1, 3).wordWrap(true);
sheet.setColumnWidth(3, 400);
sheet.setRowHeight(1, 50);
sheet.resumePaint();
}
function initFormulaQueryDataSourceSheet(spread) {
var sheet = spread.getSheet(5);
sheet.suspendPaint();
sheet.name("FormulaQueryDataSource");
var dataManager = spread.dataManager();
var filmTable = dataManager.addTable("Film", {
data: dataSource
});
filmTable.fetchSync();
var yearColInfos = [
{ name: "Year", size: 60 },
];
var yearStyle = new GC.Spread.Sheets.Style();
yearStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openMultiColumn",
useButtonStyle: true,
}
];
yearStyle.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.multiColumn,
option: {
width: 65,
height: 130,
dataSource: '=SORT(UNIQUE(QUERY("Film", "Year")))',
bindingInfos: yearColInfos,
valuePath: "Year"
}
}
];
var genreColInfos = [
{ name: "Genre", size: 100 },
];
var genreStyle = new GC.Spread.Sheets.Style();
genreStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openMultiColumn",
useButtonStyle: true,
}
];
genreStyle.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.multiColumn,
option: {
width: 110,
height: 130,
dataSource: '=SORT(UNIQUE(FILTER(QUERY("Film", "Genre"), QUERY("Film", "Year")=B4)))',
bindingInfos: genreColInfos,
valuePath: "Genre"
}
}
];
var filmColInfos = [
{ name: "Film", size: 200 },
];
var filmStyle = new GC.Spread.Sheets.Style();
filmStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openMultiColumn",
useButtonStyle: true,
}
];
filmStyle.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.multiColumn,
option: {
width: 210,
height: 200,
dataSource: '=SORT(UNIQUE(FILTER(QUERY("Film", "Film"), (QUERY("Film", "Year")=B4)*(QUERY("Film", "Genre")=D4))))',
bindingInfos: filmColInfos,
valuePath: "Film"
}
}
];
var hAlignStyle = new GC.Spread.Sheets.Style();
hAlignStyle.hAlign = 1;
sheet.setStyle(2, -1, hAlignStyle);
sheet.setText(0, 0, `DataSource is formula, Query data from table and cascade`);
sheet.setValue(2, 1, "Year");
sheet.setValue(2, 3, "Genre");
sheet.setValue(2, 5, "Film");
sheet.setColumnWidth(1, 80);
sheet.setColumnWidth(3, 100);
sheet.setColumnWidth(5, 250);
sheet.setStyle(3, 1, yearStyle);
sheet.setStyle(3, 3, genreStyle);
sheet.setStyle(3, 5, filmStyle);
sheet.setColumnWidth(2, 10);
sheet.setColumnWidth(4, 10);
sheet.resumePaint();
}
<!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/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="data.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" style="width:100%; height: 100%"></div>
</div>
</body>
</html>
var 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": "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;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
