SpreadJS テーブルシート入門1 機能概要とデータ表示

// SpreadJSインスタンスを生成します
var spread = new GC.Spread.Sheets.Workbook("ss");

// ワークブックにテーブルシートを追加します
var tableSheet = spread.addSheetTab(0, "テーブルシート", GC.Spread.Sheets.SheetType.tableSheet);

// データマネージャーを生成します
var dataManager = spread.dataManager();

var orderData = [
    { "orderId": 1, "categoryId": 1, "categoryName": "飲料", "productName": "エール", "unitsInStock": 55, "unitsOnOrder": 55, "orderDate": "2021/6/9", "customerId": 13 },
    { "orderId": 2, "categoryId": 3, "categoryName": "菓子類", "productName": "キャンディー", "unitsInStock": 36, "unitsOnOrder": 40, "orderDate": "2021/9/9", "customerId": 24 },
    { "orderId": 3, "categoryId": 5, "categoryName": "穀類", "productName": "クラッカー", "unitsInStock": 66, "unitsOnOrder": 93, "orderDate": "2021/12/8", "customerId": 38 },
    { "orderId": 4, "categoryId": 1, "categoryName": "飲料", "productName": "コーヒー", "unitsInStock": 82, "unitsOnOrder": 95, "orderDate": "2021/6/15", "customerId": 47 },
    { "orderId": 5, "categoryId": 5, "categoryName": "穀類", "productName": "シリアル", "unitsInStock": 38, "unitsOnOrder": 50, "orderDate": "2022/7/13", "customerId": 35 },
    { "orderId": 6, "categoryId": 2, "categoryName": "調味料", "productName": "スプレッド", "unitsInStock": 53, "unitsOnOrder": 36, "orderDate": "2021/10/20", "customerId": 23 },
    /* 以下省略 */

// データマネージャーにテーブルを追加します
var productTable = dataManager.addTable("注文情報", {
    data: orderData,
});

// データマネージャーにテーブルを追加します
var productTable = dataManager.addTable("注文情報", {
    read: {
        // 設定例 - データを取得するWebAPIのエンドポイントを指定します
        url: "https://demodata.grapecity.com/northwind/api/v1/orders"
    }
});

// ビューの列情報を定義します
var columnInfos = [
    { value: "orderId", caption: "注文ID"}, 
    { value: "orderDate", caption: "受注日", style: { formatter: "yyyy年mm月dd日", } }, 
    { value: "categoryName", caption: "カテゴリ" }, 
    { value: "productName", caption: "製品名" }, 
    { value: "unitsOnOrder", caption: "受注数" } 
];

// ビューのオプションの定義をします
var viewOption = { 
    // 列幅のデフォルト値を設定します
    defaultColumnWidth: 150
}

// テーブルシートに表示するビューを設定します
var view = productTable.addView( "受注管理", columnInfos, true, viewOption );

// テーブルに設定するデータの取得し、成功時にコールバック関数を実行します
productTable.fetch().then(function () {
    // テーブルシートにビューを設定して表示します
    tableSheet.setDataView(view);
});