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

;

Column grouping

Column grouping or nesting of columns in pqGrid is done by using nested column models e.g., in following 'B' and 'C' are displayed as children of 'A' column.

colModel: [
    {title: 'A', colModel: [
        {title: 'B', dataIndx: 'b', dataType: 'integer'},
        {title: 'C', dataIndx: 'c', dataType: 'string'}
    ]}
]

Collapsible columns:

To make the columns collapsible, collapsible property can be set on any parent grouped column either during initialization or during runtime.

When parent is collapsed, all columns except the first or last child column are hidden depending upon value of collapsible.last

beforeColumnCollapse and columnCollapse events are fired when columns are expanded/collapsed through UI.

To programmatically collapse/expand a column or number of columns, get reference to column(s) and set column.collapsible.on to true/false