(Showing Draft Content)

SpreadJS with Individual Modules

SpreadJS modules are available on NPM. Many modern JavaScript build tools and bundlers, such as Webpack, Rollup, ESBuild, and Vite work seamlessly with SpreadJS NPM packages including modules, plugins, and resources. Moreover, integrating SpreadJS into your project's build process is a smooth process and allows you to take full advantage of these tools' features.

Refer to the following list of topics while using SpreadJS with individual modules.

Installation Commands

The following commands are used for installing modules available on NPM:

@mescius/spread-common

@mescius/spread-calc-engine

@mescius/spread-calc-engine-basic-functions

@mescius/spread-calc-engine-advanced-functions

@mescius/data-manager

@mescius/spread-sheets-core

@mescius/spread-sheets-bindings

@mescius/spread-sheets-cell-types

@mescius/spread-sheets-sparklines

@mescius/spread-sheets-search

@mescius/spread-sheets-outlines

@mescius/spread-sheets-floating-objects

@mescius/spread-sheets-comments

@mescius/spread-sheets-tables

@mescius/spread-sheets-touch

@mescius/spread-sheets-conditional-formatting

@mescius/spread-sheets-cell-state

@mescius/spread-sheets-data-validation

@mescius/spread-sheets-filter

@mescius/spread-sheets-fill

@mescius/spread-sheets-context-menu

@mescius/spread-sheets-formula-textbox

@mescius/spread-sheets-outline-column

@mescius/spread-sheets-drag-merge

@mescius/spread-sheets-statusbar

@mescius/spread-sheets-auto-merge

@mescius/spread-sheets-calc-engine

@mescius/spread-sheets-hyperlink

@mescius/spread-sheets-namebox

@mescius/spread-sheets-input-mask

You can use these modules with plugins and resources. For that, you need to configure an alias from "@mescius/spread-sheets" to "@mescius/spread-common" for the build tool or CLI.

Note: "@mescius/spread-sheets" is the single module comprising of these individual node modules("@mescius/spread-common"...), and they shouldn’t be used together because it may cause some unknown errors.

Dependency Tables

Dependencies within Modules

The following table shows the minimum dependencies within the modules.

Packages	Dependencies
@mescius/spread-common
@mescius/spread-calc-engine	@mescius/spread-common
@mescius/spread-calc-engine-basic-functions	@mescius/spread-common @mescius/spread-calc-engine
@mescius/spread-calc-engine-advanced-functions	@mescius/spread-common @mescius/spread-calc-engine
@mescius/data-manager	@mescius/spread-common @mescius/spread-calc-engine
@mescius/spread-sheets-core	@mescius/spread-common
@mescius/spread-sheets-bindings	@mescius/spread-common @mescius/spread-sheets-core
@mescius/spread-sheets-cell-types	@mescius/spread-common @mescius/spread-sheets-core
@mescius/spread-sheets-sparklines	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine
@mescius/spread-sheets-search	@mescius/spread-common @mescius/spread-sheets-core
@mescius/spread-sheets-outlines	@mescius/spread-common @mescius/spread-sheets-core
@mescius/spread-sheets-floating-objects	@mescius/spread-common @mescius/spread-sheets-core
@mescius/spread-sheets-comments	@mescius/spread-common @mescius/spread-sheets-core
@mescius/spread-sheets-tables	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-conditional-formatting @mescius/spread-sheets-cell-types @mescius/spread-sheets-filter @mescius/spread-sheets-bindings @mescius/spread-sheets-outlines @mescius/spread-sheets-outline-column
@mescius/spread-sheets-touch	@mescius/spread-common @mescius/spread-sheets-core
@mescius/spread-sheets-conditional-formatting	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine
@mescius/spread-sheets-cell-state	@mescius/spread-common @mescius/spread-sheets-core
@mescius/spread-sheets-data-validation	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-conditional-formatting
@mescius/spread-sheets-filter	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-conditional-formatting @mescius/spread-sheets-cell-types @mescius/spread-sheets-bindings @mescius/spread-sheets-outlines @mescius/spread-sheets-outline-column
@mescius/spread-sheets-fill	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine
@mescius/spread-sheets-context-menu	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine
@mescius/spread-sheets-formula-textbox	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-conditional-formatting @mescius/spread-sheets-cell-types @mescius/spread-sheets-filter @mescius/spread-sheets-bindings @mescius/spread-sheets-outlines @mescius/spread-sheets-outline-column @mescius/spread-sheets-tables
@mescius/spread-sheets-outline-column	@mescius/spread-common @mescius/spread-sheets-core @mescius/spread-sheets-outlines
@mescius/spread-sheets-drag-merge	@mescius/spread-common @mescius/spread-sheets-core
@mescius/spread-sheets-statusbar	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-context-menu
@mescius/spread-sheets-auto-merge	@mescius/spread-common @mescius/spread-sheets-core
@mescius/spread-sheets-calc-engine	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core
@mescius/spread-sheets-hyperlink	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine
@mescius/spread-sheets-namebox	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-cell-types
@mescius/spread-sheets-input-mask	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-cell-types

