ActiveReportsJS React Report Designer
This page provides a detailed overview of the ActiveReportsJS React Report Designer. You can check the Get Started tutorial for a concise guide for integrating the designer component into a React application.
ActiveReportsJS React NPM package
We distribute the library that contains the ActiveReportsJS React Report Designer component via the @grapecity/activereports-react npm package. The main @grapecity/activereports package provides the core functionality.
ActiveReportsJS React Designer component
ActiveReportsJS React Designer component can be imported to a JSX(TSX) file and included in a component's rendering tree, for example:
import { Designer } from "@grapecity/activereports-react";
function App() {
return (
<div>
<Designer />
</div>
);
}The designer component accepts the following properties.
Property | Type | Description |
|---|---|---|
hotkeysEnabled | boolean | indicates whether the save and open hotkeys are enabled |
language | string | sets the language of Designer Component interface. Check the Localization page for more information |
fontSet | "default" | "registered" | "all" | indicates the available font set. Visit the Font Configuration for more information. |
dataSources | array of Data Source Templates | sets the Pre-defined data sources and data sets. |
reportList | array of Report Resource Info items | |
imageList | array of Image Resource Info items | |
onCreate | adds the New Report button in the designer toolbar and sets the corresponding click handler | |
onOpen | adds the Open Report button in the designer toolbar and sets the corresponding click handler | |
onRender | adds the Preview Report button in the designer toolbar and sets the corresponding click handler | |
onSave | adds the Save Report button in the designer toolbar and sets the corresponding click handler | |
onSaveAs | adds the Save As.. button in the designer toolbar and sets the corresponding click handler | |
onOpenFileMenu | adds the "File" menu in the designer toolbar and sets the corresponding click handler | |
report | loads the specified report in the designer | |
customInitTemplates | sets the report item templates for the designer component | |
documentChanged | (args: DocumentChangedEventArgs)=>void | sets the handler for the event that occurs when a report loaded into the designer changes |
Also, the parent component can use the getReport, setReport, and processCommand methods of the Designer class instance by creating the ref for a Designer component, for example
import { Designer } from "@grapecity/activereports-react";
function App() {
const designerRef = React.createRef();
const btnClick = function () {
designerRef.current.setReport({id: "report.rdlx-json"});
};
return (
<div id="designer-host">
<button type="button" onClick={btnClick}>
Open Report
</button>
<Designer ref={designerRef} />
</div>
);
}