Example context menu

      <!-- app.component.html -->
      <ngx-table-builder [source]="data">
        <ngx-context-menu>

          <ngx-context-menu-item contextTitle divider>
            <ngx-menu-content icon="./assets/angular.svg"></ngx-menu-content>
            <ngx-menu-content>My custom context menu title</ngx-menu-content>
          </ngx-context-menu-item>

          <ngx-context-menu-item (onClick)="exportExcel(data)">
            <ngx-menu-content icon="./assets/excel.png"></ngx-menu-content>
            <ngx-menu-content>Export Excel</ngx-menu-content>
          </ngx-context-menu-item>

          <ngx-context-menu-item #item divider
           [disable]="!item.state.key"
           (onClick)="showLine(item.state.key, item.state.item)">
            <ngx-menu-content icon></ngx-menu-content>
            <ngx-menu-content>Show item row</ngx-menu-content>
          </ngx-context-menu-item>

          <ngx-context-menu-item #item
           *ngIf="item.state.key === 'id'"
           (onClick)="copyId(item.state.value)">
            <ngx-menu-content icon></ngx-menu-content>
            <ngx-menu-content>Show item row</ngx-menu-content>
          </ngx-context-menu-item>

        </ngx-context-menu>
      </ngx-table-builder>

My custom context menu title Export Excel Column settings List {{ column.key }} Show item row Show column name Copy in buffer ID Price: {{ item.state.textContent }} Selected items ({{ (table1?.selectionEntries | tableSelectedItems).length }}) {{ value | currency }}

      // app.component.ts
      import { Component } from "@angular/core";
      import { Data } from "./data.interface";

      @Component({
        selector: 'app',
        templateUrl: './app.component.html'
      })
      export class AppComponent {

        public data: Data[] = [ .. ];

        public exportExcel(data: Data[]): void {
            window.alert('export excel - ' + JSON.stringify(data));
        }

        public showLine(key: string, item: Data): void {
            window.alert('key - ' + key + ' item - ' + JSON.stringify(item));
        }

        public copyId(id: string): void {
            window.alert('Copy on buffer - ' + id);
        }

      }

{{ table2.selectionModel.get($any(row).id) ? 'x' : '-' }} Menu {{ table2.selection.selectionModel.size }} Item1 Item2 Item3 Item4 Column list {{ column.key }} Reset table settings Example tree Root A Child A1 Child A2 Child A3 Root B Root C Child C1 Child C2 Child C3

Note : You can also wrap the templates in your component.

      <!-- app.component.html -->
      <ngx-table-builder #table [source]="data" height="500" enable-selection>
        <ngx-options [resizable]="true" [sortable]="true"></ngx-options>

        <ngx-context-menu>
           <my-menu [table]="table"></my-menu>
        </ngx-context-menu>

        <ngx-column key="action" custom-key sticky [resizable]="false" [width]="50">
            <ng-template ngx-th></ng-template>
            <ng-template ngx-td row let-row>
                {{ table.selectionModel.get($any(row).id) ? 'x' : '-' }}
            </ng-template>
        </ngx-column>

        <ngx-column *ngFor="let key of table.modelColumnKeys" [key]="key"></ngx-column>
      </ngx-table-builder>

      // my-menu.component.ts
      import { TableBuilderComponent } from "@angular-ru/cdk/virtual-table";
      import { Component } from "@angular/core";

      @Component({
        selector: 'my-menu',
        templateUrl: './my-menu.component.html'
      })
      export class MyMenuComponent {
        @Input() public table: TableBuilderComponent;
      }

Note : You can also wrap the templates in your component.

      <!-- my-menu.component.html -->

      <!-- first item -->
      <ngx-context-menu-item contextTitle divider>
          <ngx-menu-content>Menu</ngx-menu-content>
      </ngx-context-menu-item>

      <!-- second item -->
      <ngx-context-menu-item>
          <ngx-menu-content>Column list</ngx-menu-content>

          <ngx-context-menu-item
              *ngFor="let column of table.columnSchema"
              (onClick)="table.toggleColumnVisibility(column.key); $events.preventDefault()"
              [visible]="column.isModel"
          >
              <ngx-menu-content no-margin>{{ column.key }}</ngx-menu-content>
              <ngx-menu-content no-margin align-center>
                  <mat-checkbox
                      color="primary"
                      [checked]="column.visible"
                  ></mat-checkbox>
              </ngx-menu-content>
          </ngx-context-menu-item>
      </ngx-context-menu-item>

      <!-- third item -->
      <ngx-context-menu-item (onClick)="table.resetSchema()" divider>
          <ngx-menu-content>Reset table settings</ngx-menu-content>
      </ngx-context-menu-item>

      <!-- fourth item -->
      <ngx-context-menu-item>

          <ngx-menu-content>Example tree</ngx-menu-content>

          <ngx-context-menu-item>
              <ngx-menu-content>Root A</ngx-menu-content>
              <ngx-context-menu-item>
                  <ngx-menu-content>Child A1</ngx-menu-content>
              </ngx-context-menu-item>
              <ngx-context-menu-item>
                  <ngx-menu-content>Child A2</ngx-menu-content>
              </ngx-context-menu-item>
              <ngx-context-menu-item>
                  <ngx-menu-content>Child A3</ngx-menu-content>
              </ngx-context-menu-item>
          </ngx-context-menu-item>

          <ngx-context-menu-item>
              <ngx-menu-content>Root B</ngx-menu-content>
          </ngx-context-menu-item>

          <ngx-context-menu-item>
              <ngx-menu-content>Root C</ngx-menu-content>
              <ngx-context-menu-item>
                  <ngx-menu-content> Child C1</ngx-menu-content>
              </ngx-context-menu-item>
              <ngx-context-menu-item>
                  <ngx-menu-content>Child C2</ngx-menu-content>
              </ngx-context-menu-item>
              <ngx-context-menu-item>
                  <ngx-menu-content>Child C3</ngx-menu-content>
              </ngx-context-menu-item>
          </ngx-context-menu-item>

      </ngx-context-menu-item>