Export of static and conditional styles in cells, rows and columns.

The styles and their order of preference are used not only during the grid rendering but also during export to html, pdf & spreadsheet

Column styles are specified in column.style property, they are applied to all cells of the column

Row static styles are specified in rowData.pq_rowstyle property, they are applied to all cells of the row. They have higher priority than column styles, i.e., if there are common styles in both column and row, then row styles override those of the column ones.

Row conditional styles are returned by style property from rowInit callback, they are also applied to all cells of the row. They have higher priority than row static styles.

Individual static cell styles are specified in rowData.pq_cellstyle[ dataIndx ] property It can be added directly in js data of the grid or added with grid.Range(..).style(..), grid.Range(..).toggleStyle(..) and grid.Range(..).border(..) methods. They have higher priority than row conditional styles.

Individual conditional cell styles are returned by style property from column.render callback. They have higher priority than individual static cell styles. Notice how the styles added by column.render override the styles added by rowInit callback.

Conditional styles may also be added with help of formulas as shown in this example but column.render is the preferred way.

Styles listed in left column of below table when used in the grid in any of the abovementioned types are exported to html, pdf and spreadsheet

css style of cell/row/column in grid corresponding property in javascript workbook for Excel spreadsheet corresponding property in javascript object for pdf & html
background-color: string ( background in <= v7.2.0 ) bgColor: string All the styles are in the form of pure css i.e., cell.css = "color:#ff0000;background-color:#00ff00;"
border: string border: {left: string, top: string, right: string, bottom: string}
border-top: string border: { top: string }
border-right: string border: { right: string }
border-bottom: string border: {bottom: string}
border-left: string border: {left: string}
color: string color: string
font-family: string font: string
font-size: string

Note: Spreadsheet and pdf use font size in "pt" only and hence font-size in "px" in grid may appear bigger or smaller when exported to spreadsheet and pdf.

fontSize: number
font-weight when 'bold' bold = true
font-style when 'italic' italic = true
text-decoration when 'underline' underline = true
white-space when 'normal' cell.wrap = true
prop of cell/row/column in grid corresponding property in javascript workbook for Excel spreadsheet corresponding property in javascript object for pdf & html
align: 'left' | 'center' | 'right' align alignment
valign: 'top' | 'center' | 'bottom' valign valign

What about import of styles?

Conversely cell / row / column styles in Excel xlsx file or cell / row / column properties in javascript workbook are imported to grid as static styles i.e., rowData.pq_cellstyle[ dataIndx ], rowData.pq_rowstyle and column.style.

There is no API to import styles from html and pdf into grid.