Skip to main content Skip to footer

New SpreadJS Addons: ReportSheet and GanttSheet

Quick Start Guide
What You Will Need

SpreadJS, Visual Studio Code, GanttSheet and ReportSheet Addons, NPM

Controls Referenced


Tutorial Concept SpreadJS JavaScript Spreadsheet Add-ons - New gantt chart and report features for web applications.

SpreadJS offers a few different, optional add-ons that greatly enhance the functionality with new features that could be valuable for your applications. The two add-ons we will discuss in this blog are the ReportSheet and GanttSheet.

You can follow along by downloading the sample and watching the video below:

Ready to Get Started? Download SpreadJS Today!


The SpreadJS ReportSheet add-on allows users to easily design reports, including support for data entry, pagination, data filtering, sorting, and conditional formatting.


The main benefits of using a ReportSheet include:

  • Integrated Template and Data Management: Allows seamless integration of report settings and data with the combination of ReportSheet and TemplateSheet. The TemplateSheet holds various report-related settings, which ReportSheet utilizes, alongside data from DataManager, to generate corresponding reports efficiently.
  • Enhanced Flexibility: Provides highly flexible syntax and API to bind source data. It follows easy data population rules in fields and also provides data entry APIs.
  • Ease of Customization: Ensures a standardized format and appearance for all generated reports, maintaining consistency across various data sets.
  • Comprehensive Data Handling Features: Manage and present data in a user-friendly manner. ReportSheet is not just about report generation; it's a comprehensive tool that supports data entry, pagination, data filtering, sorting, and conditional formatting.


SpreadJS ReportSheets provide a lot of different features, including:

  • Concepts - template cell types, spill direction, context, and render mode
  • Layout Settings - spill mode, auto expand, pin, collapse
  • Data - data binding, advanced grouping, data filtering, data sorting, calculated columns, and parameters
  • Rendering Features - styles, conditional formatting, data validation, cell states, and pictures
  • Calculations - calculation engine, hierarchical cells, and template cell alias
  • Layout - row and column
  • Data Entry - configured via DataManager
  • Printing - set paging information via Template Sheet
  • Export and Import - JSON, SJS, XLSX, or PDF

These features can help your users create reports directly inside SpreadJS. To see more about these features, check out the SpreadJS JavaScript Demos.


Adding a ReportSheet to SpreadJS is as simple as:

  1. Referencing the ReportSheet library
   <script src='.../spreadjs/gc.spread.sheets.all.x.x.x.min.js' type='text/javascript'></script>
   <script src='.../spreadjs/plugins/gc.spread.sheets.print.x.x.x.min.js' type='text/javascript'></script>
   <script src='.../spreadjs/plugins/gc.spread.reportsheet.x.x.x.min.js' type='text/javascript'></script>
  1. Creating a table in the DataManager
const spread = new GC.Spread.Sheets.Workbook('ss', { sheetCount: 1 });
const ordersTable = spread.dataManager().addTable('Orders', {
    remote: {
        read: {
            url: ''
  1. Creating a TemplateSheet
const reportSheet = spread.addSheetTab(0, 'report1', GC.Spread.Sheets.SheetType.reportSheet);
const templateSheet = reportSheet.getTemplate();
  1. Setting the value and binding for the TemplateSheet
const columns = ['orderId', 'customerId', 'orderDate', 'freight', 'shipName', 'shipCity', 'shipCountry'];
columns.forEach((columnName, i) => {
    templateSheet.setValue(0, i, `${columnName[0].toUpperCase()}${columnName.substring(1)}`);
    templateSheet.setTemplateCell(1, i, {
        type: 'List',
        binding: `Orders[${columnName}]`,
  1. Refreshing the report

SpreadJS Add-On ReportSheet


The SpreadJS GanttSheet add-on provides Gantt Chart behavior using a fast, data-bound DataTable and a spreadsheet user interface. This add-on includes standard Gantt functionality: Timescales, Taskbars, Tasks, Calendar capabilities, and more.


The main benefits of using a GanttSheet include:

  • Visual Planning: Provides a clear visual representation of project tasks, timelines, and dependencies, making it easier to plan and manage projects effectively.
  • Task Dependencies: Allows you to define and visualize task dependencies, helping you understand how different tasks are linked and the impact of delays on the overall project timeline.
  • Progress Tracking: Tracks the progress of each task and the overall project by marking completed tasks and comparing them with the planned timeline.
  • Deadline Management: Enables you to set and manage project milestones and deadlines, ensuring that the project stays on track and is completed within the specified time frame.


The SpreadJS GanttSheet Add-on provides features to help with implementing Gantt Chart functionality, including:

  • Timescales - zooming and scrolling
  • Styles - taskbar style rules, taskbar styles, gridlines, and nonworking time
  • Layout - line mode, taskbar height, date text formatting, and taskbar rounding
  • Tasks - task operations, task completion
  • Calendar - working time and different calendars
  • Resources - connect resources to tasks
  • Sorting - sort tasks by specific task fields
  • Export and Import - JSON, SJS, XLSX, and PDF

To see a deep dive into these features, check out the demos here: Overview | Features | SpreadJS JavaScript Demos


Adding a GanttSheet to SpreadJS is as simple as:

  1. Referencing the GanttSheet library
<script src="/spreadjs/demos/en/purejs/node_modules/@mescius/spread-sheets-ganttsheet/dist/gc.spread.sheets.ganttsheet.min.js" type="text/javascript"></script>
  1. Adding a table to the DataManager
var tableName = "Gantt_Id";
var baseApiUrl = getBaseApiUrl();
var apiUrl = baseApiUrl + "/" + tableName;
var dataManager = spread.dataManager();
var myTable1 = dataManager.addTable("myTable1", {
    batch: true,
    remote: {
        read: {
            url: apiUrl
    schema: {
        hierarchy: {
            type: "Parent",
            column: "parentId"
        columns: {
            id: { isPrimaryKey: true },
            taskNumber: { dataType: "rowOrder" }
  1. Creating the GanttSheet
var ganttSheet = spread.addSheetTab(0, "GanttSheet1", GC.Spread.Sheets.SheetType.ganttSheet);
  1. Adding a view
var view = myTable1.addView("myView1", [
    { value: "taskNumber", caption: "NO", width: 60 },
    { value: '=CONCAT("(L",LEVEL(),"-",LEVELROWNUMBER(),")")', caption: "L" },
    { value: "name", caption: "Task Name", width: 200 },
    { value: "duration", caption: "Duration", width: 90 },
    { value: "predecessors", caption: "Predecessors", width: 60 },
    { value: "cost", caption: "Cost", style: { formatter: "$0" } }
  1. Binding that view to the new GanttSheet
view.fetch().then(function() {

SpreadJS Add-On GanttSheet

These add-ons, including the PivotTable and Designer Ribbon, can be purchased separately or with your existing SpreadJS licenses. For pricing information, check out our website: JavaScript Spreadsheet Pricing. For more information about these add-ons, check out our Documentation and Demos, and download a trial of SpreadJS today!



comments powered by Disqus