Demos
Enhanced Add-Ons
ReportSheet
Overview

Overview

The SpreadJS ReportSheet Add-on introduces a creative design that is very simple and flexible, so that users can easily design their reports. In addition, ReportSheet supports data entry, pagination, data filtering, sorting, conditional formatting and more.

JavaScript
Angular
Vue3
React
Description
app.js
index.html
styles.css
Copy to CodeMine
Open the demo in new window can open the designer

How to open desgnr

SpreadJS ReportSheet contains two important parts: ReportSheet and TemplateSheet (containing various report-related settings). ReportSheet can use the report-related settings in the TemplateSheet and the data in the DataManager to generate a corresponding report. ReportSheet also provides data entry APIs.

To use ReportSheet, add the JS file link into the document's head section:

<head>
   ...
   <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>
</head>

You can then bind a table to the TemplateSheet and generate a row-based report.

const spread = new GC.Spread.Sheets.Workbook('ss', { sheetCount: 1 });
const ordersTable = spread.dataManager().addTable('Orders', {
    remote: {
        read: {
            url: 'https://demodata.mescius.io/northwind/api/v1/orders'
        }
    }
});
// load the data from the remote
ordersTable.fetch().then(() => {
    const reportSheet = spread.addSheetTab(0, 'report1', GC.Spread.Sheets.SheetType.reportSheet);
    const templateSheet = reportSheet.getTemplate();

    // set value and binding for the template
    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}]`,
        });
    });

    // refresh the report
    reportSheet.refresh();
});
Open the demo in new window can open the designer SpreadJS ReportSheet contains two important parts: ReportSheet and TemplateSheet (containing various report-related settings). ReportSheet can use the report-related settings in the TemplateSheet and the data in the DataManager to generate a corresponding report. ReportSheet also provides data entry APIs. To use ReportSheet, add the JS file link into the document's head section: You can then bind a table to the TemplateSheet and generate a row-based report.