Add custom cell view component

demo/src/app/pages/demo/components/advanced-example-custom-editor.component.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { CustomEditorComponent } from './custom-editor.component';
+import { CustomRenderComponent } from './custom-render.component';
 
 @Component({
   selector: 'advanced-example-custom-editor',
@@ -42,7 +43,9 @@ export class AdvancedExamplesCustomEditorComponent {
         title: 'ID'
       },
       name: {
-        title: 'Full Name'
+        title: 'Full Name',
+        type: 'custom',
+        renderComponent: CustomRenderComponent
       },
       username: {
         title: 'User Name',

demo/src/app/pages/demo/components/advanced-example-filters.component.ts

@@ -0,0 +1,107 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'advanced-example-filters',
+  template: `
+    <ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>
+  `
+})
+export class AdvancedExampleFiltersComponent {
+
+  data = [
+    {
+      id: 4,
+      name: 'Patricia Lebsack',
+      email: 'Julianne.OConner@kory.org',
+      passed: 'Yes'
+    },
+    {
+      id: 5,
+      name: 'Chelsey Dietrich',
+      email: 'Lucio_Hettinger@annie.ca',
+      passed: 'No'
+    },
+    {
+      id: 6,
+      name: 'Mrs. Dennis Schulist',
+      email: 'Karley_Dach@jasper.info',
+      passed: 'Yes'
+    },
+    {
+      id: 7,
+      name: 'Kurtis Weissnat',
+      email: 'Telly.Hoeger@billy.biz',
+      passed: 'No'
+    },
+    {
+      id: 8,
+      name: 'Nicholas Runolfsdottir V',
+      email: 'Sherwood@rosamond.me',
+      passed: 'Yes'
+    },
+    {
+      id: 9,
+      name: 'Glenna Reichert',
+      email: 'Chaim_McDermott@dana.io',
+      passed: 'No'
+    },
+    {
+      id: 10,
+      name: 'Clementina DuBuque',
+      email: 'Rey.Padberg@karina.biz',
+      passed: 'No'
+    },
+    {
+      id: 11,
+      name: 'Nicholas DuBuque',
+      email: 'Rey.Padberg@rosamond.biz',
+      passed: 'Yes'
+    }
+  ];
+
+    settings = {
+    columns: {
+      id: {
+        title: 'ID'
+      },
+      name: {
+        title: 'Full Name',
+        filter: {
+          type: 'list',
+          config: {
+            selectText: 'Select...',
+            list: [
+              { value: 'Glenna Reichert', title: 'Glenna Reichert' },
+              { value: 'Kurtis Weissnat', title: 'Kurtis Weissnat' },
+              { value: 'Chelsey Dietrich', title: 'Chelsey Dietrich' }
+            ]
+          }
+        }
+      },
+      email: {
+        title: 'Email',
+        filter: {
+          type: 'completer',
+          config: {
+            completer: {
+              data: this.data,
+              searchFields: 'email',
+              titleField: 'email'
+            }
+          }
+        }
+      },
+      passed: {
+        title: 'Passed',
+        filter: {
+          type: 'checkbox',
+          config: {
+            true: 'Yes',
+            false: 'No',
+            resetText: 'clear'
+          }
+        }
+      }
+    }
+  };
+}

demo/src/app/pages/demo/components/custom-render.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+
+import { ViewCell } from '../../../../../../ng2-smart-table';
+
+@Component({
+  template: `
+    {{renderValue}}
+    `
+})
+export class CustomRenderComponent implements ViewCell {
+
+  renderValue: string;
+  @Input() value: string | number;
+
+  ngOnInit() {
+    this.renderValue = this.value.toString().toUpperCase();
+  }
+}

demo/src/app/pages/demo/demo.html

@@ -28,8 +28,9 @@ <h4>Navigation</h4>
           <li><a href="#confirm">Confirm Action Example</a></li>
           <li><a href="#server">Load From Server Example</a></li>
           <li><a href="#types">Completer and other built-in editors</a></li>
-          <li><a href="#custom-editor">Using a custom editor</a></li>
+          <li><a href="#custom-editor-renderer">Using a custom editor or renderer</a></li>
           <li><a href="#multiselect">Multi select</a></li>
+          <li><a href="#filters">Completer and other built-in filters</a></li>
         </ul>
       </li>
     </ul>
@@ -201,22 +202,35 @@ <h3><a id="types" class="anchor" href="#types" aria-hidden="true"><span aria-hid
     <a class="source" href="https://github.com/akveo/ng2-smart-table/blob/master/demo/src/app/pages/demo/components/advanced-example-types.component.ts" target="_blank">Demo Source</a>
     <advanced-example-types></advanced-example-types>
   </div>
-  <h3><a id="custom-editor" class="anchor" href="#custom-editor" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Custom editor column type</h3>
-  <p>An example on how to use a custom editor during cell edit mode:</p>
+  <h3><a id="custom-editor-renderer" class="anchor" href="#custom-editor-renderer" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Custom editor/renderer column type</h3>
+  <p>An example on how to use a custom cell editor and/or custom cell renderer:</p>
   <div class="with-source">
     <a class="source" href="https://github.com/akveo/ng2-smart-table/blob/master/demo/src/app/pages/demo/components/advanced-example-custom-editor.component.ts" target="_blank">Demo Source</a>
     <advanced-example-custom-editor></advanced-example-custom-editor>
   </div>
-  <p>When implementing a custom editor remember to add it to the <code>entryComponents</code> and to the <code>declarations</code> part of your module</p>
+  <p>When implementing a custom editor or renderer remember to add it to the <code>entryComponents</code> and to the <code>declarations</code> part of your module</p>
   <pre>
     <code class="typescript">{{ snippets.customEditorModule }}</code>
   </pre>
-  <p>To inherit the methods needed to interact with the table you can either extend the component with the <code>DefaultEditor</code> class or implement the <code>Editor</code> interface and reproduce the same methods on your component.</p>
+  <p>
+    <b>For the custom cell editor:</b><br>
+    To inherit the methods needed to interact with the table you can either extend the component with the <code>DefaultEditor</code> class or implement the <code>Editor</code> interface and reproduce the same methods on your component.<br>
+    <b>For the custom cell renderer:</b><br>
+    In this example the custom component is applying a <code>.toUpperCase()</code> to one of the columns. You can implement the ViewCell interface to make sure you are setting up your component correctly.
+  </p>
   <h3><a id="multiselect" class="anchor" href="#multiselect" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Multi select</h3>
   <p>An example on how to use multi select mode:</p>
   <div class="with-source">
     <a class="source" href="https://github.com/akveo/ng2-smart-table/blob/master/demo/src/app/pages/demo/components/basic-example-multi-select.component.ts" target="_blank">Demo Source</a>
     <basic-example-multi-select></basic-example-multi-select>
   </div>
+  <h3><a id="filters" class="anchor" href="#filters" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Checkbox, Select and Completer filter types</h3>
+  <p>
+    An example on how to use the built-in column filter types:
+  </p>
+  <div class="with-source">
+    <a class="source" href="https://github.com/akveo/ng2-smart-table/blob/master/demo/src/app/pages/demo/components/advanced-example-filters.component.ts" target="_blank">Demo Source</a>
+    <advanced-example-filters></advanced-example-filters>
+  </div>
   <p>Full component documentation you can find <a [routerLink]="['/documentation']">here</a>.</p>
 </section>

demo/src/app/pages/demo/snippets/custom-editor-module.md

@@ -2,9 +2,10 @@
   imports: [
     // ...
   ],
-  entryComponents: [CustomEditorComponent],
+  entryComponents: [CustomEditorComponent, CustomRenderComponent],
   declarations: [
     // ...
     CustomEditorComponent,
+    CustomRenderComponent,
   ],
 })

