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

;

Integration of pqgrid with vue

pqgrid can be used in Vue applications like any other component. To include pqgrid, configuration options are passed to the grid as a single mutable object.


Reactive options

pqgrid has its own reactive workhorse that works quite similar to reactive system of Vue that enables it to perform two way binding. e.g., if configuration options object is mutated, pqgrid updates itself and vice versa.
Reactive system of pqgrid is turned on simply by setting reactive option to true. For more details, please see the reactive option.


Include dependencies:

Dependencies of pqgrid ( mentioned in tutorial section ) are included with script tags or through NPM


Change locale

Purpose of this example is to demonstrate how to pass initial configuration options object to pqgrid and mutate it later.

  • We include few localization files for this example.
  • We mutate options.locale by binding it to select list.