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

;

Nesting of grids

ParamQuery Grid can be nested within another grid upto any number of levels. There is an icon in each row of detail column to expand / collapse the detail view of corresponding row. There is also an icon in the header cell to expand / collapse the detail view of all the rows.

Note that nesting of grids and row details use the same API.

Hide expand / collapse icons

It may be required to hide the expand icons if there is no nested grid or row detail or due to some other use case corresponding to that row. It's done by implementing detailModel.hasChild callback.

In this example, "Eastern Asia" sub continent doesn't have any children data so we implement detailModel.hasChild callback for sub continents as follow:

//conditionally hide expand icon for rows who have no children.
hasChild: function (rowData) {
    return (rowData.data || []).length > 0;
},