Dependencies within Plugins

The following table shows the minimum dependencies within the plugins.

Packages	Dependencies
@mescius/spread-sheets-languagepackages	@mescius/spread-common @mescius/spread-calc-engine
@mescius/spread-sheets-io	@mescius/spread-common @mescius/spread-sheets-core
@mescius/spread-sheets-charts	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-floating-objects
@mescius/spread-sheets-shapes	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-floating-objects
@mescius/spread-sheets-barcode	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-sparklines
@mescius/spread-sheets-print	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine
@mescius/spread-sheets-pdf	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-print
@mescius/spread-sheets-slicers	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-floating-objects @mescius/spread-sheets-shapes @mescius/spread-sheets-conditional-formatting @mescius/spread-sheets-cell-types @mescius/spread-sheets-filter @mescius/spread-sheets-bindings @mescius/spread-sheets-outlines @mescius/spread-sheets-outline-column @mescius/spread-sheets-tables
@mescius/spread-sheets-pivot-addon	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-floating-objects @mescius/spread-sheets-shapes @mescius/spread-sheets-conditional-formatting @mescius/spread-sheets-cell-types @mescius/spread-sheets-filter @mescius/spread-sheets-bindings @mescius/spread-sheets-outlines @mescius/spread-sheets-outline-column @mescius/spread-sheets-tables @mescius/spread-sheets-slicers @mescius/spread-sheets-formula-textbox
@mescius/spread-sheets-tablesheet	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-conditional-formatting @mescius/spread-sheets-cell-types @mescius/spread-sheets-filter @mescius/spread-sheets-bindings @mescius/spread-sheets-outlines @mescius/spread-sheets-outline-column @mescius/spread-sheets-tables @mescius/spread-sheets-formula-textbox @mescius/spread-sheets-context-menu @mescius/spread-sheets-statusbar @mescius/data-manager @mescius/spread-sheets-auto-merge @mescius/spread-sheets-cell-state @mescius/spread-sheets-data-validation
@mescius/spread-sheets-ganttsheet	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-conditional-formatting @mescius/spread-sheets-cell-types @mescius/spread-sheets-filter @mescius/spread-sheets-bindings @mescius/spread-sheets-outlines @mescius/spread-sheets-outline-column @mescius/spread-sheets-tables @mescius/spread-sheets-formula-textbox @mescius/spread-sheets-context-menu @mescius/spread-sheets-statusbar @mescius/data-manager @mescius/spread-sheets-auto-merge @mescius/spread-sheets-cell-state @mescius/spread-sheets-data-validation @mescius/spread-sheets-tablesheet
@mescius/spread-sheets-reportsheet-addon	@mescius/spread-common @mescius/spread-calc-engine @mescius/data-manager @mescius/spread-calc-engine-basic-functions @mescius/spread-calc-engine-advanced-functions @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-tables @mescius/spread-sheets-bindings @mescius/spread-sheets-components @mescius/spread-sheets-floating-objects @mescius/spread-sheets-sparklines @mescius/spread-sheets-statusbar @mescius/spread-sheets-cell-state @mescius/spread-sheets-cell-types @mescius/spread-sheets-conditional-formatting @mescius/spread-sheets-data-validation @mescius/spread-sheets-filter @mescius/spread-sheets-context-menu @mescius/spread-sheets-print @mescius/spread-sheets-shapes @mescius/spread-sheets-charts @mescius/spread-sheets-datacharts-addon @mescius/spread-sheets-tablesheet @mescius/spread-sheets-reportsheet-addon