demo/src/app/pages/documentation/documentation.html

@@ -97,11 +97,22 @@ <h3><a id="configuration" class="anchor" href="#configuration" aria-hidden="true
     </tr>
     <tr>
       <td>type</td>
-      <td><span class="highlight">'text'</span>|<span class="highlight">'html'</span></td>
+      <td><span class="highlight">'text'</span>|<span class="highlight">'html'</span>|<span class="highlight">'custom'</span></td>
       <td>'text'</td>
       <td>
-        Column data type. NOTE: currently not fully supported.<br>
-        If type is <span class="highlight">html</span> then cell value will be inserted as html.
+        If type is <span class="highlight">text</span> then cell value will be inserted as text.<br>
+        If type is <span class="highlight">html</span> then cell value will be inserted as html.<br>
+        If type is <span class="highlight">custom</span> the <code>renderComponent</code> property must be defined.
+      </td>
+    </tr>
+    <tr>
+      <td>renderComponent</td>
+      <td><span class="highlight">any</span></td>
+      <td>null</td>
+      <td>
+        Custom component that will be responsible for rendering the cell content while in view mode.<br>
+        Type must be <span class="highlight">custom</span> in order for this to work.<br>
+        You can see an <a class="source" href="https://github.com/akveo/ng2-smart-table/blob/master/demo/src/app/pages/demo/components/advanced-example-custom-editor.component.ts">example here</a>
       </td>
     </tr>
     <tr>
@@ -199,6 +210,18 @@ <h3><a id="configuration" class="anchor" href="#configuration" aria-hidden="true
         Name of the field to use as description for the list item
       </td>
     </tr>
+    <tr>
+      <td>filter</td>
+      <td><span class="highlight">Object</span></td>
+      <td>n/a</td>
+      <td>
+        Column filter attributes settings. This object accepts the same properties as the <code>editor</code> object.<br>
+        The available types are: <code>checkbox</code>, <code>select</code>, <code>completer</code>.<br>
+        The <code>checkbox</code> type accepts one more optional property compared to the <code>editor</code> version: <span class="highlight">resetText: string</span>.
+        It defines the text of the button to reset the checkbox selection.<br>
+        <a class="source" href="https://github.com/akveo/ng2-smart-table/blob/master/demo/src/app/pages/demo/components/advanced-example-filters.component.ts">Click here to see an example</a> on how to configure it.
+      </td>
+    </tr>
     <tr>
       <td>valuePrepareFunction</td>
       <td><span class="highlight">Function</span></td>

demo/src/app/pages/pages.module.ts

@@ -20,7 +20,9 @@ import { AdvancedExampleConfirmComponent } from './demo/components/advanced-exam
 import { AdvancedExampleServerComponent } from './demo/components/advanced-example-server.component';
 import { AdvancedExamplesTypesComponent } from './demo/components/advanced-example-types.component';
 import { AdvancedExamplesCustomEditorComponent } from './demo/components/advanced-example-custom-editor.component';
+import { AdvancedExampleFiltersComponent } from './demo/components/advanced-example-filters.component';
 import { CustomEditorComponent } from './demo/components/custom-editor.component';
+import { CustomRenderComponent } from './demo/components/custom-render.component';
 
 @NgModule({
   imports: [
@@ -31,7 +33,10 @@ import { CustomEditorComponent } from './demo/components/custom-editor.component
     Ng2SmartTableModule,
     routing,
   ],
-  entryComponents: [CustomEditorComponent],
+  entryComponents: [
+    CustomEditorComponent,
+    CustomRenderComponent,
+  ],
   declarations: [
     DemoComponent,
     DocumentationComponent,
@@ -45,8 +50,10 @@ import { CustomEditorComponent } from './demo/components/custom-editor.component
     AdvancedExampleServerComponent,
     AdvancedExamplesTypesComponent,
     AdvancedExamplesCustomEditorComponent,
+    AdvancedExampleFiltersComponent,
     ScrollPositionDirective,
     CustomEditorComponent,
+    CustomRenderComponent,
   ],
 })
 export class PagesModule {

ng2-smart-table.ts

@@ -4,3 +4,4 @@ export * from './src/ng2-smart-table/lib';
 export * from './src/ng2-smart-table.module';
 export { Cell } from './src/ng2-smart-table/lib/data-set/cell';
 export { DefaultEditor, Editor } from './src/ng2-smart-table/components/cell/cell-editors/default-editor';
+export { ViewCell } from './src/ng2-smart-table/components/cell/cell-view-mode';

src/ng2-smart-table.module.ts

@@ -1,11 +1,13 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { Ng2CompleterModule } from 'ng2-completer';
 
 import { NG2_SMART_TABLE_DIRECTIVES } from './ng2-smart-table.directives';
 import { CellComponent } from './ng2-smart-table/components/cell/cell.component';
-import { ViewCellComponent } from './ng2-smart-table/components/cell/cell-view-mode/view-cell.component';
+import {
+  ViewCellComponent,
+  CustomViewComponent } from './ng2-smart-table/components/cell/cell-view-mode';
 import {
   EditCellComponent,
   DefaultEditComponent,
@@ -17,6 +19,11 @@ import {
   TextareaEditorComponent,
   CheckboxEditorComponent } from './ng2-smart-table/components/cell/cell-editors';
 import { FilterComponent } from './ng2-smart-table/components/filter/filter.component';
+import {
+  InputFilterComponent,
+  SelectFilterComponent,
+  CheckboxFilterComponent,
+  CompleterFilterComponent } from './ng2-smart-table/components/filter/filter-types';
 import { PagerComponent } from './ng2-smart-table/components/pager/pager.component';
 import { NG2_SMART_TABLE_THEAD_DIRECTIVES } from './ng2-smart-table/components/thead/thead.directives';
 import { NG2_SMART_TABLE_TBODY_DIRECTIVES } from './ng2-smart-table/components/tbody/tbody.directives';
@@ -25,20 +32,26 @@ import { NG2_SMART_TABLE_TBODY_DIRECTIVES } from './ng2-smart-table/components/t
   imports: [
     CommonModule,
     Ng2CompleterModule,
-    FormsModule
+    FormsModule,
+    ReactiveFormsModule
   ],
   declarations: [
     CellComponent,
     ViewCellComponent,
     DefaultEditComponent,
     CustomEditComponent,
+    CustomViewComponent,
     EditCellComponent,
     CompleterEditorComponent,
     InputEditorComponent,
     SelectEditorComponent,
     TextareaEditorComponent,
     CheckboxEditorComponent,
     FilterComponent,
+    InputFilterComponent,
+    SelectFilterComponent,
+    CheckboxFilterComponent,
+    CompleterFilterComponent,
     PagerComponent,
     ...NG2_SMART_TABLE_THEAD_DIRECTIVES,
     ...NG2_SMART_TABLE_TBODY_DIRECTIVES,

src/ng2-smart-table/components/cell/cell-view-mode/custom-view.component.ts

@@ -0,0 +1,42 @@
+import {
+  Component,
+  Input,
+  ComponentFactoryResolver,
+  ViewChild,
+  ViewContainerRef,
+  OnInit,
+  OnDestroy } from '@angular/core';
+
+import { Cell } from '../../../lib/data-set/cell';
+
+@Component({
+  selector: 'custom-view-component',
+  template: `
+    <template #dynamicTarget></template>
+  `,
+})
+export class CustomViewComponent implements OnInit {
+
+  customComponent: any;
+  @Input() cell: Cell;
+  @ViewChild('dynamicTarget', {read: ViewContainerRef}) dynamicTarget: any;
+
+  constructor(private resolver: ComponentFactoryResolver) {
+  }
+
+  ngOnInit(): void {
+    if (this.cell && !this.customComponent){
+      let componentFactory = this.resolver.resolveComponentFactory(this.cell.getColumn().renderComponent);
+      this.customComponent = this.dynamicTarget.createComponent(componentFactory);
+
+      // set @Inputs and @Outputs of custom component
+      this.customComponent.instance.value = this.cell.getValue();
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.customComponent) {
+      this.customComponent.destroy();
+    }
+  }
+}

src/ng2-smart-table/components/cell/cell-view-mode/index.ts

@@ -0,0 +1,3 @@
+export * from './custom-view.component';
+export * from './view-cell.component';
+export * from './view-cell';