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

;

Basic parts:

ParamQuery Grid is composed of many visual parts which can be turned on or off during initialization or run time. This example shows only few commonly used options out of them to keep it simple.

Options affecting grid width/height or column width

autoFit adjusts the columns widths to fit them perfectly within the grid without horizontal scrolling or leaving empty space.

width: flex is the opposite of autoFit; it adjusts the grid width to sum total of all column widths without horizontal scrolling or leaving empty space.

height: flex makes the grid height sum total of all content height in grid wihout vertical scrolling.

flex() method adjusts the columns widths to minimum widths so that all content is visible within cells without text wrap.

This example uses reactive option to makes the grid listen and react to any change in initialization options of grid without using grid.option() method.



Bottom
Main Table