feat(examples): add an example with a custom button view

stacyakveo · Mar 30, 2017 · 8df40c3 · 8df40c3
1 parent f901e29
commit 8df40c3
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 0 deletions.
diff --git a/src/app/pages/examples/examples.module.ts b/src/app/pages/examples/examples.module.ts
@@ -21,6 +21,7 @@ import { FilterExamplesComponent } from './filter/filter-examples.component';
 import { ServerExamplesComponent } from './server/server-examples.component';
 import { CustomViewEditExamplesComponent } from './custom-edit-view/custom-edit-view-examples.component';
 import { VariousExamplesComponent } from './various/various-examples.component';
+import { BasicExampleButtonViewComponent, ButtonViewComponent } from './various/basic-example-button-view.component';
 
 const EXAMPLES_COMPONENTS = [
   AdvancedExampleFiltersComponent,
@@ -37,6 +38,8 @@ const EXAMPLES_COMPONENTS = [
   ServerExamplesComponent,
   CustomViewEditExamplesComponent,
   VariousExamplesComponent,
+  BasicExampleButtonViewComponent,
+  ButtonViewComponent,
 ];
 
 @NgModule({
@@ -51,6 +54,7 @@ const EXAMPLES_COMPONENTS = [
   entryComponents: [
     CustomEditorComponent,
     CustomRenderComponent,
+    ButtonViewComponent,
   ],
   declarations: [
     ExamplesComponent,

diff --git a/src/app/pages/examples/various/basic-example-button-view.component.ts b/src/app/pages/examples/various/basic-example-button-view.component.ts
@@ -0,0 +1,100 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+import { ViewCell } from '../../../../ng2-smart-table';
+
+@Component({
+  selector: 'button-view',
+  template: `
+    <button (click)="showAlert()">{{ renderValue }}</button>
+  `,
+})
+export class ButtonViewComponent implements ViewCell, OnInit {
+  renderValue: string;
+
+  @Input() value: string | number;
+
+  constructor() { }
+
+  ngOnInit() {
+    this.renderValue = this.value.toString().toUpperCase();
+  }
+
+  showAlert() {
+    alert(this.renderValue);
+  }
+}
+
+@Component({
+  selector: 'basic-example-button-view',
+  template: `
+    <ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>
+  `,
+})
+export class BasicExampleButtonViewComponent implements OnInit {
+
+  settings = {
+    columns: {
+      id: {
+        title: 'ID',
+      },
+      name: {
+        title: 'Full Name',
+      },
+      username: {
+        title: 'User Name',
+      },
+      email: {
+        title: 'Email',
+      },
+      button: {
+        title: 'Button',
+        type: 'custom',
+        renderComponent: ButtonViewComponent,
+      },
+    },
+  };
+
+  data = [
+    {
+      id: 1,
+      name: 'Leanne Graham',
+      username: 'Bret',
+      email: '[email protected]',
+      button: 'Button #1',
+    },
+    {
+      id: 2,
+      name: 'Ervin Howell',
+      username: 'Antonette',
+      email: '[email protected]',
+      button: 'Button #2',
+    },
+    {
+      id: 3,
+      name: 'Clementine Bauch',
+      username: 'Samantha',
+      email: '[email protected]',
+      button: 'Button #3',
+    },
+    {
+      id: 4,
+      name: 'Patricia Lebsack',
+      username: 'Karianne',
+      email: '[email protected]',
+      button: 'Button #4',
+    },
+    {
+      id: 5,
+      name: 'Chelsey Dietrich',
+      username: 'Kamren',
+      email: '[email protected]',
+      button: 'Button #5',
+    },
+  ];
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/pages/examples/various/various-examples.component.html b/src/app/pages/examples/various/various-examples.component.html
@@ -15,3 +15,15 @@ <h3><a id="multiselect" class="anchor" href="#multiselect" aria-hidden="true"><s
   <a class="source" href="https://github.com/akveo/ng2-smart-table/blob/master/src/app/pages/examples/various/basic-example-multi-select.component.ts" target="_blank">Demo Source</a>
   <basic-example-multi-select></basic-example-multi-select>
 </div>
+
+<h3>
+  <a id="buttonview" class="anchor" href="#buttonview" aria-hidden="true">
+  <span aria-hidden="true" class="octicon octicon-link"></span>
+  </a>Button View
+</h3>
+<p>An example on how to use custom button view:</p>
+<div class="with-source">
+  <a class="source" href="https://github.com/akveo/ng2-smart-table/blob/master/src/app/pages/examples/various/basic-example-button-view.component.ts"
+    target="_blank">Demo Source</a>
+  <basic-example-button-view></basic-example-button-view>
+</div>