pqgrid can be used in Angular applications like any other component. To include pqgrid, configuration options are passed to the grid as a single mutable object.
pqgrid has its own reactive workhorse 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.
pqgrid is installed though npm or yarn.
npm i pqgrid
pqgrid has peer dependencies which are indicated when pgrid is installed.
jquery jquery-ui-pack @types/jquery @types/jqueryui jszip
pqgrid exports pq module which is imported into your application by
import pq from 'pqgrid';
At least one localization is mandatory which is imported by
All css files for pqgrid and dependencies can be included either in styles.css using
or specified in angular.json > build > options > styles section.
"styles": [ "src/styles.css", "node_modules/jquery-ui-pack/jquery-ui.css", "node_modules/jquery-ui-pack/jquery-ui.structure.css", "node_modules/jquery-ui-pack/jquery-ui.theme.css", "node_modules/pqgrid/pqgrid.min.css", "node_modules/pqgrid/pqgrid.ui.min.css", "node_modules/pqgrid/themes/steelblue/pqgrid.css" ],
Purpose of this example is to demonstrate how to pass initial configuration options object to pqgrid and mutate it later.
options.localeby binding it to select list.