Customize cell content, fixes #12

src/Cell.ts

@@ -2,13 +2,13 @@ import WidgetBase from '@dojo/widget-core/WidgetBase';
 import { RegistryMixin, RegistryMixinProperties }  from '@dojo/widget-core/mixins/Registry';
 import { v } from '@dojo/widget-core/d';
 import { DNode } from '@dojo/widget-core/interfaces';
-import { HasValue, HasColumn, HasItem } from './interfaces';
+import { HasColumn, HasContent, HasItem, HasValue } from './interfaces';
 import { theme, ThemeableMixin, ThemeableProperties } from '@dojo/widget-core/mixins/Themeable';
 
 import * as cellCss from './styles/shared/cell.m.css';
 import * as css from './styles/cell.m.css';
 
-export interface CellProperties extends HasColumn, HasItem, HasValue, RegistryMixinProperties, ThemeableProperties {
+export interface CellProperties extends HasColumn, HasContent, HasItem, HasValue, RegistryMixinProperties, ThemeableProperties {
 	key: string;
 }
 
@@ -19,14 +19,14 @@ export const CellBase = ThemeableMixin(RegistryMixin(WidgetBase));
 class Cell extends CellBase<CellProperties> {
 	render(): DNode {
 		const {
-			value = ''
+			content
 		} = this.properties;
 
 		return v('td', {
 			role: 'gridcell',
 			classes: this.classes(cellCss.cell, css.rowCell)
 		}, [
-			String(value)
+			content
 		]);
 	}
 }

src/Row.ts

@@ -13,7 +13,7 @@ import * as tableCss from './styles/shared/table.m.css';
 export const RowBase = ThemeableMixin(RegistryMixin(WidgetBase));
 
 export interface RowProperties extends WidgetProperties, HasColumns, RegistryMixinProperties, ThemeableProperties {
-	item: ItemProperties<any>;
+	item: ItemProperties;
 	key: string;
 }
 
@@ -37,15 +37,40 @@ class Row extends RowBase<RowProperties> {
 				classes: this.classes(tableCss.table, css.rowTable)
 			}, [
 				v('tr', columns.map((column) => {
-					const { id, field } = column;
+					const { field, id } = column;
+
+					let value: any;
+					if (typeof column.get === 'function') {
+						// Get the value from the column callback
+						value = column.get(item, column);
+					}
+					else if (typeof column.get !== 'undefined') {
+						// Get the value from the column property
+						value = column.get;
+					}
+					else {
+						// Get the value using a property lookup on the item data
+						value = item.data[ field || id ];
+					}
+
+					let content: DNode;
+					if (column.render) {
+						// The column callback calculates its own value and DNode/string
+						content = column.render({ value, item, column });
+					}
+					else {
+						// The value from get/item data is cast to a string
+						content = String(value);
+					}
 
 					return w<Cell>('cell', {
+						content,
 						column,
 						item,
 						key: id,
 						registry,
 						theme,
-						value: item.data[ field || id ]
+						value
 					});
 				}))
 			])

src/interfaces.d.ts

