테이블 시트는 텍스트, 숫자, 날짜 등의 조건을 포함하는 Excel과 유사한 필터를 지원할 수 있습니다.
대용량의 데이터가 있을 때 필터 대화 상자를 여는 성능을 개선하기 위해 테이블 시트는 특정 필드 필터 인덱스 캐시를 만들 수 있는 옵션을 제공합니다.
경우에 따라 체크리스트 또는 필터 대화 상자의 일부분이 사용자에게 필요하지 않을 수 있으므로, 테이블 시트는 테이블 시트 필터 대화 상자의 각 부분의 가시성을 제어하기 위해 열에 여러 가지 옵션을 제공합니다.
allowSort, allowFilterByValue, allowFilterByList가 모두 false인 경우에는 열 헤더의 필터 버튼이 보이지 않습니다.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import './styles.css';
import { AppFunc } from './app-func';
import { App } from './app-class';
// 1. Functional Component sample
ReactDOM.render(<AppFunc />, document.getElementById('app'));
// 2. Class Component sample
// ReactDOM.render(<App />, document.getElementById('app'));
/*REPLACE_MARKER*/
/*DO NOT DELETE THESE COMMENTS*/
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import "@mescius/spread-sheets-tablesheet";
import { SpreadSheets } from '@mescius/spread-sheets-react';
import '@mescius/spread-sheets-resources-ko';
GC.Spread.Common.CultureManager.culture("ko-kr");
import './styles.css';
const useState = React.useState;
let spread = null;
export function AppFunc() {
const [state, setState] = useState({
rowCount: 1000,
createIDIndexes: true,
createBirthIndexes: true,
sortByValue_id: true,
filterByValue_id: true,
listFilterArea_id: true,
sortByValue_birthday: true,
filterByValue_birthday: true,
listFilterArea_birthday: true,
showEventArgs: ""
});
const initSpread = () => {
spread.suspendPaint();
//1. init a sheet
spread.clearSheets();
spread.clearSheetTabs();
var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet);
var data = generateData(+state.rowCount);
var timeBeforeCreate = new Date();
var dataManager = spread.dataManager();
var employeeTable = dataManager.addTable("employeeTable", {
data: data.employees,
schema: {
columns: {
id: {
indexed: state.createIDIndexes
},
birth: {
indexed: state.createBirthIndexes
}
}
}
});
var departmentTable = dataManager.addTable("departmentTable", {
data: data.departments
});
dataManager.addRelationship(employeeTable, "dept", "department", departmentTable, "dept_no", "employees");
dataManager.addRelationship(departmentTable, "leader_id", "manager", employeeTable, "id", "a");
spread.resumePaint();
var numericStyle = new GC.Spread.Sheets.Style();
numericStyle.formatter = "$ #,##0.00";
var formatStringStyle = new GC.Spread.Sheets.Style();
formatStringStyle.formatter = 'yyyy-mm-dd';
var visibleInfo_id = {};
if (!state.sortByValue_id) {
visibleInfo_id.sortByValue_id = false;
}
if (!state.filterByValue_id) {
visibleInfo_id.filterByValue_id = false;
}
if (!state.listFilterArea_id) {
visibleInfo_id.listFilterArea_id = false;
}
var visibleInfo_birthday = {};
if (!state.sortByValue_birthday) {
visibleInfo_birthday.sortByValue_birthday = false;
}
if (!state.filterByValue_birthday) {
visibleInfo_birthday.filterByValue_birthday = false;
}
if (!state.listFilterArea_birthday) {
visibleInfo_birthday.listFilterArea_birthday = false;
}
var cols = [
{ value: 'id', caption: 'ID', allowSort: visibleInfo_id.sortByValue_id, allowFilterByValue: visibleInfo_id.filterByValue_id, allowFilterByList: visibleInfo_id.listFilterArea_id },
{ value: 'firstName', caption: 'First Name', width: 100 },
{ value: 'lastName', caption: 'Last Name', width: 100 },
{ value: 'birth', caption: 'Birthday', width: 100, style: formatStringStyle, allowSort: visibleInfo_birthday.sortByValue_birthday, allowFilterByValue: visibleInfo_birthday.filterByValue_birthday, allowFilterByList: visibleInfo_birthday.listFilterArea_birthday },
{ value: 'state', caption: 'State', width: 100 },
{ value: 'dept', caption: 'Department No', width: 130 },
{ value: 'title', caption: 'Title', width: 120 },
{ value: 'salary', caption: 'Salary', style: numericStyle, width: 100 },
];
var employeeView = employeeTable.addView("employeeView", cols, undefined);
employeeView.fetch().then(function (args) {
sheet.suspendPaint();
sheet.setDataView(employeeView);
sheet.resumePaint();
var timeGap = new Date() - timeBeforeCreate;
setState({ ...state, showEventArgs: ("Fetch data and paint - " + (timeGap) + " ms") });
});
initMultiFilterSample(spread);
}
const {
rowCount,
createIDIndexes,
createBirthIndexes,
sortByValue_id,
filterByValue_id,
listFilterArea_id,
sortByValue_birthday,
filterByValue_birthday,
listFilterArea_birthday,
showEventArgs
} = state;
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={workbook => {
spread = workbook;
initSpread();
}}></SpreadSheets>
</div>
<div id="options-container" class="options-container">
<label for="dataRows">Row Count: </label>
<select id="dataRows" value={rowCount} onChange={(e) => { setState({ ...state, rowCount: Number(e.target.value) }); }}>
<option value="1000">1000</option>
<option value="3000">3000</option>
<option value="10000">10000</option>
<option value="30000">30000</option>
<option value="100000">100000</option>
<option value="300000">300000</option>
<option value="1000000">1000000</option>
</select>
<br></br>
<fieldset>
<legend>Create Filter Indexes</legend>
<input type="checkbox" id="createIdIndexes" checked={createIDIndexes} onChange={(e) => { setState({ ...state, createIDIndexes: Number(e.target.checked) }); }} />
<label for="createIdIndexes">Create ID Indexes</label>
<br></br>
<input type="checkbox" id="createBirthIndexes" checked={createBirthIndexes} onChange={(e) => { setState({ ...state, createBirthIndexes: Number(e.target.checked) }); }} />
<label for="createBirthIndexes">Create Birthday Indexes</label>
<br></br>
</fieldset>
<fieldset>
<legend>ID Column Filter Dialog Options</legend>
<input type="checkbox" id="sortByValue_id" checked={sortByValue_id} onChange={(e) => { setState({ ...state, sortByValue_id: Number(e.target.checked) }); }} />
<label for="sortByValue_id">Allow Sort</label>
<br></br>
<input type="checkbox" id="filterByValue_id" checked={filterByValue_id} onChange={(e) => { setState({ ...state, filterByValue_id: Number(e.target.checked) }); }} />
<label for="filterByValue_id">Allow Filter By Value</label>
<br></br>
<input type="checkbox" id="listFilterArea_id" checked={listFilterArea_id} onChange={(e) => { setState({ ...state, listFilterArea_id: Number(e.target.checked) }); }} />
<label for="listFilterArea_id">Allow Filter By List</label>
<br></br>
</fieldset>
<fieldset>
<legend>Birthday Column Filter Dialog Options</legend>
<input type="checkbox" id="sortByValue_birthday" checked={sortByValue_birthday} onChange={(e) => { setState({ ...state, sortByValue_birthday: Number(e.target.checked) }); }} />
<label for="sortByValue_birthday">Allow Sort</label>
<br></br>
<input type="checkbox" id="filterByValue_birthday" checked={filterByValue_birthday} onChange={(e) => { setState({ ...state, filterByValue_birthday: Number(e.target.checked) }); }} />
<label for="filterByValue_birthday">Allow Filter By Value</label>
<br></br>
<input type="checkbox" id="listFilterArea_birthday" checked={listFilterArea_birthday} onChange={(e) => { setState({ ...state, listFilterArea_birthday: Number(e.target.checked) }); }} />
<label for="listFilterArea_birthday">Allow Filter By List</label>
<br></br>
</fieldset>
<input type="button" style={{ marginLeft: "30px", marginTop: "10px", width: "200px" }} id="setDataSource" value="Set DataSource" onClick={() => initSpread()} />
<fieldset style={{ height: "155px" }}>
<legend>Performance</legend>
<textarea id="showEventArgs" style={{ width: "236px", height: "135px" }} cols="64" rows="15" value={showEventArgs}></textarea>
</fieldset>
</div>
</div>
);
}
function initMultiFilterSample(spread) {
spread.suspendPaint();
var dataManager = spread.dataManager();
var table = dataManager.addTable("CourseTable", {
data: [
{ Course: "Calculus", Term: 1, Credit: 5, Score: 80, Teacher: "Nancy Feehafer" },
{ Course: "P.E.", Term: 1, Credit: 3.5, Score: 85, Teacher: "Andrew Cencini" },
{ Course: "Political Economics", Term: 1, Credit: 3.5, Score: 95, Teacher: "Jan Kotas" },
{ Course: "Basic of Computer", Term: 1, Credit: 2, Score: 85, Teacher: "Steven Thorpe" },
{ Course: "Micro-Economics", Term: 1, Credit: 4, Score: 62, Teacher: "Jan Kotas" },
{ Course: "Linear Algebra", Term: 2, Credit: 5, Score: 73, Teacher: "Nancy Feehafer" },
{ Course: "Accounting", Term: 2, Credit: 3.5, Score: 86, Teacher: "Nancy Feehafer" },
{ Course: "Statistics", Term: 2, Credit: 5, Score: 85, Teacher: "Robert Zare" },
{ Course: "Marketing", Term: 2, Credit: 4, Score: 70, Teacher: "Laura Giussani" }
],
schema: {
type: 'json'
}
});
var sheet = spread.addSheetTab(1, "Course", GC.Spread.Sheets.SheetType.tableSheet);
table.fetch().then(function () {
var myView = table.addView("CourseTable", [
{ value: "Course", width: 130 },
{ value: "Term", width: 100 },
{ value: "Credit", width: 100 },
{ value: "Score", width: 100 },
{ value: "Teacher", width: 120 },
]);
spread.suspendPaint();
sheet.setDataView(myView);
spread.resumePaint();
});
initMultiFilterHierarchySample(spread, dataManager);
spread.resumePaint();
}
function initMultiFilterHierarchySample(spread, dataManager) {
var table = dataManager.addTable("Table", {
remote: {
read: {
url: getBaseApiUrl() + "/Hierarchy_Formula"
}
},
schema: {
hierarchy: {
type: 'Parent',
column: 'parent',
summaryFields: {
'budget': '=SUM(CHILDREN(1,"budget"))'
}
},
columns: {
id: {
isPrimaryKey: true,
},
},
}
});
var sheet = spread.addSheetTab(2, "Budget", GC.Spread.Sheets.SheetType.tableSheet);
sheet.options.allowAddNew = false;
table.fetch().then(function () {
var myView = table.addView("myView", [
{ value: '=CONCAT([@department]," (L",LEVEL(),"-",LEVELROWNUMBER(),")")', caption: 'Department', width: 265, outlineColumn: true },
{ value: "budget", width: 100, caption: 'Budget' },
{ value: '=IF(LEVEL()=0,"",[@budget]/PARENT(1,"budget"))', width: 120, caption: 'Percentage', style: { formatter: '0.00%' } },
{ value: "location", width: 100, caption: 'Location' },
{ value: "phone", width: 150, caption: 'Phone' },
{ value: "country", width: 100, caption: 'Country' },
]);
spread.suspendPaint();
sheet.setDataView(myView);
spread.resumePaint();
});
}
function getBaseApiUrl() {
return window.location.href.match(/http.+spreadjs\/learn-spreadjs\//)[0] + 'server/api';
}
function randomFromList(list) {
return list[~~(Math.random() * list.length)];
}
function generateData(itemCount) {
var data = { employees: [], departments: departments };
var states = ["Texas", "New York", "Florida", "Washington", "Ohio"];
var department_id = ["D001", "D002", "D003", "D004", "D005", "D006", "D007", "D008", "D009"];
var title = ["Senior Engineer", "Staff", "Engineer", "Senior Staff", "Assistant Engineer", "Technique Leader", "Manager"];
for (var i = 0; i < itemCount; i++) {
var date = new Date(parseInt(Math.random() * 12052666) * 24 * 3600); //The timestamp
date.setHours(0, 0, 0, 0);
var item = {
id: i + 1,
firstName: randomFromList(firstNames),
lastName: randomFromList(lastNames),
birth: date,
state: randomFromList(states),
dept: i < 9 ? department_id[i] : randomFromList(department_id),
title: i < 9 ? "Manager" : randomFromList(title),
salary: 3000 + parseInt(Math.random() * 100) * 500,
};
data.employees.push(item);
}
return data;
}
/*REPLACE_MARKER*/
/*DO NOT DELETE THESE COMMENTS*/
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import "@mescius/spread-sheets-tablesheet";
import { SpreadSheets } from '@mescius/spread-sheets-react';
import '@mescius/spread-sheets-resources-ko';
GC.Spread.Common.CultureManager.culture("ko-kr");
import './styles.css';
const Component = React.Component;
export class App extends Component {
constructor(props) {
super(props);
this.spread = null;
this.tablesheet = null;
this.state = {
rowCount: 1000,
createIDIndexes: true,
createBirthIndexes: true,
sortByValue_id: true,
filterByValue_id: true,
listFilterArea_id: true,
sortByValue_birthday: true,
filterByValue_birthday: true,
listFilterArea_birthday: true,
showEventArgs: ""
};
}
render() {
const {
rowCount,
createIDIndexes,
createBirthIndexes,
sortByValue_id,
filterByValue_id,
listFilterArea_id,
sortByValue_birthday,
filterByValue_birthday,
listFilterArea_birthday,
showEventArgs
} = this.state;
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => {
this.spread = spread;
this.initSpread();
}}></SpreadSheets>
</div>
<div id="options-container" class="options-container">
<label for="dataRows">Row Count: </label>
<select id="dataRows" value={rowCount} onChange={(e) => { this.setState({ rowCount: Number(e.target.value) }); }}>
<option value="1000">1000</option>
<option value="3000">3000</option>
<option value="10000">10000</option>
<option value="30000">30000</option>
<option value="100000">100000</option>
<option value="300000">300000</option>
<option value="1000000">1000000</option>
</select>
<br></br>
<fieldset>
<legend>Create Filter Indexes</legend>
<input type="checkbox" id="createIdIndexes" checked={createIDIndexes} onChange={(e) => { this.setState({ createIDIndexes: Number(e.target.checked) }); }} />
<label for="createIdIndexes">Create ID Indexes</label>
<br></br>
<input type="checkbox" id="createBirthIndexes" checked={createBirthIndexes} onChange={(e) => { this.setState({ createBirthIndexes: Number(e.target.checked) }); }} />
<label for="createBirthIndexes">Create Birthday Indexes</label>
<br></br>
</fieldset>
<fieldset>
<legend>ID Column Filter Dialog Options</legend>
<input type="checkbox" id="sortByValue_id" checked={sortByValue_id} onChange={(e) => { this.setState({ sortByValue_id: Number(e.target.checked) }); }} />
<label for="sortByValue_id">Allow Sort</label>
<br></br>
<input type="checkbox" id="filterByValue_id" checked={filterByValue_id} onChange={(e) => { this.setState({ filterByValue_id: Number(e.target.checked) }); }} />
<label for="filterByValue_id">Allow Filter By Value</label>
<br></br>
<input type="checkbox" id="listFilterArea_id" checked={listFilterArea_id} onChange={(e) => { this.setState({ listFilterArea_id: Number(e.target.checked) }); }} />
<label for="listFilterArea_id">Allow Filter By List</label>
<br></br>
</fieldset>
<fieldset>
<legend>Birthday Column Filter Dialog Options</legend>
<input type="checkbox" id="sortByValue_birthday" checked={sortByValue_birthday} onChange={(e) => { this.setState({ sortByValue_birthday: Number(e.target.checked) }); }} />
<label for="sortByValue_birthday">Allow Sort</label>
<br></br>
<input type="checkbox" id="filterByValue_birthday" checked={filterByValue_birthday} onChange={(e) => { this.setState({ filterByValue_birthday: Number(e.target.checked) }); }} />
<label for="filterByValue_birthday">Allow Filter By Value</label>
<br></br>
<input type="checkbox" id="listFilterArea_birthday" checked={listFilterArea_birthday} onChange={(e) => { this.setState({ listFilterArea_birthday: Number(e.target.checked) }); }} />
<label for="listFilterArea_birthday">Allow Filter By List</label>
<br></br>
</fieldset>
<input type="button" style={{ marginLeft: "30px", marginTop: "10px", width: "200px" }} id="setDataSource" value="Set DataSource" onClick={() => this.initSpread()} />
<fieldset style={{ height: "155px" }}>
<legend>Performance</legend>
<textarea id="showEventArgs" style={{ width: "236px", height: "135px" }} cols="64" rows="15" value={showEventArgs}></textarea>
</fieldset>
</div>
</div>
);
}
initSpread() {
var _this = this;
var spread = _this.spread;
spread.suspendPaint();
//1. init a sheet
spread.clearSheets();
spread.clearSheetTabs();
var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet);
var data = generateData(+_this.state.rowCount);
var timeBeforeCreate = new Date();
var dataManager = spread.dataManager();
var employeeTable = dataManager.addTable("employeeTable", {
data: data.employees,
schema: {
columns: {
id: {
indexed: _this.state.createIDIndexes
},
birth: {
indexed: _this.state.createBirthIndexes
}
}
}
});
var departmentTable = dataManager.addTable("departmentTable", {
data: data.departments
});
dataManager.addRelationship(employeeTable, "dept", "department", departmentTable, "dept_no", "employees");
dataManager.addRelationship(departmentTable, "leader_id", "manager", employeeTable, "id", "a");
spread.resumePaint();
var numericStyle = new GC.Spread.Sheets.Style();
numericStyle.formatter = "$ #,##0.00";
var formatStringStyle = new GC.Spread.Sheets.Style();
formatStringStyle.formatter = 'yyyy-mm-dd';
var visibleInfo_id = {};
if (!_this.state.sortByValue_id) {
visibleInfo_id.sortByValue_id = false;
}
if (!_this.state.filterByValue_id) {
visibleInfo_id.filterByValue_id = false;
}
if (!_this.state.listFilterArea_id) {
visibleInfo_id.listFilterArea_id = false;
}
var visibleInfo_birthday = {};
if (!_this.state.sortByValue_birthday) {
visibleInfo_birthday.sortByValue_birthday = false;
}
if (!_this.state.filterByValue_birthday) {
visibleInfo_birthday.filterByValue_birthday = false;
}
if (!_this.state.listFilterArea_birthday) {
visibleInfo_birthday.listFilterArea_birthday = false;
}
var cols = [
{ value: 'id', caption: 'ID', allowSort: visibleInfo_id.sortByValue_id, allowFilterByValue: visibleInfo_id.filterByValue_id, allowFilterByList: visibleInfo_id.listFilterArea_id },
{ value: 'firstName', caption: 'First Name', width: 100 },
{ value: 'lastName', caption: 'Last Name', width: 100 },
{ value: 'birth', caption: 'Birthday', width: 100, style: formatStringStyle, allowSort: visibleInfo_birthday.sortByValue_birthday, allowFilterByValue: visibleInfo_birthday.filterByValue_birthday, allowFilterByList: visibleInfo_birthday.listFilterArea_birthday },
{ value: 'state', caption: 'State', width: 100 },
{ value: 'dept', caption: 'Department No', width: 130 },
{ value: 'title', caption: 'Title', width: 120 },
{ value: 'salary', caption: 'Salary', style: numericStyle, width: 100 },
];
var employeeView = employeeTable.addView("employeeView", cols, undefined);
employeeView.fetch().then(function (args) {
sheet.suspendPaint();
sheet.setDataView(employeeView);
sheet.resumePaint();
var timeGap = new Date() - timeBeforeCreate;
_this.setState({ showEventArgs: ("Fetch data and paint - " + (timeGap) + " ms") });
});
initMultiFilterSample(spread);
}
}
function initMultiFilterSample(spread) {
spread.suspendPaint();
var dataManager = spread.dataManager();
var table = dataManager.addTable("CourseTable", {
data: [
{ Course: "Calculus", Term: 1, Credit: 5, Score: 80, Teacher: "Nancy Feehafer" },
{ Course: "P.E.", Term: 1, Credit: 3.5, Score: 85, Teacher: "Andrew Cencini" },
{ Course: "Political Economics", Term: 1, Credit: 3.5, Score: 95, Teacher: "Jan Kotas" },
{ Course: "Basic of Computer", Term: 1, Credit: 2, Score: 85, Teacher: "Steven Thorpe" },
{ Course: "Micro-Economics", Term: 1, Credit: 4, Score: 62, Teacher: "Jan Kotas" },
{ Course: "Linear Algebra", Term: 2, Credit: 5, Score: 73, Teacher: "Nancy Feehafer" },
{ Course: "Accounting", Term: 2, Credit: 3.5, Score: 86, Teacher: "Nancy Feehafer" },
{ Course: "Statistics", Term: 2, Credit: 5, Score: 85, Teacher: "Robert Zare" },
{ Course: "Marketing", Term: 2, Credit: 4, Score: 70, Teacher: "Laura Giussani" }
],
schema: {
type: 'json'
}
});
var sheet = spread.addSheetTab(1, "Course", GC.Spread.Sheets.SheetType.tableSheet);
table.fetch().then(function () {
var myView = table.addView("CourseTable", [
{ value: "Course", width: 130 },
{ value: "Term", width: 100 },
{ value: "Credit", width: 100 },
{ value: "Score", width: 100 },
{ value: "Teacher", width: 120 },
]);
spread.suspendPaint();
sheet.setDataView(myView);
spread.resumePaint();
});
initMultiFilterHierarchySample(spread, dataManager);
spread.resumePaint();
}
function initMultiFilterHierarchySample(spread, dataManager) {
var table = dataManager.addTable("Table", {
remote: {
read: {
url: getBaseApiUrl() + "/Hierarchy_Formula"
}
},
schema: {
hierarchy: {
type: 'Parent',
column: 'parent',
summaryFields: {
'budget': '=SUM(CHILDREN(1,"budget"))'
}
},
columns: {
id: {
isPrimaryKey: true,
},
},
}
});
var sheet = spread.addSheetTab(2, "Budget", GC.Spread.Sheets.SheetType.tableSheet);
sheet.options.allowAddNew = false;
table.fetch().then(function () {
var myView = table.addView("myView", [
{ value: '=CONCAT([@department]," (L",LEVEL(),"-",LEVELROWNUMBER(),")")', caption: 'Department', width: 265, outlineColumn: true },
{ value: "budget", width: 100, caption: 'Budget' },
{ value: '=IF(LEVEL()=0,"",[@budget]/PARENT(1,"budget"))', width: 120, caption: 'Percentage', style: { formatter: '0.00%' } },
{ value: "location", width: 100, caption: 'Location' },
{ value: "phone", width: 150, caption: 'Phone' },
{ value: "country", width: 100, caption: 'Country' },
]);
spread.suspendPaint();
sheet.setDataView(myView);
spread.resumePaint();
});
}
function getBaseApiUrl() {
return window.location.href.match(/http.+spreadjs\/learn-spreadjs\//)[0] + 'server/api';
}
function randomFromList(list) {
return list[~~(Math.random() * list.length)];
}
function generateData(itemCount) {
var data = { employees: [], departments: departments };
var states = ["Texas", "New York", "Florida", "Washington", "Ohio"];
var department_id = ["D001", "D002", "D003", "D004", "D005", "D006", "D007", "D008", "D009"];
var title = ["Senior Engineer", "Staff", "Engineer", "Senior Staff", "Assistant Engineer", "Technique Leader", "Manager"];
for (var i = 0; i < itemCount; i++) {
var date = new Date(parseInt(Math.random() * 12052666) * 24 * 3600); //The timestamp
date.setHours(0, 0, 0, 0);
var item = {
id: i + 1,
firstName: randomFromList(firstNames),
lastName: randomFromList(lastNames),
birth: date,
state: randomFromList(states),
dept: i < 9 ? department_id[i] : randomFromList(department_id),
title: i < 9 ? "Manager" : randomFromList(title),
salary: 3000 + parseInt(Math.random() * 100) * 500,
};
data.employees.push(item);
}
return data;
}
<!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$/ko/react/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- SystemJS -->
<script src="$DEMOROOT$/ko/react/node_modules/systemjs/dist/system.src.js"></script>
<script src="$DEMOROOT$/spread/source/data/departments.js" type="text/javascript"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('$DEMOROOT$/ko/lib/react/license.js').then(function () {
System.import('./src/app');
});
</script>
</head>
<body>
<div id="app" style="height: 100%;"></div>
</body>
</html>
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
fieldset {
padding: 6px;
margin: 0;
margin-top: 10px;
}
.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;
}
fieldset span,
fieldset input,
fieldset select {
display: inline-block;
text-align: left;
}
fieldset input[type=text] {
width: calc(100% - 58px);
}
fieldset input[type=button] {
width: 100%;
text-align: center;
}
fieldset select {
width: calc(100% - 50px);
}
.field-line {
margin-top: 4px;
}
.field-inline {
display: inline-block;
vertical-align: middle;
}
fieldset label.field-inline {
width: 100px;
}
fieldset input.field-inline {
width: calc(100% - 100px - 12px);
}
.required {
color: red;
font-weight: bold;
}
#fields {
display: none;
}
#fields.show {
display: block;
}
(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-tablesheet': 'npm:@mescius/spread-sheets-tablesheet/index.js',
'@mescius/spread-sheets-resources-ko': 'npm:@mescius/spread-sheets-resources-ko/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/umd/react.production.min.js',
'react-dom': 'npm:react-dom/umd/react-dom.production.min.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);
