[{"id":"7720ca38-fc98-4fd8-a3a5-3c0e730c3c72","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"247ded67-b050-4436-be40-fe7b0eeabef7","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"9a8c377f-1f1e-476e-b487-c2339da9bed3","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"5e8e6db2-89b9-4184-bbdc-301ee676869e","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"e04b598e-b0d8-4054-bdac-5143d90b3d51","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"edb028d0-a8cc-42b2-acda-42a5515729f0","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"2adde444-20a6-43d7-8896-2b445877327a","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"6ab8ced2-6c7a-41b6-b861-ba066bd40f40","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"0c34aedd-80a3-470b-a0f6-c327a4346be7","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"717a5892-fa23-499b-a61d-cff228943aaf","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"bd9be971-69fc-4793-ad6d-234be7a93048","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"a1e8d38f-43d8-4b3e-b747-3fbf7656fcd9","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"d6995fdf-76ee-421f-9e7a-3fb324d14bbb","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"64fa3155-4543-4acd-83b7-f9860fd46673","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"698413bd-0b16-4287-baec-644d98a411d1","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"7e4393a0-21ef-438b-981b-325b64db5baa","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]}]
        
(Showing Draft Content)

インタラクティブ操作

テーブルシートは、豊富なインタラクション動作を提供します。

ズームイン・ズームアウト

テーブルシートでは、[Ctrl]キーとともにマウスホイールを使用することでズームイン・ズームアウトを実行できます。


列のリサイズ

テーブルシートでは、列ヘッダセルの右端をドラッグすることで列をリサイズできます。


列ヘッダセルの右端をダブルクリックすると、列幅を自動的に調整できます。WorkbookタイプのautoFitTypeオプションにAutoFitType列挙型の「cellWithHeader」を設定すると、テーブルシートの列幅も自動調整されます。


テーブルシート全体の幅を変更せずに、選択した列のサイズだけを変更したい場合、Workbookタイプの columnResizeMode オプションを「split」に設定すると、分割サイズモードが有効になります。


次のサンプルコードは、列のサイズを自動調整し、サイズ変更を分割モードに設定する方法を示しています。

// autoFitTypeを「cellWithHeader」に設定します。
spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader;
// ResizeModeを「Split」に設定します。
spread.options.columnResizeMode = GC.Spread.Sheets.ResizeMode.split;

ViewOptionsクラスのdefaultColumnWidthプロパティを使用して、テーブルシートビューのデフォルトの列幅を設定することも可能です。デフォルトの列幅は60です。

var view = customerTable.addView("myView", [
    { value: "customerKey", caption: "Customer Key" },
    { value: "customer", caption: "Customer" },
    { value: "billToCustomer", width: 200, caption: "Bill To Customer" },
    { value: "category", width: 120, caption: "Category" },
    { value: "buyingGroup", width: 180, caption: "Buying Group" },
    { value: "primaryContact", width: 170, caption: "Primary Contact" },
    { value: "validFrom", width: 150, caption: "Valid From" },
], false, {
    // デフォルトの列幅を設定します。
    defaultColumnWidth: 100
});

切り取り、コピー、貼付け

テーブルシートは、ショートカットキーやコンテキストメニューによってセル、行、または列の切り取り、コピー、および貼り付けをサポートします。


クリップボード操作に対応するショートカットキーは以下のとおりです。

操作名

Windows上のショートカットキー

Mac上のショートカットキー

Cut

[Ctrl] + [X]

[Command]+ [X]

Copy

[Ctrl] + [C]

[Command]+ [C]

Paste

[Ctrl] + [V]

[Command]+ [V]

選択状態のセル、行や列を右クリックすると、コンテキストメニューにクリップボード操作のメニューが表示されます。


新規行に複数行を貼り付けるには、Workbookタイプの allowExtendPasteRange オプションをtrueに設定します。


次のサンプルコードは、新規行に行の貼り付けを許可する方法を示します。

// allowExtendPasteRangeオプションをtrueに設定します。
spread.options.allowExtendPasteRange = true;

ドラッグ操作

テーブルシートでは、ドラッグフィル、ドラッグアンドドロップ及びドラッグコピーのようなドラッグ操作が対応されています。

  • ドラッグフィル は、選択した領域の右下隅をクリックし、マウスを上下に動かすことで実行されます。


    直接ドラッグすると、セルの値がコピーされ、[Ctrl]キーを押しながらドラッグすると連続データが入力されます。

    ドラッグ後に表示されるポップアップメニューを使用することでドラッグフィルの結果を「セルのコピー」や「連続データ」に変更できます。


  • ドラッグアンドドロップ は、選択した領域の選択境界線をドラッグして、対象セルにドロップすることで選択元のセルの値を切り取り、ドロップ先に貼り付けます。


  • ドラッグコピー は、[Ctrl]キーを押しながら選択した領域の選択境界線をドラッグし、対象セルにドロップすることで選択元のセルの値をコピーし、ドロップ先に貼り付けます。


ショートカットキー

テーブルシートは、「挿入および更新されたすべての行を保存する」などのテーブルシート特有の操作を含めてさまざまなショートカットキーをサポートしています。

テーブルシートがサポートするショートカットキーは以下のとおりです。

操作

ショートカットキー

入力・編集

コピー

[Ctrl]+[C]

切り取り

[Ctrl]+[X]

貼り付け

[Ctrl]+[V]

編集モードの開始

[F2]

直接入力

文字

編集モードの終了

[Esc]

削除

[Del]

削除して編集モードの開始

[BackSpace]

入力を完了して下に移動

[Enter]

入力を完了して上に移動

[Shift] + [Enter]

次の行の入力

[Alt]+[Enter], [Ctrl]+[Enter]

挿入および更新されたすべての行を保存する

[Ctrl] + [Shift] + [S]

移動

上に移動

[↑]

下に移動

[↓]

左に移動

[←]

右に移動

[→]

下に移動

[Enter]

右に移動

[Tab]

左に移動

[Shift] + [Tab]

上・下・左・右側の最初セルに移動

[Ctrl] +矢印

次のページに移動

[PgDn]

前のページに移動

[PgUp]

選択

選択領域をクリックされたセルまで拡張

[Shift] + マウスクリック

選択領域を上下左右のセルまで拡張

[Shift] +矢印