How to use @pebula/ngrid - 10 common examples

ngOnInit(): void {
    const controller = PblNgridPluginController.find(this.extApi.grid);
    this.plugin = controller.getPlugin(PLUGIN_KEY); // TODO: THROW IF NO PLUGIN...
    this.plugin.addDetailRow(this);
    const tradeEvents = controller.getPlugin('targetEvents');
    tradeEvents.cellClick
      .pipe(UnRx(this))
      .subscribe( event => {
        if (event.type === 'data' && event.row === this.context.$implicit) {
          const { excludeToggleFrom } = this.plugin;
          if (!excludeToggleFrom || !excludeToggleFrom.some( c => event.column.id === c )) {
            this.toggle();
          }
        }
      });

    tradeEvents.rowClick
      .pipe(UnRx(this))

/* @pebula-example:ex-1 */
import { ChangeDetectionStrategy, Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { createDS, columnFactory, PblNgridComponent } from '@pebula/ngrid';
import { PblNgridOverlayPanelFactory } from '@pebula/ngrid/overlay-panel';
import { Seller, DemoDataSource } from '@pebula/apps/ngrid/shared';

@Component({
  selector: 'pbl-overlay-panel-grid-example-component',
  templateUrl: './overlay-panel.component.html',
  styleUrls: ['./overlay-panel.component.scss'],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class OverlayPanelGridExampleComponent {

  columns = columnFactory()
    .table(
      { prop: 'id', sort: true, width: '40px', wontBudge: true },
      { prop: 'name', sort: true },
      { prop: 'email', minWidth: 250, width: '250px' },
      { prop: 'address' },
      { prop: 'rating', type: 'starRatings', width: '120px' }
    )
    .build();

  ds = createDS().onTrigger( () => this.datasource.getSellers(0, 100) ).create();

  @ViewChild(PblNgridComponent, { static: true }) ngrid: PblNgridComponent;

  constructor(private datasource: DemoDataSource,
              private overlayPanelFactory: PblNgridOverlayPanelFactory) { }

{ prop: 'bio' },
    )
    .build();
  ds1 = createDS().onTrigger( () => this.datasource.getPeople(0, 5) ).create();

  columns2 = columnFactory()
    .table(
      { prop: 'name', minWidth: 500 },
      { prop: 'gender', minWidth: 500 },
      { prop: 'birthdate', type: 'date', minWidth: 500 },
      { prop: 'email', minWidth: 500 },
    )
    .build();
  ds2 = createDS().onTrigger( () => this.datasource.getPeople(0, 5) ).create();

  columns3 = columnFactory()
    .default({ resize: true })
    .table(
      { prop: 'name' },
      { prop: 'gender', maxWidth: 50 },
      { prop: 'birthdate', type: 'date', maxWidth: 100 },
      { prop: 'bio', maxWidth: 500 },
    )
    .build();
  ds3 = createDS().onTrigger( () => this.datasource.getPeople(0, 5) ).create();

  constructor(private datasource: DemoDataSource) { }
}
/* @pebula-example:ex-3 */
/* @pebula-example:ex-2 */
/* @pebula-example:ex-1 */

/* @pebula-example:ex-1 ex-2 ex-3 ex-4 */
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
import { PblNgridComponent, createDS, columnFactory } from '@pebula/ngrid';
import { Person, DemoDataSource } from '@pebula/apps/ngrid/shared';

@Component({
  selector: 'pbl-column-resizing-grid-example-component',
  templateUrl: './column-resizing.component.html',
  styleUrls: ['./column-resizing.component.scss'],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ColumnResizingGridExampleComponent {
  /* @pebula-ignore:ex-2 ex-3 ex-4 */
  columns1 = columnFactory()
    .table(
      { prop: 'id', width: '40px' },
      { prop: 'name' },
      { prop: 'gender', width: '50px' },
      { prop: 'birthdate', type: 'date' }
    )
    .build();
  ds1 = createDS().onTrigger( () => this.datasource.getPeople(0, 500) ).create();

  resize(table: PblNgridComponent): void {
    const id = table.columnApi.findColumn('id');
    table.columnApi.resizeColumn(id, '200px');
  }
  /* @pebula-ignore:ex-2 ex-3 ex-4 */
  /* @pebula-ignore:ex-1 ex-3 ex-4 */
  columns2 = columnFactory()

)
    .build();
  ds2 = createDS().onTrigger( () => this.datasource.getPeople(0, 500) ).create();
  /* @pebula-ignore:ex-1 ex-3 ex-4 */
  /* @pebula-ignore:ex-1 ex-2 ex-4 */
  columns3 = columnFactory()
    .table(
      { prop: 'id', width: '40px' },
      { prop: 'name', resize: true, minWidth: 100, maxWidth: 300 },
      { prop: 'gender', resize: true, minWidth: 50 },
      { prop: 'birthdate', type: 'date' }
    )
    .build();
  ds3 = createDS().onTrigger( () => this.datasource.getPeople(0, 500) ).create(); /* @pebula-ignore:ex-1 ex-2 ex-4 */
  /* @pebula-ignore:ex-1 ex-2 ex-3 */
  columns4 = columnFactory()
    .default({ resize: true })
    .table(
      { prop: 'id', wontBudge: true, width: '40px' },
      { prop: 'name' },
      { prop: 'gender', width: '50px' },
      { prop: 'email', width: '150px' },
      { prop: 'country' },
      { prop: 'language' },
      { prop: 'birthdate', type: 'date' },
      { prop: 'balance' },
    )
    .headerGroup(
      {
        prop: 'name',
        span: 1,
        label: 'Group A'

shouldRender(context: PblNgridDataHeaderExtensionContext): boolean {
    // We dont check for `context.col.reorder` because even if a specific column does not "reorder" we still need to render the cdk-drag
    // so the cdk-drop-list will be aware of this item, so if another item does reorder it will be able to move while taking this element into consideration.
    // I.E: It doesn't reorder but it's part of the playground.
    //
    // However, when the plugin does not exists for this table we don't need to render...

    const pluginCtrl = PblNgridPluginController.find(context.grid);
    return pluginCtrl.hasPlugin(PLUGIN_KEY);
  }
}

const DECLARATION = [
  CommonTableTemplatesComponent,
  AllInOneGridExampleComponent,
  VirtualScrollPerformanceDemoGridExampleComponent,
  SellersDemoComponent,
];

@NgModule({
  declarations: DECLARATION,
  imports: [
    RouterModule.forChild([]),
    SharedModule,
    MATERIAL, MatRippleModule,
    PblNgridModule.withCommon([ { component: CommonTableTemplatesComponent } ]),
    PblNgridDragModule.withDefaultTemplates(),
    PblNgridTargetEventsModule,
    PblNgridBlockUiModule,
    PblNgridTransposeModule,
    PblNgridDetailRowModule,
    PblNgridStickyModule,
    PblNgridStatePluginModule,
    PblNgridMaterialModule,
    PblNgridOverlayPanelModule,
  ],
  exports: [ SellersDemoComponent, AllInOneGridExampleComponent, VirtualScrollPerformanceDemoGridExampleComponent ], // we need this for detail-row
})
export class TableMixDemoModule { }

constructor(@Optional() @SkipSelf() parentModule: PblNgridCellTooltipModule,
              configService: PblNgridConfigService) {
    if (parentModule) {
      return;
    }

    PblNgridPluginController.created
      .subscribe( event => {
        // Do not remove the explicit reference to `PblNgridCellTooltipDirective`
        // We use `PblNgridCellTooltipDirective.PLUGIN_KEY` to create a direct reference to `PblNgridCellTooltipDirective`
        // which will disable dead code elimination for the `PblNgridCellTooltipDirective` plugin.
        // If it is not set, using the plugin will only work when it is used in templates, other wise, if used programmatically (`autoSetAll`)
        // CLI prod builds will remove the plugin's code.
        const cellTooltipConfig = configService.get(PblNgridCellTooltipDirective.PLUGIN_KEY);
        if (cellTooltipConfig && cellTooltipConfig.autoSetAll === true) {
          const pluginCtrl = event.controller;
          let subscription = pluginCtrl.events
            .subscribe( evt => {
              if (evt.kind === 'onInit') {
                if (!pluginCtrl.hasPlugin(PblNgridCellTooltipDirective.PLUGIN_KEY)) {
                  pluginCtrl.createPlugin(PblNgridCellTooltipDirective.PLUGIN_KEY);
                }
                subscription.unsubscribe();

private updateColumns(columns: PblColumn[]): void {
    const { prop } = this._header;
    this.columns = [];
    for (const c of columns) {
      if (c.orgProp === prop) {
        this.selfColumn = c;
      } else {
        this.columns.push(c);
      }
    }
    if (!this.selfColumn) {
      // TODO: don't assume columns[0]
      this.selfColumn = new PblColumn(this._header, this.pluginCtrl.extApi.columnStore.groupStore);
    }
  }
}

];

const DECLARATION = [
  CommonTableTemplatesComponent,
  AllInOneGridExampleComponent,
  VirtualScrollPerformanceDemoGridExampleComponent,
  SellersDemoComponent,
];

@NgModule({
  declarations: DECLARATION,
  imports: [
    RouterModule.forChild([]),
    SharedModule,
    MATERIAL, MatRippleModule,
    PblNgridModule.withCommon([ { component: CommonTableTemplatesComponent } ]),
    PblNgridDragModule.withDefaultTemplates(),
    PblNgridTargetEventsModule,
    PblNgridBlockUiModule,
    PblNgridTransposeModule,
    PblNgridDetailRowModule,
    PblNgridStickyModule,
    PblNgridStatePluginModule,
    PblNgridMaterialModule,
    PblNgridOverlayPanelModule,
  ],
  exports: [ SellersDemoComponent, AllInOneGridExampleComponent, VirtualScrollPerformanceDemoGridExampleComponent ], // we need this for detail-row
})
export class TableMixDemoModule { }