Lazy Loading

The GridPDFExport component enables you to dynamically import the PDF export component only when it is needed.

The code-splitting is achieved over the usage of React.lazy and Suspense. The approach utilizes a separate component that is responsible for exporting the Grid to PDF. That component is loaded only when the user clicks the Export to PDF button.

import React, { Suspense, useState } from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn as Column, GridToolbar } from '@progress/kendo-react-grid';
import { sampleProducts } from './sample-products.jsx';

const PDFExport = React.lazy(() => import('./PDFExport'));

const App = () => {
  const [exportPDF, setSetExportPDF] = useState(false);
  const exportCallback = () => {

  const grid = (
    <Grid data={sampleProducts} style={{ height: '445px' }}>
          title="Export PDF"
          className="k-button k-primary"
          onClick={() => setSetExportPDF(true)}
          Export PDF
      <Column field="ProductID" title="ID" width="40px" />
      <Column field="ProductName" title="Name" width="300px" />
      <Column field="Category.CategoryName" title="Category" />
      <Column field="UnitPrice" title="Price" />
      <Column field="UnitsInStock" title="In stock" />

  return (
      {exportPDF && <Suspense fallback={<span className="k-icon k-i-loading" />}>
        <PDFExport grid={grid} data={sampleProducts} exportPDF={exportPDF} exportCallback={exportCallback} />

  <App />,