概要と基本的な使い方 | 機能紹介 | SpreadJS（スプレッドJS）チュートリアルデモアプリケーション

InputManJSセルでは、GcMask型、GcDateTime型、GcNumber型、GcComboBox型などのセル型に対応しており、それぞれの型に適したコントロールでセルを編集できます。 ※InputManJSセルの機能を利用するには、別途InputManJSのライセンスが必要になります。 InputManJSセルを使用するには、InputManJSモジュールと、InputManJSを使用するための間接モジュールを参照します。 gc.inputman-js.ja.js gc.inputman-js.css gc.spread.sheets.inputmancelltype.js 続いて、InputManJSセル型（GcMaskCellTypeなど）のインスタンスを生成してから、setCellTypeメソッドを使用してセル型を設定します。次に、例を示します。

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import GC from '@mescius/spread-sheets';
import '@mescius/spread-sheets-resources-ja';
GC.Spread.Common.CultureManager.culture("ja-jp");
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 GC2 from '@mescius/spread-sheets';
import * as GC from '@mescius/inputman';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import { GcMaskCellType, GcNumberCellType, GcDateTimeCellType, GcComboBoxCellType } from '@mescius/spread-sheets-inputmancelltype'
import '@mescius/inputman/CSS/gc.inputman-js.css';
export function AppFunc() {
React.useEffect(() => {
GC.InputMan.appearanceStyle = GC.InputMan.AppearanceStyle.Modern;
}, []);
const initSpread = (spread) => {
const sheet = spread.getSheet(0);
sheet.setColumnWidth(0, 140);
sheet.setColumnWidth(1, 220);
sheet.setColumnWidth(2, 230);
sheet.setColumnWidth(3, 230);
sheet.setRowHeight(2, 30);
sheet.setRowHeight(5, 30);
sheet.setRowHeight(8, 30);
sheet.setRowHeight(11, 30);
sheet.setText(14, 1, '各セル型のB列からD列のセルに、InputManJSを使用したセル型が設定されています。');
sheet.setText(2, 0, 'GcMask型セル：');
sheet.setText(5, 0, 'GcDateTime型セル：');
sheet.setText(8, 0, 'GcNumber型セル：');
sheet.setText(11, 0, 'GcComboBox型セル：');
sheet.setText(1, 1, '郵便番号の入力');
sheet.setText(1, 2, '「ひらがな」のみ入力を許可');
sheet.setText(1, 3, '「ひらがな」以外の全角文字のみ');
sheet.setText(4, 1, '和暦で日付を入力');
sheet.setText(4, 2, 'ドロップダウンカレンダーを使用');
sheet.setText(4, 3, 'ドロップダウンピッカーを使用');
sheet.setText(7, 1, 'スピンボタンを使用');
sheet.setText(7, 2, 'ドロップダウン数値パッドを使用');
sheet.setText(7, 3, 'ドロップダウンスライダーを使用');
sheet.setText(10, 1, 'フッター付きリストを使用');
sheet.setText(10, 2, 'オートフィルターを使用');
sheet.setText(10, 3, 'テンプレートを使用');
setGcMaskCellType(sheet);
setGcDateCellType(sheet);
setGcNumberCellType(sheet);
setGcComboBoxCellType(sheet);
setCellBorder(sheet);
sheet.setValue(2, 1, 9813205);
sheet.setValue(2, 2, 'すぷれっど');
sheet.setValue(2, 3, '平仮名以外１２３ＡＢＣ');
sheet.setValue(5, 1, new Date().toLocaleString());
sheet.setValue(5, 2, new Date().toLocaleString());
sheet.setValue(5, 3, new Date().toLocaleString());
sheet.setValue(8, 1, 12345);
sheet.setValue(8, 2, 12345);
sheet.setValue(8, 3, 50);
}
const setGcMaskCellType = (sheet) => {
let gcMaskCellType1 = new GcMaskCellType({
formatPattern: '〒\\D{3}-\\D{4}',
displayType: 'value'
});
let maskStyle = new GC2.Spread.Sheets.Style();
maskStyle.formatter = "〒###-####";
maskStyle.hAlign = GC2.Spread.Sheets.HorizontalAlign.left;
maskStyle.cellType = gcMaskCellType1;
sheet.setStyle(2, 1, maskStyle, GC2.Spread.Sheets.SheetArea.viewport);
let gcMaskCellType2 = new GcMaskCellType({
formatPattern: '\\Ｊ*'
});
sheet.setCellType(2, 2, gcMaskCellType2);
let gcMaskCellType3 = new GcMaskCellType({
formatPattern: '[\\Ｚ^\\Ｊ]*',
autoConvert: false
});
sheet.setCellType(2, 3, gcMaskCellType3);
sheet.getRange(2, 1, 1, 3).vAlign(GC2.Spread.Sheets.VerticalAlign.center);
}
const setGcDateCellType = (sheet) => {
let gcDateTimeCellType1 = new GcDateTimeCellType({
formatPattern: 'gggee年MM月dd日',
displayType: 'value',
showDropDownButton: false
});
let dateStyle1 = new GC2.Spread.Sheets.Style();
dateStyle1.formatter = "yyyy/MM/dd (ddd)";
dateStyle1.hAlign = GC2.Spread.Sheets.HorizontalAlign.right;
dateStyle1.cellType = gcDateTimeCellType1;
sheet.setStyle(5, 1, dateStyle1, GC2.Spread.Sheets.SheetArea.viewport);
let gcDateTimeCellType2 = new GcDateTimeCellType({
formatPattern: 'yyyy/MM/dd',
displayType: 'value',
showDropDownButton: true,
autoDropDown: true
});
sheet.setCellType(5, 2, gcDateTimeCellType2);
let dateStyle2 = new GC2.Spread.Sheets.Style();
dateStyle2.formatter = "yyyy/MM/dd (dddd)";
dateStyle2.hAlign = GC2.Spread.Sheets.HorizontalAlign.right;
dateStyle2.cellType = gcDateTimeCellType2;
sheet.setStyle(5, 2, dateStyle2, GC2.Spread.Sheets.SheetArea.viewport);
let gcDateTimeCellType3 = new GcDateTimeCellType({
formatPattern: 'yyyy/MM/dd HH:mm:ss',
displayType: 'value',
showDropDownButton: true,
dropDownConfig: {
dropDownType: GC.InputMan.DateDropDownType.Picker
},
autoDropDown: true
});
let dateStyle3 = new GC2.Spread.Sheets.Style();
dateStyle3.formatter = "yyyy/MM/dd HH:mm:ss";
dateStyle3.hAlign = GC2.Spread.Sheets.HorizontalAlign.right;
dateStyle3.cellType = gcDateTimeCellType3;
sheet.setStyle(5, 3, dateStyle3, GC2.Spread.Sheets.SheetArea.viewport);
sheet.getRange(5, 1, 1, 3).vAlign(GC2.Spread.Sheets.VerticalAlign.center);
}
const setGcNumberCellType = (sheet) => {
let gcNumberCellType1 = new GcNumberCellType({
formatDigit: '##,##0',
displayType: 'value',
showSpinButton: true
});
sheet.setCellType(8, 1, gcNumberCellType1);
sheet.setFormatter(8, 1, '##,##0;[Red]-##,##0');
let gcNumberCellType2 = new GcNumberCellType({
formatDigit: '##,##0',
displayType: 'value',
showNumericPad: true,
autoDropDown: true
});
sheet.setCellType(8, 2, gcNumberCellType2);
sheet.setFormatter(8, 2, '##,##0;[Red]-##,##0');
let gcNumberCellType3 = new GcNumberCellType({
showDropDownSlider: true,
maxValue: 100,
minValue: 0,
dropDownConfig: {
step: 10,
marks: [0, 25, 50, 75, 100],
markLabelFormat: (v) => `D:${v}km`,
},
displayType: 'value',
autoDropDown: true
});
sheet.setCellType(8, 3, gcNumberCellType3);
sheet.getRange(8, 1, 1, 3).vAlign(GC2.Spread.Sheets.VerticalAlign.center);
}
const setGcComboBoxCellType = (sheet) => {
let gcComboBoxCellType1 = new GcComboBoxCellType({
items: ['果汁100%オレンジ', '果汁100%グレープ', '果汁100%レモン', '果汁100%ピーチ', 'コーヒーマイルド', 'コーヒービター'],
footerTemplate: `<div>
<span>選択中の項目: {!instance.getSelectedItem() == null ? '未選択' : instance.getSelectedItem().Text}</span>
</div>`,
isEditable: false
});
sheet.setCellType(11, 1, gcComboBoxCellType1);
let gcComboBoxCellType2 = new GcComboBoxCellType({
items: ['Japan', 'JAPAN', 'japan', 'じゃぱん', 'ジャパン'],
isEditable: true,
autoCompleteMode: GC.InputMan.AutoCompleteMode.SuggestAppend,
autoCompleteMatchMode: GC.InputMan.AutoCompleteMatchMode.AmbiguousStartWith,
autoDropDown: true
});
sheet.setCellType(11, 2, gcComboBoxCellType2);
let gcComboBoxCellType3 = new GcComboBoxCellType({
items: [
{ logo: '$DEMOROOT$/spread/source/images/imjs/AR.png', name: 'ActiveReports', category: '帳票・レポート', description: '日本仕様の帳票開発に必要な機能を搭載したコンポーネント' },
{ logo: '$DEMOROOT$/spread/source/images/imjs/SP.png', name: 'SPREAD', category: '表計算・グリッド', description: 'Excel風のビューと表計算機能を実現するUIコンポーネント' },
{ logo: '$DEMOROOT$/spread/source/images/imjs/C1.png', name: 'ComponentOne', category: 'コンポーネントセット', description: 'Visual Studioで利用する.NET Framework用コンポーネント' },
{ logo: '$DEMOROOT$/spread/source/images/imjs/IM.png', name: 'InputMan', category: '入力支援', description: '快適な入力を実現する日本仕様入力コンポーネントセット' },
{ logo: '$DEMOROOT$/spread/source/images/imjs/MR.png', name: 'MultiRow', category: '多段明細', description: '1レコード複数行&日付表示に最適なグリッドコンポーネント' },
{ logo: '$DEMOROOT$/spread/source/images/imjs/DD.png', name: 'DioDocs', category: 'ドキュメントAPI', description: 'ドキュメントを生成、更新するAPIライブラリ' },
],
itemHeight: 50,
displayMemberPath: 'name',
valueMemberPath: 'name',
itemTemplate: `<div class="template-item">
<div class="image"><img src="{!logo}"></div>
<div class="names"><div class="name">{!name}</div><div class="category">{!category}</div></div>
<div class="description">{!description}</div>
</div>`,
dropDownWidth: 'auto',
isEditable: false,
generatingItem: (args) => {
args.item.classList.add(args.index % 2 ? 'odd' : 'even');
}
});
sheet.setCellType(11, 3, gcComboBoxCellType3);
sheet.getRange(11, 1, 1, 3).vAlign(GC2.Spread.Sheets.VerticalAlign.center);
}
const setCellBorder = (sheet) => {
sheet
.getRange(1, 1, 1, 3)
.foreColor('#000')
.backColor('#FFF3CE')
.setBorder(new GC2.Spread.Sheets.LineBorder('orange', GC2.Spread.Sheets.LineStyle.thin), { all: true });
sheet
.getRange(1, 1, 2, 3)
.setBorder(new GC2.Spread.Sheets.LineBorder('orange', GC2.Spread.Sheets.LineStyle.medium), { outline: true });
sheet
.getRange(4, 1, 1, 3)
.foreColor('#000')
.backColor('#FFF3CE')
.setBorder(new GC2.Spread.Sheets.LineBorder('orange', GC2.Spread.Sheets.LineStyle.thin), { all: true });
sheet
.getRange(4, 1, 2, 3)
.setBorder(new GC2.Spread.Sheets.LineBorder('orange', GC2.Spread.Sheets.LineStyle.medium), { outline: true });
sheet
.getRange(7, 1, 1, 3)
.foreColor('#000')
.backColor('#FFF3CE')
.setBorder(new GC2.Spread.Sheets.LineBorder('orange', GC2.Spread.Sheets.LineStyle.thin), { all: true });
sheet
.getRange(7, 1, 2, 3)
.setBorder(new GC2.Spread.Sheets.LineBorder('orange', GC2.Spread.Sheets.LineStyle.medium), { outline: true });
sheet
.getRange(10, 1, 1, 3)
.foreColor('#000')
.backColor('#FFF3CE')
.setBorder(new GC2.Spread.Sheets.LineBorder('orange', GC2.Spread.Sheets.LineStyle.thin), { all: true });
sheet
.getRange(10, 1, 2, 3)
.setBorder(new GC2.Spread.Sheets.LineBorder('orange', GC2.Spread.Sheets.LineStyle.medium), { outline: true });
}
return (<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => initSpread(spread)}>
<Worksheet />
</SpreadSheets>
</div>
</div>);
}

