Overview

TableSheet is a fast, data-bound DataTable view with grid-like behavior and a spreadsheet user interface. It includes a relational data manager and powerful structured formulas in addition to sorting, filtering, styles, column and row pinning, and cell editing.

SpreadJS TableSheet supports using a DataManager View as a data source. To use the TableSheet, add the js file link into the document's head section: Using the DataManager with the TableSheet:
/*REPLACE_MARKER*/ /*DO NOT DELETE THESE COMMENTS*/ <template> <div class="sample-tutorial"> <gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread" > </gc-spread-sheets> </div> </template> <script> import Vue from "vue"; import "@grapecity/spread-sheets-vue"; import GC from "@grapecity/spread-sheets"; import "@grapecity/spread-sheets-tablesheet"; import "./styles.css"; let App = Vue.extend({ name: "app", methods: { initSpread: function (spread) { spread.suspendPaint(); spread.clearSheets(); spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader; //init a data manager var tableName = "Supplier"; var baseApiUrl = getBaseApiUrl(); var apiUrl = baseApiUrl + "/" + tableName; var dataManager = spread.dataManager(); var myTable = dataManager.addTable( "myTable", { remote: { read: { url: apiUrl }, } } ); //init a table sheet var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet); sheet.options.allowAddNew = false; //hide new row //bind a view to the table sheet myTable.fetch().then(function () { var view = myTable.addView("myView", [ { value: "Id", width: 80 }, { value: "CompanyName", width: 200, caption :"Company Name" }, { value: "ContactName", width: 150, caption :"Contact" }, { value: "ContactTitle", width: 200, caption :"Title" }, { value: "Address", width: 200 }, { value: "City", width: 150, caption :"City" }, { value: "State", width: 100, caption :"State" }, { value: "Region", width: 100, caption :"Region" } ]); sheet.setDataView(view); }); spread.resumePaint(); }, }, }); function getBaseApiUrl() { return window.location.href.match(/http.+spreadjs\/demos\//)[0] + 'server/api'; } new Vue({ render: (h) => h(App), }).$mount("#app"); </script>
<!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/vue/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <!-- SystemJS --> <script src="$DEMOROOT$/en/vue/node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); System.import('$DEMOROOT$/en/lib/vue/license.js'); </script> </head> <body> <div id="app"></div> </body> </html>
.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; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' }, '*.vue': { loader: 'vue-loader' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { '@grapecity/spread-sheets': 'npm:@grapecity/spread-sheets/index.js', '@grapecity/spread-sheets-tablesheet': 'npm:@grapecity/spread-sheets-tablesheet/index.js', '@grapecity/spread-sheets-vue': 'npm:@grapecity/spread-sheets-vue/index.js', '@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'css': 'npm:systemjs-plugin-css/css.js', 'vue': 'npm:vue/dist/vue.min.js', 'vue-loader': 'npm:systemjs-vue-browser/index.js', 'tiny-emitter': 'npm:tiny-emitter/index.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: 'js' }, rxjs: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' } } }); })(this);