Customizable Headers and Footers, fixes #11

src/HeaderCell.ts → src/ColumnHeaderCell.ts

@@ -5,18 +5,18 @@ import WidgetBase from '@dojo/widget-core/WidgetBase';
 import { DNode } from '@dojo/widget-core/interfaces';
 import { HasColumn, HasSortDetail, HasSortEvent } from './interfaces';
 
-import * as css from './styles/headerCell.m.css';
 import * as cellCss from './styles/shared/cell.m.css';
+import * as css from './styles/columnHeaderCell.m.css';
 
-export const HeaderCellBase = ThemeableMixin(RegistryMixin(WidgetBase));
+export const ColumnHeaderCellBase = ThemeableMixin(RegistryMixin(WidgetBase));
 
-export interface HeaderCellProperties extends ThemeableProperties, HasColumn, HasSortDetail, HasSortEvent, RegistryMixinProperties {
+export interface ColumnHeaderCellProperties extends ThemeableProperties, HasColumn, HasSortDetail, HasSortEvent, RegistryMixinProperties {
 	key: string;
 }
 
 @theme(cellCss)
 @theme(css)
-class HeaderCell extends HeaderCellBase<HeaderCellProperties> {
+class ColumnHeaderCell extends ColumnHeaderCellBase<ColumnHeaderCellProperties> {
 	onSortRequest(): void {
 		const {
 			key,
@@ -43,7 +43,7 @@ class HeaderCell extends HeaderCellBase<HeaderCellProperties> {
 			onSortRequest
 		} = this.properties;
 
-		const classes = [ cellCss.cell, css.headerCell, column.sortable !== false ? css.sortable : null ];
+		const classes = [ cellCss.cell, css.columnHeaderCell, column.sortable !== false ? css.sortable : null ];
 
 		const sortClasses = sortDetail ? [
 			css.sortArrow,
@@ -66,4 +66,4 @@ class HeaderCell extends HeaderCellBase<HeaderCellProperties> {
 	}
 }
 
-export default HeaderCell;
+export default ColumnHeaderCell;

src/ColumnHeaders.ts

@@ -0,0 +1,59 @@
+import { v, w } from '@dojo/widget-core/d';
+import { DNode } from '@dojo/widget-core/interfaces';
+import { RegistryMixin, RegistryMixinProperties }  from '@dojo/widget-core/mixins/Registry';
+import { theme, ThemeableMixin, ThemeableProperties } from '@dojo/widget-core/mixins/Themeable';
+import WidgetBase from '@dojo/widget-core/WidgetBase';
+import ColumnHeaderCell from './ColumnHeaderCell';
+import { HasColumns, HasSortDetails, HasSortEvent } from './interfaces';
+
+import * as css from './styles/columnHeaders.m.css';
+import * as tableCss from './styles/shared/table.m.css';
+
+export const ColumnHeadersBase = ThemeableMixin(RegistryMixin(WidgetBase));
+
+export interface ColumnHeadersProperties extends ThemeableProperties, HasColumns, HasSortDetails, HasSortEvent, RegistryMixinProperties {}
+
+@theme(tableCss)
+@theme(css)
+class ColumnHeaders extends ColumnHeadersBase<ColumnHeadersProperties> {
+	render(): DNode {
+		const {
+			columns,
+			onSortRequest,
+			registry,
+			sortDetails,
+			theme
+		} = this.properties;
+
+		return v('div', {
+			classes: this.classes(css.columnHeaders, css.columnHeadersRow),
+			role: 'row'
+		}, [
+			v('table', {
+				role: 'presentation',
+				classes: this.classes(tableCss.table, css.columnHeadersTable)
+			}, [
+				v('tr', columns.map((column) => {
+					let sortDetail;
+					for (const detail of sortDetails) {
+						if (detail.columnId === column.id) {
+							sortDetail = detail;
+							break;
+						}
+					}
+
+					return w<ColumnHeaderCell>('column-header-cell', {
+						column,
+						key: column.id,
+						onSortRequest,
+						registry,
+						sortDetail,
+						theme
+					});
+				}))
+			])
+		]);
+	}
+}
+
+export default ColumnHeaders;

src/Grid.ts

@@ -6,8 +6,10 @@ import { theme, ThemeableMixin, ThemeableProperties } from '@dojo/widget-core/mi
 import WidgetBase, { diffProperty } from '@dojo/widget-core/WidgetBase';
 import DataProviderBase from './bases/DataProviderBase';
 import Body from './Body';
+import ColumnHeaders from './ColumnHeaders';
+import Footer from './Footer';
 import GridRegistry, { gridRegistry } from './GridRegistry';
-import Header from './Header';
+import Header, { HeaderType } from './Header';
 import { DataProperties, HasColumns, SortRequestListener } from './interfaces';
 
 import * as css from './styles/grid.m.css';
@@ -25,6 +27,8 @@ export const GridBase = ThemeableMixin(RegistryMixin(WidgetBase));
 export interface GridProperties extends ThemeableProperties, HasColumns {
 	registry?: GridRegistry;
 	dataProvider: DataProviderBase;
+	footers?: (HeaderType | DNode)[];
+	headers?: (HeaderType | DNode)[];
 }
 
 @theme(css)
@@ -60,10 +64,9 @@ class Grid extends GridBase<GridProperties> {
 		};
 	}
 
-	render(): DNode {
+	protected inflateHeaderTypes(nodes: (HeaderType | DNode)[]): DNode[] {
 		const {
 			_data: {
-				items = [],
 				sort: sortDetails = []
 			},
 			_sortRequestListener: onSortRequest,
@@ -74,23 +77,49 @@ class Grid extends GridBase<GridProperties> {
 			}
 		} = this;
 
+		return nodes.map((child) => {
+			return (child === HeaderType.COLUMN_HEADERS) ? w<ColumnHeaders>('column-headers', {
+				columns,
+				registry,
+				sortDetails,
+				theme,
+				onSortRequest
+			}) : <DNode> child;
+		});
+	}
+
+	render(): DNode {
+		const {
+			_data: {
+				items = []
+			},
+			properties: {
+				columns,
+				footers = [],
+				headers = [ HeaderType.COLUMN_HEADERS ],
+				theme,
+				registry = gridRegistry
+			}
+		} = this;
+
 		return v('div', {
 			classes: this.classes(css.grid),
 			role: 'grid'
 		}, [
 			w<Header>('header', {
-				columns,
 				registry,
-				sortDetails,
-				theme,
-				onSortRequest
-			}),
+				theme
+			}, this.inflateHeaderTypes(headers)),
 			w<Body>('body', {
 				columns,
 				items,
 				registry,
 				theme
-			})
+			}),
+			w<Footer>('footer', {
+				registry,
+				theme
+			}, this.inflateHeaderTypes(footers))
 		]);
 	}
 }

