Reporting for React
- 4 minutes to read
Topics in this section describe how to use Reporting components in applications based on the React framework.
DevExpress Web Reporting controls are composed of DevExtreme UI components. React versions supported by the DevExtreme Component Suite are listed in the following help topic: DevExtreme React - Supported Versions .
Constants and enums in TypeScript code may require the import directive. The following example declares the DevExpress.Reporting.Viewer.ZoomAutoBy enum:
import { ZoomAutoBy } from "devexpress-reporting/viewer/constants";
You can import constants from the following sources:
- Document Viewer:
devexpress-reporting/dx-webdocumentviewer - Report Designer:
devexpress-reporting/dx-reportdesigner
Web Document Viewer
Get Started
- Create a React Application with Web Document Viewer (Next.js)
- Document Viewer Client-Side Configuration in React Applications
- Specify Parameter Values in a React Reporting Application
- Localize Reporting Tools for React
- Content Security Policy for React Applications
Customization
- Customize the Document Viewer Toolbar in React Application
- Customize the Document Viewer Tab Panel in React Application
- Customize Parameter Editor in the Document Viewer in React Applications
- Tasks and Solutions for ASP.NET Core Applications
End-User Documentation
Client-Side API
Client Object
Use the JSReportViewer class to access the client-side API in React applications.
Events
Client-side events in React are handled with callbacks specified in the Callbacks component.
For a list of event names and their arguments, review WebDocumentViewerClientSideEventsBuilder methods. Although that documentation topic is specific to ASP.NET Core, the API for React callbacks is the same.
The following code snippet uses the CustomizeExportOptions callback to remove the XLS format from the Export To drop-down list and from the Export Options panel:
'use client';
import ReportViewer, { RequestOptions, Callbacks } from 'devexpress-reporting-react/dx-report-viewer';
import { ExportFormatID } from 'devexpress-reporting/dx-webdocumentviewer';
import 'devextreme/dist/css/dx.light.css';
import '@devexpress/analytics-core/dist/css/dx-analytics.common.css';
import '@devexpress/analytics-core/dist/css/dx-analytics.light.css';
import 'devexpress-reporting/dist/css/dx-webdocumentviewer.css';
function App() {
const onCustomizeExportOptions = ({ args }: { args: any }): void => {
args.HideFormat(ExportFormatID.XLS);
};
return (
<ReportViewer reportUrl="TestReport">
<RequestOptions host="http://localhost:5000/" invokeAction="DXXRDV" />
<Callbacks CustomizeExportOptions={onCustomizeExportOptions} />
</ReportViewer>
)
}
export default App
Web Report Designer
Get Started
- Create a React Application with Web Report Designer (Next.js)
- Report Designer Client-Side Configuration in React Applications
- Enable the Rich Text Editor
- Localize Reporting Tools for React
- Content Security Policy for React Applications
Customization
- Tasks and Solutions for ASP.NET Core Applications
A general technique that allows you to customize the UI elements in Reporting components: Use Custom HTML Templates.
- Use the ReportDesignerSettingsBase class to configure the Web End-User Report Designer on the client. For more information, refer to the following section: ReportDesignerSettingsBase for JavaScript Frameworks
End-User Documentation
Client-Side API
Client Object
Use the JSReportDesigner class to access the client-side API in React applications.
Events
Client-side events in React are handled with callbacks specified in the Callbacks component.
For a list of event names and their arguments, review ReportDesignerClientSideEventsBuilder methods. Although that documentation topic is specific to ASP.NET Core, the API for React callbacks is the same.
The following code snippet does the following:
- Displays a message when the Report Designer switches to another tab.
- Specifies a measurement unit when the Report Designer opens a report.
- Hides the Print Page action in Preview.
- Adds a new action button to Preview.
'use client';
import ReportDesigner, { Callbacks, RequestOptions} from 'devexpress-reporting-react/dx-report-designer';
import {ActionId } from 'devexpress-reporting/dx-webdocumentviewer';
import 'devextreme/dist/css/dx.light.css';
import '@devexpress/analytics-core/dist/css/dx-analytics.common.css';
import '@devexpress/analytics-core/dist/css/dx-analytics.light.css';
import 'devexpress-reporting/dist/css/dx-webdocumentviewer.css';
import 'ace-builds/css/ace.css';
import 'ace-builds/css/theme/dreamweaver.css';
import 'ace-builds/css/theme/ambiance.css';
import '@devexpress/analytics-core/dist/css/dx-querybuilder.css';
import 'devexpress-reporting/dist/css/dx-reportdesigner.css';
function App() {
const onTabChanged = ({ args }: { args: any }): void => {
alert("The tab was changed to " + args.Tab.displayName());
};
const onReportOpened = ({ args }: { args: any }): void => {
args.Report.measureUnit("TenthsOfAMillimeter");
};
const onPreviewCustomizeMenuActions = ({ args }: { args: any }): void => {
var actions = args.Actions;
// Get the "Print Page" action and hide it.
var printPageAction = args.GetById(ActionId.PrintPage);
if (printPageAction)
printPageAction.visible = false;
// Add a new action.
actions.push({
text: "Custom Command",
imageClassName: "customButton",
imageTemplateName: "dxrd-svg-wizard-warning",
hasSeparator: false,
disabled: false,
visible: true,
hotKey: { ctrlKey: true, keyCode: "Z".charCodeAt(0) },
clickAction: function () {
alert('Clicked.');
}
})
};
return (
<ReportDesigner reportUrl="TestReport">
<RequestOptions host="http://localhost:5000/" getDesignerModelAction="DXXRD/GetDesignerModel" />\
<Callbacks TabChanged={onTabChanged}
ReportOpened={onReportOpened}
PreviewCustomizeMenuActions={onPreviewCustomizeMenuActions}/>
</ReportDesigner>
)
}
export default App;
Standalone Report Parameters Panel
The Standalone Report Parameters Panel is a component that creates a layout with editors for report parameters. It retrieves information on report parameters from a DevExpress report instance passed from the backend.
This component can be used to programmatically create a report on the server without showing a preview to the end user. The Standalone Report Parameters Panel component is based on the Parameters Panel of the DevExpress Document Viewer component. Public properties and events are similar to the properties and events implemented in the Web Document Viewer component.
Get Started
Examples
Search sample projects and learn how to use and customize Reporting components in React applications: