How to use the @pebula/ngrid.columnFactory function in @pebula/ngrid

/* @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'

@Component({
  selector: 'pbl-complex-demo1-example',
  templateUrl: './complex-demo1.component.html',
  styleUrls: ['./complex-demo1.component.scss'],
  animations: [
    trigger('detailExpand', [
      state('void', style({height: '0px', minHeight: '0', visibility: 'hidden'})),
      state('*', style({height: '*', visibility: 'visible'})),
      transition('void <=> *', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
@Example('pbl-complex-demo1-example', { title: 'Complex Demo1' })
export class ComplexDemo1Example {
  columns = columnFactory()
    .default({ width: '100px', reorder: true, resize: true})
    .table(
      { header: { type: 'sticky' } },
      { prop: 'drag_and_drop_handle', type: 'drag_and_drop_handle', minWidth: 48, width: '', maxWidth: 48, wontBudge: true },
      { prop: 'selection',  minWidth: 48, width: '', maxWidth: 48, wontBudge: true },
      { prop: 'id', pIndex: true, sort: true, width: '40px', wontBudge: true },
      { prop: 'name', sort: true },
      { prop: 'email', minWidth: 250, width: '150px' },
      { prop: 'country', headerType: 'country', type: { name: 'countryNameDynamic', data: COUNTRY_GETTER }, width: '150px' },
      { prop: 'language', headerType: 'language', width: '125px' },
      { prop: 'lead', type: 'visualBool', width: '24px' },
      { prop: 'rate', type: { name: 'currencyFn', data: COUNTRY_GETTER }, sort: true },
      { prop: 'balance', sort: true },
      { prop: 'gender', width: '50px' },
      { prop: 'birthdate', type: 'date' },
      { prop: 'bio' },

const COLUMNS = () => columnFactory()
  .default({minWidth: 100})
  .table(
    { prop: 'detailRowHandle', label: ' ', type: 'detailRowHandle', minWidth: 48, maxWidth: 48 },
    { prop: 'id', sort: true, width: '40px' },
    { prop: 'name', sort: true },
    { prop: 'gender', width: '50px' },
    { prop: 'birthdate', type: 'date' }
  )
  .build();

import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
import { createDS, columnFactory, PblNgridSortOrder } from '@pebula/ngrid';

import { Person, DemoDataSource } from '@pebula/apps/shared-data';
import { Example } from '@pebula/apps/shared';

const numericFilter = (filterValue: number, colValue: number) => filterValue === colValue
const numericRangeFilter = (filterValue: { min: number, max: number }, colValue: number) => colValue > filterValue.min && colValue < filterValue.max

const COLUMNS = columnFactory()
  .default({minWidth: 100})
  .table(
    { prop: 'id', width: '40px' },
    { prop: 'name' },
    { prop: 'gender', width: '50px' },
    { prop: 'balance', width: '200px', filter: numericRangeFilter },
  )
  .build();


@Component({
  selector: 'pbl-column-filter-example',
  templateUrl: './column-filter.component.html',
  styleUrls: ['./column-filter.component.scss'],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,

{
            prop: 'indicator',
            label: '',
            width: '40px'
        },
        {
            prop: 'menu',
            label: '',
            width: '40px'
        }
    ];

    /**
     * Create the column set
     */
    public columnSet = columnFactory()
        .table(...this.tableColumnDefinition)
        .build();

    private folderSubscription: Subscription;
    private directorySubscription: Subscription;
    public directory: ViewMediafile | null;
    public directoryChain: ViewMediafile[];

    private directoryObservable: Observable = new Observable();

    /**
     * Constructs the component
     *
     * @param titleService sets the browser title
     * @param translate translation for the parent
     * @param matSnackBar showing errors and sucsess messages

import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
import { createDS, columnFactory } from '@pebula/ngrid';

import { Person, DemoDataSource } from '@pebula/apps/shared-data';
import { Example } from '@pebula/apps/shared';

@Component({
  selector: 'pbl-context-menu-example',
  templateUrl: './context-menu.component.html',
  styleUrls: ['./context-menu.component.scss'],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
@Example('pbl-context-menu-example', { title: 'Context Menu: Excel Style Header' })
export class ContextMenuExample {
  columns = columnFactory()
    .default({minWidth: 100})
    .table(
      { prop: 'id', sort: true, width: '40px' },
      { prop: 'name', sort: true },
      { prop: 'gender', width: '50px' },
      { prop: 'birthdate', type: 'date' },
      { prop: 'bio' },
      { prop: 'email', minWidth: 250, width: '250px' },
      { prop: 'language', headerType: 'language' },
    )
    .build();

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

  constructor(private datasource: DemoDataSource) { }
}

import { createDS, columnFactory,  } from '@pebula/ngrid';
import { PblNgridCellEvent } from '@pebula/ngrid/target-events';

import { Person, DemoDataSource } from '@pebula/apps/shared-data';
import { Example } from '@pebula/apps/shared';

@Component({
  selector: 'pbl-custom-setup-example',
  templateUrl: './custom-setup.component.html',
  styleUrls: ['./custom-setup.component.scss'],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
@Example('pbl-custom-setup-example', { title: 'Custom Setup' })
export class CustomSetupExample {
  columns = columnFactory()
    .default({minWidth: 100})
    .table(
      { prop: 'id', sort: true, width: '40px' },
      { prop: 'name', sort: true },
      { prop: 'gender', width: '50px' },
      { prop: 'birthdate', type: 'date' },
      { prop: 'bio' },

    )
    .build();

  ds = createDS().onTrigger( () => this.datasource.getPeople(0, 15) ).create();

  constructor(private datasource: DemoDataSource) { }

  getTooltipMessage(event: PblNgridCellEvent): string {