How to install

• Add q-grid & theme modules to the application root
• Create an angular component
• Dependencies
• Development
• Browser Support
• Licence

npm install ng2-qgrid --save

Add q-grid & theme modules to the application root

There are 2 themes out of box: material and basic(experimental).

import { GridModule } from 'ng2-qgrid';
import { ThemeModule } from 'ng2-qgrid/theme/material';

@NgModule({
   imports: [
      GridModule,
      ThemeModule
   ]
})
export class AppModule {
}

If you use q-grid material theme install angular material

Create an angular component

Use column generation mode for a quick start.

import { Grid } from 'ng2-qgrid';

@Component({
   selector: 'my-component',
   template: `
      <q-grid [rows]="rows$ | async"
              [model]="gridModel">
      </q-grid>
      `
})
export class MyComponent {
   rows$ = this.dataService.getRows();
   gridModel = this.qgrid
      .model();
      .columnList({ 
         generation: 'deep' 
      });

   constructor(
      private dataService: MyDataService,
      private qgrid: Grid
   ) {
   }
}

Dependencies

Next libraries should be installed separately to support client side export and import features.

• xlsx
• file-saver
• @types/xlsx
• @types/file-saver

Develop the q-grid

q-grid uses yarn to manage packages, after installed just execute the command line

git clone https://github.com/qgrid/ng2.git
yarn install
yarn start

Stackblitz

For the reason unknown stackblitz requires to install next dependencies in addition to the ng2-qgrid

• @qgrid/core
• @qgrid/plugins
• @qgrid/ngx
• @qgrid/ngx-plugins

License

Code licensed under MIT license.