src/GridRegistry.ts

@@ -2,18 +2,20 @@ import { WidgetBaseConstructor } from '@dojo/widget-core/interfaces';
 import WidgetRegistry from '@dojo/widget-core/WidgetRegistry';
 import Body, { BodyProperties } from './Body';
 import Cell, { CellProperties } from './Cell';
+import ColumnHeaderCell, { ColumnHeaderCellProperties } from './ColumnHeaderCell';
+import ColumnHeaders, { ColumnHeadersProperties } from './ColumnHeaders';
 import Footer, { FooterProperties } from './Footer';
 import Header, { HeaderProperties } from './Header';
-import HeaderCell, { HeaderCellProperties } from './HeaderCell';
 import Row, { RowProperties } from './Row';
 
 export interface GridRegistered {
 	[key: string]: WidgetBaseConstructor;
 	body: WidgetBaseConstructor<BodyProperties>;
 	cell: WidgetBaseConstructor<CellProperties>;
+	'column-header-cell': WidgetBaseConstructor<ColumnHeaderCellProperties>;
+	'column-headers': WidgetBaseConstructor<ColumnHeadersProperties>;
 	footer: WidgetBaseConstructor<FooterProperties>;
 	header: WidgetBaseConstructor<HeaderProperties>;
-	'header-cell': WidgetBaseConstructor<HeaderCellProperties>;
 	row: WidgetBaseConstructor<RowProperties>;
 }
 
@@ -25,9 +27,10 @@ export default class GridRegistry<T extends GridRegistered = GridRegistered> ext
 
 		super.define('body', Body);
 		super.define('cell', Cell);
