context menu example

Author: borsch

docs-src/package-lock.json

@@ -19,7 +19,7 @@
     "@angular/platform-browser": "~9.1.3",
     "@angular/platform-browser-dynamic": "~9.1.3",
     "@angular/router": "~9.1.3",
-    "angular-datatable-advanced": "0.1.7",
+    "angular-datatable-advanced": "0.3.0",
     "angularx-flatpickr": "^6.4.0",
     "flatpickr": "^4.6.6",
     "rxjs": "~6.5.4",

docs-src/package.json

@@ -186,6 +186,57 @@ <h3 class="block-title">Date & Date-Time picker filter example</h3>
       altInput: true
     &#125;
   &#125;
+];</code></pre>
+                  </div>
+                </div>
+              </div>
+
+              <div id="cog-menu-example" class="section-block">
+                <h3 class="block-title">Context menu example</h3>
+                <div>
+                  Table with example of:
+                  <ul>
+                    <li>Plain text column rendered by field name(first column)</li>
+                    <li>Column rendered with nested field(second column)</li>
+                    <li>Column rendered with custom cellRender function(third column)</li>
+                  </ul>
+                </div>
+                <div>
+                  <ada-table
+                    [pageSize]="3"
+                    [pageSizeOptions]="[3, 5]"
+                    [columns]="minExampleColumns"
+                    [rowsLoader]="rowsLoader"
+                    [cogMenu]="cogMenu"
+                  ></ada-table>
+                </div>
+                <div>
+                  <a href="#" data-target="cog-menu-code-example" class="spoiler-trigger"><span>Code example</span></a>
+                  <div id="cog-menu-code-example" class="spoiler-block">
+                    <pre><code class="language-javascript">cogMenu: CogMenu[] = [
+  &#123;
+    name: 'Button 1',
+    onClick: item => alert(`Click on item with JSON: $&#123;JSON.stringify(item)&#125;`)
+  &#125;,
+  &#123;
+    name: 'Button for odd rows',
+    renderCheck: item => parseInt(item.plainTextFilter.charAt(item.plainTextFilter.length - 1), 10) % 2 === 1,
+    onClick: item => alert('Click odd row: ' + item.plainTextFilter)
+  &#125;,
+  &#123;
+    name: 'Button for pair rows',
+    renderCheck: item => parseInt(item.plainTextFilter.charAt(item.plainTextFilter.length - 1), 10) % 2 === 0,
+    onClick: item => alert('Click pair row: ' + item.plainTextFilter)
+  &#125;,
+  &#123;
+    name: 'Set deep field',
+    onClick: item => item.render = &#123;
+      deep: &#123;
+        field: item.plainTextFilter + ' updated'
+      &#125;
+    &#125;
+   &#125;
+  ];
 ];</code></pre>
                   </div>
                 </div>
@@ -320,6 +371,7 @@ <h6>Render table</h6>
                 <a class="nav-link scrollto" href="#simple-example">Simple example</a>
                 <a class="nav-link scrollto" href="#set-example">Set filter example</a>
                 <a class="nav-link scrollto" href="#date-time-example">Date & Date-Time picker example</a>
+                <a class="nav-link scrollto" href="#cog-menu-example">Context menu example</a>
               </nav>
               <a class="nav-link scrollto" href="#installation-section">Installation</a>
               <a class="nav-link scrollto" href="#code-section">Setup</a>

docs-src/src/app/app.component.html

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import {Column, RowsLoader, LoadResult, RequestParams} from 'angular-datatable-advanced';
+import {Column, RowsLoader, LoadResult, RequestParams, CogMenu} from 'angular-datatable-advanced';
 import {Observable, of} from 'rxjs';
 import {FilterIn} from 'angular-datatable-advanced/lib/model/filter-in';
 
@@ -78,6 +78,31 @@ export class AppComponent {
     }
   ];
 
+  cogMenu: CogMenu[] = [
+    {
+      name: 'Button 1',
+      onClick: item => alert(`Click on item with JSON: ${JSON.stringify(item)}`)
+    },
+    {
+      name: 'Button for odd rows',
+      renderCheck: item => parseInt(item.plainTextFilter.charAt(item.plainTextFilter.length - 1), 10) % 2 === 1,
+      onClick: item => alert('Click odd row: ' + item.plainTextFilter)
+    },
+    {
+      name: 'Button for pair rows',
+      renderCheck: item => parseInt(item.plainTextFilter.charAt(item.plainTextFilter.length - 1), 10) % 2 === 0,
+      onClick: item => alert('Click pair row: ' + item.plainTextFilter)
+    },
+    {
+      name: 'Set deep field',
+      onClick: item => item.render = {
+        deep: {
+          field: item.plainTextFilter + ' updated'
+        }
+      }
+    }
+  ];
+
   rowsLoader: RowsLoader = (filters: RequestParams): Observable<LoadResult> => {
     console.log('Filters: ', JSON.stringify(filters, null, 4));
 

docs-src/src/app/app.component.ts

@@ -21,3 +21,6 @@
   display: none;
 }
 
+.mat-column-cogMenuColumn {
+  flex: 0 0 45px !important;
+}