Dependencies within Resources

The following table shows the minimum dependencies within the resources.

Packages	Dependencies
@mescius/spread-sheets-resources-ja	@mescius/spread-common @mescius/spread-sheets-core
@mescius/spread-sheets-resources-ko	@mescius/spread-common @mescius/spread-sheets-core
@mescius/spread-sheets-resources-zh	@mescius/spread-common @mescius/spread-sheets-core

Packages

Dependencies

@mescius/spread-sheets-resources-ja

@mescius/spread-common

@mescius/spread-sheets-core

@mescius/spread-sheets-resources-ko

@mescius/spread-common

@mescius/spread-sheets-core

@mescius/spread-sheets-resources-zh

@mescius/spread-common

@mescius/spread-sheets-core

Sample Codes for Using Modules

Using core module with global variable

The following code sample shows how to use the core module with global variable:

<!DOCTYPE html>
<html>
<head>
 <title>Test SJS Modules with Global Variable</title>
 <link rel="stylesheet" type="text/css"
 href="./@mescius/spread-common/styles/gc.spread.sheets.excel2016colorful.css" />
</head>
<body>
 <div id="testDiv" style="width:100%;height:300px;"></div>
 <script type='text/javascript' src="./@mescius/spread-common/dist/gc.spread.common.min.js"></script>
 <script type='text/javascript' src="./@mescius/spread-sheets-core/dist/gc.spread.sheets.core.min.js"></script>
 <script type='text/javascript'>
 window.onload = function () {
 var spread = new GC.Spread.Sheets.Workbook(document.getElementById("testDiv"));
 };
 </script>
</body>
</html>

Using core module with AMD

The following code sample shows how to use the core module with AMD:

<!DOCTYPE html>
<html>
<head>
 <title>Test SJS Modules with AMD</title>
 <link rel="stylesheet" type="text/css"
 href="./@mescius/spread-common/styles/gc.spread.sheets.excel2016colorful.css" />
</head>
<body>
 <div id="testDiv" style="width:100%;height:300px;"></div>
 <script type='text/javascript' src="./require.js"></script>
 <script type='text/javascript'>
 window.onload = function () {
 require.config({
 paths: {
 '@mescius/spread-common': './@mescius/spread-common/dist/gc.spread.common.min',
 '@mescius/spread-sheets-core': './@mescius/spread-sheets-core/dist/gc.spread.sheets.core.min'
 }
 });
 require(['@mescius/spread-common', '@mescius/spread-sheets-core'], function (GC) {
 var spread = new GC.Spread.Sheets.Workbook(document.getElementById("testDiv"));
 });
 };
 </script>
</body>
</html>

Using core module with CommonJS

The following code sample shows how to use the core module with CommonJS:

import * as GC from "@mescius/spread-common";
import "@mescius/spread-sheets-core";
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("testDiv"));

Using sparklines module with CommonJS

The following code sample shows how to use the sparklines module with CommonJS:

import * as GC from "@mescius/spread-common";
import "@mescius/spread-calc-engine";
import "@mescius/spread-sheets-core";
import "@mescius/spread-sheets-calc-engine";
import "@mescius/spread-sheets-sparklines";
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("testDiv"));
var sheet = spread.getActiveSheet();
sheet.suspendPaint();
sheet.setFormula(0, 0, '=PIESPARKLINE(0.25, "red"');
sheet.setRowHeight(0, 60);
sheet.resumePaint();

Using print module with CommonJS

The following code sample shows how to use the print module with CommonJS:

import * as GC from "@mescius/spread-common";
import "@mescius/spread-calc-engine";
import "@mescius/spread-sheets-core";
import "@mescius/spread-sheets-calc-engine";
import "@mescius/spread-sheets-print";
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("testDiv"));
var sheet = spread.getActiveSheet();
sheet.setValue(0, 0, "Hello SpreadJS!")
spread.print();

Using Chinese resource module with CommonJS

The following code sample shows how to use the Chinese resource module with CommonJS:

import * as GC from "@mescius/spread-common";
import "@mescius/spread-sheets-core";
import "@mescius/spread-sheets-resources-zh";
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("testDiv"));