Basics

Formatting

Context menu

Drag n Drop

Spreadsheet

Tabs

Export (csv, html, pdf, xlsx )

RTL Layout

Layouts

Rows

Paging

Big data

Columns

Cells

Inline editing

Row Grouping

Pivot

Sorting

Filter

Selections

Nesting / Row details

Tree grid

Charts

Angular

React React

Vue Vue

Knockout

;

Define merge cells

Cells can be merged across rows and columns with mergeCells option which is an array of objects where each object defines a single merged cell.

Each object has following properties:

  • r1 is shorthand for rowIndx,
  • c1 for colIndx
  • rc is rowCount or rowspan
  • cc is columnCount or colspan.

If there is one or more intermediate hidden columns lying in the merged cell, visible/effective colspan gets reduced by same amount.

If there is one or more intermediate hidden rows lying in the merged cell, visible/effective rowspan gets reduced by same amount.

"E" column is hidden in this example.

Horizontal and Vertical alignment of cells

All the cells including merge cells are horizontally left and vertically top aligned by default. We can use column.align and column.valign properties to set horizontal and vertical alignments respectively of all cell including merge cells in a column.

Text alignment of individual cells can be defined with rowData.pq_cellprop[ dataIndx ] = { align: x, valign: y } property.