Responsive layout rendering of React Report Viewer

To make the Bold Reports^® React Report Viewer render responsively, set the isResponsive property to true. The Report Viewer then renders optimal user interfaces for phone, tablet, or desktop form factors, so your application scales on all form factors.

 var isResponsive = true;

 function App() {
     return (<div id="viewer" style={viewerStyle}>
     <BoldReportViewerComponent id="reportviewer-container"
     reportServiceUrl = {'https://demos.boldreports.com/services/api/ReportViewer'}
     reportPath = { 'GroupingAgg.rdl' }
     isResponsive = { isResponsive }
     >
     </BoldReportViewerComponent>
     </div>);
   }

Normal layout

The following output shows the normal layout rendering of the React Report Viewer toolbar items.

Responsive layout

The following output shows the responsive layout rendering of the React Report Viewer toolbar items.

See also

• Toolbar customization in the React Report Viewer
• Print reports in the React Report Viewer
• React Report Viewer overview