What's New in ActiveReportsJS 6.0

We are excited to announce the release of the next major version of ActiveReportsJS, version 6.0. This release includes support for React 19, as well as several new features, such as a cell-based report layout mode, new and improved Excel exporting, and API improvements. As usual, the release also includes bug fixes to address known issues.

Ready to Check Out the Latest from ActiveReportsJS? Download a Free Trial Today!

React 19 Support

ActiveReportsJS has added support for the latest stable version of React, v19! ActiveReportsJS’s React interop enables you to utilize the ActiveReportsJS Designer and Viewer within your React application.

Cell-based Report Designer

Previously, when designing a report in the ActiveReportsJS Report Designer, you were restricted to using a grid-based layout system. However, with the release of v6.0, you can now set your reports up in a cell-based report layout:

Grid-Based	Cell-Based

This mode divides the design surface into a grid of cells, providing a spreadsheet-like precision when positioning report items within the report. It is especially useful for reports intended to be exported and Excel files, ensuring accurate alignment and structure in the generated spreadsheet.

You can switch between Free-form and Cell-based layout modes at any time:

1. Select the Report tab on the application bar.
2. Click Cell-based or Free-form to switch to the desired layout mode.

New Excel Export

ActiveReportsJS’s Excel Export has been completely redesigned to address many of the issues that had been reported on it over the years:

• It now generates a separate sheet for each report section in continuous and pageless report layouts.
• It preserves number and date data types, applying the same formatting defined in the report.
• It leverages the new Cell-based layouts to represent report content with precise cell alignment - no more tiny, fragmented columns and rows.

Setting up Excel Exports with ActiveReportsJS is simple and quick:

import { XlsxAdvSettings } from "@mescius/activereportsjs";

async function exportExcel(document: PageDocument) {
  const excelSettings: XlsxAdvSettings = {
    info: {
      creator: "ActiveReportsJS"
    },
  }
  const result = await XlsxAdvExport.exportDocument(document, excelSettings);
  result.download("products.xlsx");
}

async function onExport() {
  const report = new Core.PageReport();
  await report.load(reportUrl);
  var document = await report.run();
  exportExcel(document);
}

API Improvements

Report Viewer Component

Adding Custom Drop-down Buttons

You can now add custom drop-down buttons to the toolbar of the Report Viewer. This enhancement allows you to group related actions under a single toolbar item, creating a cleaner and more flexible user interface:

Configuring Animation Effects

The Report Viewer initialization options and the Angular, React, Vue, and Svelte Report Viewer components now include a new animations property that lets you configure animation effects for charts and tables.

For tables, you can enable the onHover animation and specify the text and background colors for the highlighted row. For charts, you can enable onLoad, onHover, and highlight animations:

Report Designer Component

Destroying the Designer Instance

The Report Designer API now includes a new destroy method that allows you to properly clean up the designer instance from the UI. The Angular, React, Vue, and Svelte Designer components automatically invoke this method during their respective lifecycle events.

You can access the new version of ActiveReportsJS by downloading the files from our site, referencing our latest CDN links in your application, or installing our packages from NPM. For more information on these new features, check out our What’s New page. Happy coding!

Ready to Check Out the Latest from ActiveReportsJS? Download a Free Trial Today!