Data Columns

Use column auto generation modes for the quick start, try shallow, deep or cohort options to explore data in depth.

@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: 'cohort' 
      });

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

The column generator only supports objects, if row has type of primitive, e.g. number or string, it won’t be rendered.

Column Definitions

Use q-grid model to explicitly define column set to render. Still column generation can be used here.

qgrid
   .model();
   .data({
      columns: [
         { key: 'name', type: 'text' },
         { key: 'age', type: 'number' },
      ]
   });
Structural directives and column visibility

Sometimes it’s convenient to control column visibility inside the component’s html, for that case there are prepared components for you.

<q-grid [ngSwitch]="group">

   <q-grid-columns *ngSwitchCase="'name'">
      <q-grid-column key="firstName" title="First Name"></q-grid-column>
      <q-grid-column key="lastName" title="Last Name"></q-grid-column>
   </q-grid-columns>

   <q-grid-columns *ngSwitchCase="'address'">
      <q-grid-column key="city" title="City"></q-grid-column>
      <q-grid-column key="state" title="State"></q-grid-column>
   </q-grid-columns>

</q-grid>
How to make columns frozen/pinned?

pin property controls if the column should be pinned either to the right or to the left.

qgrid
   .model();
   .data({
      columns: [
         { key: 'name', type: 'text', pin: 'left' },
         { key: 'age', type: 'number' },
      ]
   });
How to define column order?

Column order calculates automatically depending on position in the array list and html template when <q-grid-column> is used. To explicitly set column order index property should be used.

qgrid
   .model();
   .data({
      columns: [
         { key: 'name', type: 'text', index: 2 },
         { key: 'age', type: 'number', index: 1 },
      ]
   });
Suggested Links