DevExtreme v24.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React Data Grid - Header and Footer

The DataGrid allows you to customize a header and a footer in the exported PDF file.

To give you the ability to edit code on the fly, the demo uses SystemJS. For this reason, launching the demo takes some time. We strongly recommend that you do not use this approach in real projects.
www.wikipedia.org
Backend API

Follow the steps below to configure a header/footer:

  1. Call the exportDataGrid(options) method.

  2. Use the following API to specify header/footer layout settings:

    • For a header
      Use the topLeft object to specify a start position for DataGrid export. This position should be below the header.

    • For a footer
      Use the customDrawCell function to calculate the coordinates of the last right cell of the DataGrid.

  3. Execute a promise after the exportDataGrid(options) method. In this promise, specify position and appearance of the header/footer.