Export of javascript grid to HTML

Export to HTML has been implemented to cover most possible use case scenarios with help of configuration encompassing both declarative options and imperative methods.

API

Most of the export to HTML custmization is based on parameters passed to exportData(...) method, and values of column.skipExport, column.exportRender, rowData.pq_hidden, rowData.pq_selected properties.

Header

Header of grid is exported by default. It can be skipped by passing header: false parameter to exportData method.

There is an eachCellHead callback parameter to exportData method to alter properties ( text, html, css, alignment, valign ) of every exported header cell.

There is an eachRowHead callback parameter to exportData method to alter properties ( attr, css ) of every exported header row.

Columns

Columns with property skipExport set to true are excluded from exported data. This property can be applied to normal as well as grouped columns.

Hidden columns are visible in the exported HTML document by default, they can be removed by passing skipHiddenColumns: true to exportData method.

Rows

Only selected rows or rows with property pq_rowselect: true can be exported by passing selection: 'row' parameter to exportData method.

Hidden rows are visible in the exported HTML document by default, they can be removed by passing skipHiddenRows: true to exportData method.

There is an eachRow callback parameter to exportData method to alter properties ( attr, css ) of every exported row.

Filtering

Only filtered rows are exported by default. Unfiltered rows are also exported when filterModel.hideRows: true unless skipHiddenRows: true is passed to exportData method.

Cells

Cells data rowData[ dataIndx ] along with formatting and static styles are exported by default. To include the rendered values and styles returned by column.render callback ( if any ) for all columns, pass render: true to exportData method.

To include the rendered values of few columns only, don't pass render: true to exportData method, rather set column.exportRender to true for those columns. Vice versa to exclude the rendered or formatted values of few columns only, pass render: true to exportData method and set column.exportRender to false for those columns.

ui.Export is true inside the column.render callback to help render the cells differently in exported HTML document than in grid

There is an eachCell callback parameter to exportData method to alter properties ( text, html, link, css, alignment, valign, rowSpan, colSpan ) of every exported cell.

if (rd.image) {
  // Convert to a valid URL
  rd.image = window.location.origin + "/pro2/content/images/" + rd.image;

  // Set the cell type to 'Pic'
  rd.pq_cellprop = {
    image: {
      inst: 'Pic'
    }
  };
}
  

Hyperlinks

Hyperlinks can be defined in the grid by any of the following:

• setting rowData.pq_cellprop[ dataIndx ].link property to url
• HYPERLINK spreadsheet formula
• returning hyperlink html e.g., <a href="https://foo.com..">Bar</a> in column.render callback.

If hyperlinks are created in cells with the last method, then it's required to use column.exportRender to true or pass render: true to exportData method to export the hyperlinks.

Styling of hyperlinks

Hyperlinks inherit the style of their parent cells. linkStyle string parameter passed to exportData method is used to apply styles to hyperlinks if cells have no corresponding styles. Note that styles passed through linkStyle parameter have lower priority than cell styles.

Top level flow diagram of Html export process

grid.exportData(...) first converts grid data to js intermediate object and calls pq.exportHtm() internally to finally return html table.