@@ -1,21 +1,50 @@
-export interface Column<T> {
+import { DNode } from '@dojo/widget-core/interfaces';
+
+/**
+ * @type Column
+ *
+ * Adds information about a column that will be used by the
+ * grid when retrieving and displaying data.
+ *
+ * @typeparam T        Used by field property and cell customization functions to enforce type safety
+ * @typeparam V        Used by cell customization to ensure the same type is used by get and render
+ * @property  field    Property on the row's data item to use to look up the column's value
+ * @property  get      Manually return the value or content to use for this column
+ * @property  id       A unique identifier for this column
+ * @property  label    The label to use in the column's header
+ * @property  sortable Set to false to indicate the column is not sortable
+ * @property  render   Use this column's value to provide content for this column
+ */
+export interface Column<T = any, V = string> {
 	field?: keyof T;
+	get?: V | ((item: ItemProperties<T>, column: Column<T>) => V);
 	id: string;
 	label?: string;
 	sortable?: boolean; // default true
+	render?(options: ColumnRenderOptions<T, V>): DNode;
+}
+
+export interface ColumnRenderOptions<T = any, V = string> {
+	column: Column<T>;
+	item: ItemProperties<T>;
+	value: V;
 }
 
 export interface DataProperties<T> {
 	items: ItemProperties<T>[];
 	sort?: SortDetails[];
 }
 
+export interface HasContent {
+	content: DNode;
+}
+
 export interface HasColumn {
-	column: Column<any>;
+	column: Column<any, any>;
 }
 
 export interface HasColumns {
-	columns: Column<any>[];
+	columns: Column<any, any>[];
 }
 
 export interface HasSortDetail {
@@ -35,18 +64,18 @@ export interface HasSortEvent {
 }
 
 export interface HasItem {
-	item: ItemProperties<any>;
+	item: ItemProperties;
 }
 
 export interface HasItems {
-	items: ItemProperties<any>[];
+	items: ItemProperties[];
 }
 
 export interface HasValue {
 	value: string;
 }
 
-export interface ItemProperties<T> {
+export interface ItemProperties<T = any> {
 	id: string;
 	data: T;
 }

src/providers/ArrayDataProvider.ts

@@ -7,7 +7,7 @@ export interface ArrayDataProviderOptions<T> extends DataProviderOptions {
 }
 
 function expand(items: any[], idProperty: string) {
-	const array: ItemProperties<any>[] = [];
+	const array: ItemProperties[] = [];
 	for (const item of items) {
 		const id = String(item[idProperty]);
 		array.push({

tests/unit/Body.ts

@@ -22,11 +22,11 @@ registerSuite({
 	},
 
 	'Simple item'() {
-		const columns: Column<any>[] = [
+		const columns: Column[] = [
 			{ id: 'foo' },
 			{ id: 'bar' }
 		];
-		const item: ItemProperties<any> = {
+		const item: ItemProperties = {
 			id: '1',
 			data: {
 				id: 1,

tests/unit/Cell.ts

@@ -8,10 +8,10 @@ import { Column, ItemProperties } from '../../src/interfaces';
 import * as cellCss from '../../src/styles/shared/cell.m.css';
 import * as css from '../../src/styles/cell.m.css';
 
-const column: Column<any> = {
+const column: Column = {
 	id: 'column'
 };
-const item: ItemProperties<any> = {
+const item: ItemProperties = {
 	id: 'item',
 	data: {}
 };
@@ -28,13 +28,14 @@ registerSuite({
 		widget.destroy();
 	},
 
-	'Cell value used for child node'() {
+	'Cell content used for child node'() {
 		widget.setProperties({
 			column,
+			content: 'Hello, World!',
 			key: column.id,
 			item,
 			registry,
-			value: 'Hello, World!'
+			value: 'unexpected'
 		});
 
 		widget.expectRender(v('td', {
@@ -43,37 +44,5 @@ registerSuite({
 		}, [
 			'Hello, World!'
 		]));
-	},
-
-	'Cell value missing'() {
-		widget.setProperties(<any> {
-			column,
-			item,
-			registry
-		});
-
-		widget.expectRender(v('td', {
-			role: 'gridcell',
-			classes: widget.classes(cellCss.cell, css.rowCell)
-		}, [
-			''
-		]));
-	},
-
-	'Cell value is stringified'() {
-		widget.setProperties({
-			column,
-			key: column.id,
-			item,
-			registry,
-			value: <any> 1234
-		});
-
-		widget.expectRender(v('td', {
-			role: 'gridcell',
-			classes: widget.classes(cellCss.cell, css.rowCell)
-		}, [
-			'1234'
-		]));
 	}
 });

tests/unit/Grid.ts

@@ -25,7 +25,7 @@ const compareRegistryProperty: GridRegistry = <any> compareProperty((value) => {
 	return false;
 });
 
-const columns: Column<any>[] = [
+const columns: Column[] = [
 	{ id: 'name', label: 'Name' }
 ];
 
@@ -40,7 +40,7 @@ const items = [
 	}
 ];
 
-const itemProperties: ItemProperties<any>[] = [
+const itemProperties: ItemProperties[] = [
 	{
 		id: '1',
 		data: items[0]
@@ -62,7 +62,7 @@ const items2 = [
 	}
 ];
 
-const itemProperties2: ItemProperties<any>[] = [
+const itemProperties2: ItemProperties[] = [
 	{
 		id: '3',
 		data: items2[0]