import * as React from 'react';
import GC2 from '@mescius/spread-sheets';
import * as GC from '@mescius/inputman';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import { GcMaskCellType, GcNumberCellType, GcDateTimeCellType, GcComboBoxCellType } from '@mescius/spread-sheets-inputmancelltype'
import '@mescius/inputman/CSS/gc.inputman-js.css';
const Component = React.Component;
export class App extends Component {
constructor(props) {
GC.InputMan.appearanceStyle = GC.InputMan.AppearanceStyle.Modern;
super(props);
this.sheet = null;
}
render() {
return (<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
<Worksheet />
</SpreadSheets>
</div>
</div>);
}
initSpread(spread) {
const sheet = spread.getSheet(0);
this.sheet = sheet;
sheet.setColumnWidth(0, 140);
sheet.setColumnWidth(1, 220);
sheet.setColumnWidth(2, 230);
sheet.setColumnWidth(3, 230);
sheet.setRowHeight(2, 30);
sheet.setRowHeight(5, 30);
sheet.setRowHeight(8, 30);
sheet.setRowHeight(11, 30);
sheet.setText(14, 1, '各セル型のB列からD列のセルに、InputManJSを使用したセル型が設定されています。');
sheet.setText(2, 0, 'GcMask型セル：');
sheet.setText(5, 0, 'GcDateTime型セル：');
sheet.setText(8, 0, 'GcNumber型セル：');
sheet.setText(11, 0, 'GcComboBox型セル：');
sheet.setText(1, 1, '郵便番号の入力');
sheet.setText(1, 2, '「ひらがな」のみ入力を許可');
sheet.setText(1, 3, '「ひらがな」以外の全角文字のみ');
sheet.setText(4, 1, '和暦で日付を入力');
sheet.setText(4, 2, 'ドロップダウンカレンダーを使用');
sheet.setText(4, 3, 'ドロップダウンピッカーを使用');
sheet.setText(7, 1, 'スピンボタンを使用');
sheet.setText(7, 2, 'ドロップダウン数値パッドを使用');
sheet.setText(7, 3, 'ドロップダウンスライダーを使用');
sheet.setText(10, 1, 'フッター付きリストを使用');
sheet.setText(10, 2, 'オートフィルターを使用');
sheet.setText(10, 3, 'テンプレートを使用');
this.setGcMaskCellType(sheet);
this.setGcDateCellType(sheet);
this.setGcNumberCellType(sheet);
this.setGcComboBoxCellType(sheet);
this.setCellBorder(sheet);
sheet.setValue(2, 1, 9813205);
sheet.setValue(2, 2, 'すぷれっど');
sheet.setValue(2, 3, '平仮名以外１２３ＡＢＣ');
sheet.setValue(5, 1, new Date().toLocaleString());
sheet.setValue(5, 2, new Date().toLocaleString());
sheet.setValue(5, 3, new Date().toLocaleString());
sheet.setValue(8, 1, 12345);
sheet.setValue(8, 2, 12345);
sheet.setValue(8, 3, 50);
}
setGcMaskCellType(sheet) {
let gcMaskCellType1 = new GcMaskCellType({
formatPattern: '〒\\D{3}-\\D{4}',
displayType: 'value'
});
let maskStyle = new GC2.Spread.Sheets.Style();
maskStyle.formatter = "〒###-####";
maskStyle.hAlign = GC2.Spread.Sheets.HorizontalAlign.left;
maskStyle.cellType = gcMaskCellType1;
sheet.setStyle(2, 1, maskStyle, GC2.Spread.Sheets.SheetArea.viewport);
let gcMaskCellType2 = new GcMaskCellType({
formatPattern: '\\Ｊ*'
});
sheet.setCellType(2, 2, gcMaskCellType2);
let gcMaskCellType3 = new GcMaskCellType({
formatPattern: '[\\Ｚ^\\Ｊ]*',
autoConvert: false
});
sheet.setCellType(2, 3, gcMaskCellType3);
sheet.getRange(2, 1, 1, 3).vAlign(GC2.Spread.Sheets.VerticalAlign.center);
}
setGcDateCellType(sheet) {
let gcDateTimeCellType1 = new GcDateTimeCellType({
formatPattern: 'gggee年MM月dd日',
displayType: 'value',
showDropDownButton: false
});
let dateStyle1 = new GC2.Spread.Sheets.Style();
dateStyle1.formatter = "yyyy/MM/dd (ddd)";
dateStyle1.hAlign = GC2.Spread.Sheets.HorizontalAlign.right;
dateStyle1.cellType = gcDateTimeCellType1;
sheet.setStyle(5, 1, dateStyle1, GC2.Spread.Sheets.SheetArea.viewport);
let gcDateTimeCellType2 = new GcDateTimeCellType({
formatPattern: 'yyyy/MM/dd',
displayType: 'value',
showDropDownButton: true,
autoDropDown: true
});
sheet.setCellType(5, 2, gcDateTimeCellType2);
let dateStyle2 = new GC2.Spread.Sheets.Style();
dateStyle2.formatter = "yyyy/MM/dd (dddd)";
dateStyle2.hAlign = GC2.Spread.Sheets.HorizontalAlign.right;
dateStyle2.cellType = gcDateTimeCellType2;
sheet.setStyle(5, 2, dateStyle2, GC2.Spread.Sheets.SheetArea.viewport);
let gcDateTimeCellType3 = new GcDateTimeCellType({
formatPattern: 'yyyy/MM/dd HH:mm:ss',
displayType: 'value',
showDropDownButton: true,
dropDownConfig: {
dropDownType: GC.InputMan.DateDropDownType.Picker
},
autoDropDown: true
});
let dateStyle3 = new GC2.Spread.Sheets.Style();
dateStyle3.formatter = "yyyy/MM/dd HH:mm:ss";
dateStyle3.hAlign = GC2.Spread.Sheets.HorizontalAlign.right;
dateStyle3.cellType = gcDateTimeCellType3;
sheet.setStyle(5, 3, dateStyle3, GC2.Spread.Sheets.SheetArea.viewport);
sheet.getRange(5, 1, 1, 3).vAlign(GC2.Spread.Sheets.VerticalAlign.center);
}
setGcNumberCellType(sheet) {
let gcNumberCellType1 = new GcNumberCellType({
formatDigit: '##,##0',
displayType: 'value',
showSpinButton: true
});
sheet.setCellType(8, 1, gcNumberCellType1);
sheet.setFormatter(8, 1, '##,##0;[Red]-##,##0');
let gcNumberCellType2 = new GcNumberCellType({
formatDigit: '##,##0',
displayType: 'value',
showNumericPad: true,
autoDropDown: true
});
sheet.setCellType(8, 2, gcNumberCellType2);
sheet.setFormatter(8, 2, '##,##0;[Red]-##,##0');
let gcNumberCellType3 = new GcNumberCellType({
showDropDownSlider: true,
maxValue: 100,
minValue: 0,
dropDownConfig: {
step: 10,
marks: [0, 25, 50, 75, 100],
markLabelFormat: (v) => `D:${v}km`,
},
displayType: 'value',
autoDropDown: true
});
sheet.setCellType(8, 3, gcNumberCellType3);
sheet.getRange(8, 1, 1, 3).vAlign(GC2.Spread.Sheets.VerticalAlign.center);
}
setGcComboBoxCellType(sheet) {
let gcComboBoxCellType1 = new GcComboBoxCellType({
items: ['果汁100%オレンジ', '果汁100%グレープ', '果汁100%レモン', '果汁100%ピーチ', 'コーヒーマイルド', 'コーヒービター'],
footerTemplate: `<div>
<span>選択中の項目: {!instance.getSelectedItem() == null ? '未選択' : instance.getSelectedItem().Text}</span>
</div>`,
isEditable: false
});
sheet.setCellType(11, 1, gcComboBoxCellType1);
let gcComboBoxCellType2 = new GcComboBoxCellType({
items: ['Japan', 'JAPAN', 'japan', 'じゃぱん', 'ジャパン'],
isEditable: true,
autoCompleteMode: GC.InputMan.AutoCompleteMode.SuggestAppend,
autoCompleteMatchMode: GC.InputMan.AutoCompleteMatchMode.AmbiguousStartWith,
autoDropDown: true
});
sheet.setCellType(11, 2, gcComboBoxCellType2);
let gcComboBoxCellType3 = new GcComboBoxCellType({
items: [
{ logo: '$DEMOROOT$/spread/source/images/imjs/AR.png', name: 'ActiveReports', category: '帳票・レポート', description: '日本仕様の帳票開発に必要な機能を搭載したコンポーネント' },
{ logo: '$DEMOROOT$/spread/source/images/imjs/SP.png', name: 'SPREAD', category: '表計算・グリッド', description: 'Excel風のビューと表計算機能を実現するUIコンポーネント' },
{ logo: '$DEMOROOT$/spread/source/images/imjs/C1.png', name: 'ComponentOne', category: 'コンポーネントセット', description: 'Visual Studioで利用する.NET Framework用コンポーネント' },
{ logo: '$DEMOROOT$/spread/source/images/imjs/IM.png', name: 'InputMan', category: '入力支援', description: '快適な入力を実現する日本仕様入力コンポーネントセット' },
{ logo: '$DEMOROOT$/spread/source/images/imjs/MR.png', name: 'MultiRow', category: '多段明細', description: '1レコード複数行&日付表示に最適なグリッドコンポーネント' },
{ logo: '$DEMOROOT$/spread/source/images/imjs/DD.png', name: 'DioDocs', category: 'ドキュメントAPI', description: 'ドキュメントを生成、更新するAPIライブラリ' },
],
itemHeight: 50,
displayMemberPath: 'name',
valueMemberPath: 'name',
itemTemplate: `<div class="template-item">
<div class="image"><img src="{!logo}"></div>
<div class="names"><div class="name">{!name}</div><div class="category">{!category}</div></div>
<div class="description">{!description}</div>
</div>`,
dropDownWidth: 'auto',
isEditable: false,
generatingItem: (args) => {
args.item.classList.add(args.index % 2 ? 'odd' : 'even');
}
});
sheet.setCellType(11, 3, gcComboBoxCellType3);
sheet.getRange(11, 1, 1, 3).vAlign(GC2.Spread.Sheets.VerticalAlign.center);
}
setCellBorder(sheet) {
sheet
.getRange(1, 1, 1, 3)
.foreColor('#000')
.backColor('#FFF3CE')
.setBorder(new GC2.Spread.Sheets.LineBorder('orange', GC2.Spread.Sheets.LineStyle.thin), { all: true });
sheet
.getRange(1, 1, 2, 3)
.setBorder(new GC2.Spread.Sheets.LineBorder('orange', GC2.Spread.Sheets.LineStyle.medium), { outline: true });
sheet
.getRange(4, 1, 1, 3)
.foreColor('#000')
.backColor('#FFF3CE')
.setBorder(new GC2.Spread.Sheets.LineBorder('orange', GC2.Spread.Sheets.LineStyle.thin), { all: true });
sheet
.getRange(4, 1, 2, 3)
.setBorder(new GC2.Spread.Sheets.LineBorder('orange', GC2.Spread.Sheets.LineStyle.medium), { outline: true });
sheet
.getRange(7, 1, 1, 3)
.foreColor('#000')
.backColor('#FFF3CE')
.setBorder(new GC2.Spread.Sheets.LineBorder('orange', GC2.Spread.Sheets.LineStyle.thin), { all: true });
sheet
.getRange(7, 1, 2, 3)
.setBorder(new GC2.Spread.Sheets.LineBorder('orange', GC2.Spread.Sheets.LineStyle.medium), { outline: true });
sheet
.getRange(10, 1, 1, 3)
.foreColor('#000')
.backColor('#FFF3CE')
.setBorder(new GC2.Spread.Sheets.LineBorder('orange', GC2.Spread.Sheets.LineStyle.thin), { all: true });
sheet
.getRange(10, 1, 2, 3)
.setBorder(new GC2.Spread.Sheets.LineBorder('orange', GC2.Spread.Sheets.LineStyle.medium), { outline: true });
}
}

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

/* ウォーターマークのスタイル */
.gcim_watermark_null {
color: lightgrey;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#app {
height: 100%;
}
.gcim_input_helper {
border: none;
width: 0;
left: 0 !important;
top: 0 !important;
padding: 0;
margin: 0;
}
.template-item {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.template-item > * {
margin: 0 5px;
}
.image {
width: 40px;
height: 40px;
}
.image img {
width: 40px;
}
.names {
width: 150px;
}
.name {
font-size: 16px;
font-weight: bold;
color: #2676c0;
}
.category {
font-size: 12px;
color: green;
}
.description {
width: 210px;
white-space: normal;
}
.list-item[selected="true"] .name, .list-item[selected="true"] .category {
color: white;
}
.odd {
background: aliceblue;
}

(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: {
'@grapecity/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-resources-ja': 'npm:@mescius/spread-sheets-resources-ja/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',
'@mescius/spread-sheets-inputmancelltype': 'npm:@mescius/spread-sheets-inputmancelltype/index.js',
'@mescius/inputman': 'npm:@mescius/inputman/index.js',
"@mescius/inputman/CSS": "npm:@mescius/inputman/CSS",
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'jsx'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
})(this);