Skip to main content

Export

On the toolbarOptions prop, you can set the print and export options to true to enable the Export to PDF and Export to Excel buttons.

  export interface ToolbarOptions {
...
  enablePdf?: boolean;
  enableExcel?: boolean;
...
}

To use the print and export features, you need to install the following packages:

  • @ezgrid/grid-export

This package has the following peer dependencies:

  • @ezgrid/grid-core
  • jspdf
  • jspdf-autotable
  • file-saver
  • exceljs

Export to PDF​

To export to PDF, you need to set the enablePdf prop to true on the toolbarOptions prop to true as well as import the createPdfBehavior function from @ezgrid/grid-export. Then, you need to add the createPdfBehavior function to the behaviors prop.

function App() {
    const columns = [
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
    createColumn("stateCode", "string", "Territory"),
    createColumn("department", "string", "Department"),
      ];

      return (
        <ReactDataGrid
          style={{ height: "400px", width: "100%" }}
          
          gridOptions={{
            behaviors:[
              createPdfBehavior({})
            ],
            dataProvider: Employee.getAllEmployees(),
            uniqueIdentifierOptions: {
              useField: "employeeId",
            },
            columns,
            toolbarOptions:{
              enablePdf: true
            }
          }}
        />
      );
    }

Export to Excel​

To export to Excel, you need to set the enableExcel prop to true on the toolbarOptions prop to true as well as import the createExcelBehavior function from @ezgrid/grid-export. Then, you need to add the createExcelBehavior function to the behaviors prop.

function App() {
    const columns = [
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
    createColumn("stateCode", "string", "Territory"),
    createColumn("department", "string", "Department"),
      ];

      return (
        <ReactDataGrid
          style={{ height: "400px", width: "100%" }}
          
          gridOptions={{
            behaviors:[
              createExcelBehavior({})
            ],
            dataProvider: Employee.getAllEmployees(),
            uniqueIdentifierOptions: {
              useField: "employeeId",
            },
            columns,
            toolbarOptions:{
              enableExcel: true
            }
          }}
        />
      );
    }

Customizing the Export​

We have found that most customers heavily customize the export to PDF and Excel features. So we have made the source code for the export features available to you. You can find the source code for the export features here