+		super.define('column-header-cell', ColumnHeaderCell);
+		super.define('column-headers', ColumnHeaders);
 		super.define('footer', Footer);
 		super.define('header', Header);
-		super.define('header-cell', HeaderCell);
 		super.define('row', Row);
 	}
 

src/Header.ts

@@ -1,58 +1,25 @@
-import { v, w } from '@dojo/widget-core/d';
+import { v } from '@dojo/widget-core/d';
 import { DNode } from '@dojo/widget-core/interfaces';
-import { RegistryMixin, RegistryMixinProperties }  from '@dojo/widget-core/mixins/Registry';
-import { ThemeableMixin, theme, ThemeableProperties } from '@dojo/widget-core/mixins/Themeable';
+import { RegistryMixin, RegistryMixinProperties } from '@dojo/widget-core/mixins/Registry';
+import { theme, ThemeableMixin, ThemeableProperties } from '@dojo/widget-core/mixins/Themeable';
 import WidgetBase from '@dojo/widget-core/WidgetBase';
-import HeaderCell from './HeaderCell';
-import { HasColumns, HasSortDetails, HasSortEvent } from './interfaces';
 
 import * as css from './styles/header.m.css';
-import * as tableCss from './styles/shared/table.m.css';
 
 export const HeaderBase = ThemeableMixin(RegistryMixin(WidgetBase));
 
-export interface HeaderProperties extends ThemeableProperties, HasColumns, HasSortDetails, HasSortEvent, RegistryMixinProperties {}
+export interface HeaderProperties extends ThemeableProperties, RegistryMixinProperties {}
+
+export const enum HeaderType {
+	COLUMN_HEADERS = 1
+};
 
-@theme(tableCss)
 @theme(css)
 class Header extends HeaderBase<HeaderProperties> {
 	render(): DNode {
-		const {
-			columns,
-			onSortRequest,
-			registry,
-			sortDetails,
-			theme
-		} = this.properties;
-
 		return v('div', {
-			classes: this.classes(css.header, css.headerRow),
-			role: 'row'
-		}, [
-			v('table', {
-				role: 'presentation',
-				classes: this.classes(tableCss.table, css.headerTable)
-			}, [
-				v('tr', columns.map((column) => {
-					let sortDetail;
-					for (const detail of sortDetails) {
-						if (detail.columnId === column.id) {
-							sortDetail = detail;
-							break;
-						}
-					}
-
-					return w<HeaderCell>('header-cell', {
-						column,
-						key: column.id,
-						onSortRequest,
-						registry,
-						sortDetail,
-						theme
-					});
-				}))
-			])
-		]);
+			classes: this.classes(css.header)
+		}, this.children);
 	}
 }
 

src/styles/headerCell.m.css → src/styles/columnHeaderCell.m.css

@@ -1,4 +1,4 @@
-.headerCell {
+.columnHeaderCell {
     position: relative;
 }
 

src/styles/headerCell.m.css.d.ts → src/styles/columnHeaderCell.m.css.d.ts

@@ -1,4 +1,4 @@
-export const headerCell: string;
+export const columnHeaderCell: string;
 export const sortable: string;
 export const sortArrow: string;
 export const sortArrowUp: string;

src/styles/columnHeaders.m.css

@@ -0,0 +1,8 @@
+.columnHeaders {
+}
+
+.columnHeadersRow {
+}
+
+.columnHeadersTable {
+}

src/styles/columnHeaders.m.css.d.ts

@@ -0,0 +1,3 @@
+export const columnHeaders: string;
+export const columnHeadersRow: string;
+export const columnHeadersTable: string;

src/styles/dgrid.css

@@ -2,7 +2,8 @@
 @import 'shared/cell.m.css';
 @import 'shared/table.m.css';
 @import 'header.m.css';
-@import 'headerCell.m.css';
+@import 'columnHeaders.m.css';
+@import 'columnHeaderCell.m.css';
 @import 'row.m.css';
 @import 'cell.m.css';
 @import 'footer.m.css';

src/styles/header.m.css

@@ -3,9 +3,3 @@
 .header {
     background-color: var(--header-background-color);
 }
-
-.headerRow {
-}
-
-.headerTable {
-}

src/styles/header.m.css.d.ts

@@ -1,3 +1 @@
 export const header: string;
-export const headerRow: string;
-export const headerTable: string;