Skip to main content

Reporting for React

  • 5 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

View Example: Reporting for React - Add a Web Document Viewer to a React App

Get Started

Customization

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/viewer/constants';

function App() {
  const onCustomizeExportOptions = ({ args }: { args: any }): void => {
    args.HideFormat(ExportFormatID.XLS);
  };
  return (
    <ReportViewer reportUrl="TestExportReport">
      <RequestOptions host="http://localhost:5000/" invokeAction="DXXRDV" />
      <Callbacks CustomizeExportOptions={onCustomizeExportOptions} />
    </ReportViewer>
  )
}

export default App

Web Report Designer

View Example: Reporting for React - Add a Web Report Designer to a React App

Get Started

Customization

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 dynamic from 'next/dynamic'
import Callbacks from 'devexpress-reporting-react/dx-report-designer/options/Callbacks'
import RequestOptions from 'devexpress-reporting-react/dx-report-designer/options/RequestOptions';
import {ActionId } from 'devexpress-reporting/viewer/constants';
const ReportDesigner = dynamic(() => import('devexpress-reporting-react/dx-report-designer'), {ssr: false})


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: