Skip to content
This repository was archived by the owner on Oct 18, 2018. It is now read-only.

Angular framework: use renderer #67

Open
rocketberg wants to merge 1 commit into
base: 5.0.0
Choose a base branch
from
Open

Angular framework: use renderer #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions tutorials/tutorials.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -272,6 +272,9 @@
},
"wrapper-for-angular-examples": {
"title": "Examples"
},
"wrapper-for-angular-use-renderer": {
"title": "Use renderer"
}
}
},
Expand Down
177 changes: 177 additions & 0 deletions tutorials/wrapper-for-angular-use-renderer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,177 @@
<div class="static-content">
<div class="example-container clearfix">

<p>Table cells can be set up with renderer method. Renderers helps you customize data in cells</p>

<p>There is simple renderer method which get data from current row, and customizing cell name</p>

<div>
<app-root></app-root>
</div>
<script type="text/x-hot-html" data-jsfiddle="example1">
<app-root></app-root>
</script>

<div class="codeLayout">
<div class="buttons">
<button class="jsFiddleLink" data-runfiddle="example1">
<i class="fa fa-jsfiddle"></i>
Edit
</button>
</div>
<script type="text/typescript" data-jsfiddle="example1" data-jsfiddle-panel_js="4">
// app.component.ts
import { Component } from '@angular/core';
import * as Handsontable from 'handsontable';

@Component({
selector: 'app-root',
template: `
<hot-table [data]="dataset" [settings]="settings"></hot-table>
`
})
class AppComponent {
dataset: any[] = [
{id: 1, name: 'Ted Right', address: 'Wall Street', gender: 'male'},
{id: 2, name: 'Frank Honest', address: 'Pennsylvania Avenue', gender: 'male'},
{id: 3, name: 'Joan Well', address: 'Broadway', gender: 'female'},
{id: 4, name: 'Gail Polite', address: 'Bourbon Street', gender: 'male'},
{id: 5, name: 'Michael Fair', address: 'Lombard Street', gender: 'male'},
{id: 6, name: 'Mia Fair', address: 'Rodeo Drive', gender: 'female'},
{id: 7, name: 'Cora Fair', address: 'Sunset Boulevard', gender: 'female'},
{id: 8, name: 'Jack Right', address: 'Michigan Avenue', gender: 'male'},
];

settings = {
columns: [
{
title: 'ID',
data: 'id'
},
{
title: 'User name',
data: 'name',
renderer: (instance, td, row, column, prop, value) => {
// Current item from dataset array
const person = instance.getSourceDataAtRow(row);

if (person.gender === 'male') {
td.innerHTML = `<span class="color-warn">Mr.</span> ${person.name}`;
} else {
td.innerText = `Mrs. ${person.name}`;
}
}
},
{
title: 'Address',
data: 'address'
}
]
}
}

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HotTableModule } from '@handsontable/angular';

@NgModule({
imports: [ BrowserModule, HotTableModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
class AppModule { }

// bootstrap
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

platformBrowserDynamic().bootstrapModule(AppModule).catch(err => { console.error(err) });
</script>

<p>If table set up with <code>hot-column</code> there is another way for create renderer as a method.</p>

<p>The result will be the same as above.</p>
</div>

<div class="codeLayout">
<div class="buttons">
<button class="jsFiddleLink" data-runfiddle="example2">
<i class="fa fa-jsfiddle"></i>
Edit
</button>
</div>
<script type="text/typescript" data-jsfiddle="example2" data-jsfiddle-panel_js="4">
// app.component.ts
import { Component } from '@angular/core';
import * as Handsontable from 'handsontable';

@Component({
selector: 'app-root',
template: `
<hot-table [data]="dataset">
<hot-column data="id" title="ID"></hot-column>
<hot-column data="name" title="User name" [renderer]="customRenderer"></hot-column>
<hot-column data="address" title="Address"></hot-column>
</hot-table>
`
})
class AppComponent {
dataset: any[] = [
{id: 1, name: 'Ted Right', address: 'Wall Street', gender: 'male'},
{id: 2, name: 'Frank Honest', address: 'Pennsylvania Avenue', gender: 'male'},
{id: 3, name: 'Joan Well', address: 'Broadway', gender: 'female'},
{id: 4, name: 'Gail Polite', address: 'Bourbon Street', gender: 'male'},
{id: 5, name: 'Michael Fair', address: 'Lombard Street', gender: 'male'},
{id: 6, name: 'Mia Fair', address: 'Rodeo Drive', gender: 'female'},
{id: 7, name: 'Cora Fair', address: 'Sunset Boulevard', gender: 'female'},
{id: 8, name: 'Jack Right', address: 'Michigan Avenue', gender: 'male'},
];
// Create class method, and putted it as a binding to <hot-column>
customRenderer(instance, td, row, column, prop, value) {
// Current item from dataset array
const person = instance.getSourceDataAtRow(row);

if (person.gender === 'male') {
td.innerHTML = `<span class="color-warn">Mr.</span> ${person.name}`;
} else {
td.innerText = `Mrs. ${person.name}`;
}
}
}

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HotTableModule } from '@handsontable/angular';

@NgModule({
imports: [ BrowserModule, HotTableModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
class AppModule { }

// bootstrap
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

platformBrowserDynamic().bootstrapModule(AppModule).catch(err => { console.error(err) });
</script>
</div>

</div>
<p>
<a href="https://github.com/handsontable/docs/edit/<?js= version ?>/tutorials/wrapper-for-angular-use-renderer.html"
class="edit-doc" target="_blank">Help us improve this page</a>
</p>
</div>
<script data-jsfiddle="common" src="/<?js= env.opts.query.version ?>/scripts/jsfiddle-fixer.js"></script>
<script data-jsfiddle="common" src="https://cdn.jsdelivr.net/npm/rxjs@6.1.0/bundles/rxjs.umd.js"></script>
<script data-jsfiddle="common" src="https://cdn.jsdelivr.net/npm/core-js@2.5.6/client/core.min.js"></script>
<script data-jsfiddle="common" src="https://cdn.jsdelivr.net/npm/zone.js@0.8.26/dist/zone.min.js"></script>
<script data-jsfiddle="common" src="https://cdn.jsdelivr.net/npm/@angular/compiler@6.0.0/bundles/compiler.umd.min.js"></script>
<script data-jsfiddle="common" src="https://cdn.jsdelivr.net/npm/@angular/core@6.0.0/bundles/core.umd.min.js"></script>
<script data-jsfiddle="common" src="https://cdn.jsdelivr.net/npm/@angular/common@6.0.0/bundles/common.umd.min.js"></script>
<script data-jsfiddle="common" src="https://cdn.jsdelivr.net/npm/@angular/platform-browser@6.0.0/bundles/platform-browser.umd.min.js"></script>
<script data-jsfiddle="common" src="https://cdn.jsdelivr.net/npm/@angular/platform-browser-dynamic@6.0.0/bundles/platform-browser-dynamic.umd.min.js"></script>
<script data-jsfiddle="common" src="https://cdn.jsdelivr.net/npm/@handsontable/angular@2.0.0/bundles/handsontable-angular.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/2.9.2/typescript.min.js"></script>