mbroadst/app.html

## app.html
<template>
  <require from="./grid/grid"></require>
  <require from="./grid/column"></require>

  <grid view-model.ref="grid" rows.bind="people" class="table table-condensed table-bordered">
    <column header="index">${$index}</column>
    <column header="first name">${firstName}</column>
    <column header="last name">${lastName}</column>
  </grid>
</template>

## app.js
export class App {
  people = [
    { firstName: 'Rob', lastName: 'Eisenberg' },
    { firstName: 'Jeremy', lastName: 'Danyow' },
    { firstName: 'Matt', lastName: 'Broadstone' }
  ];

  attached() {
    setTimeout(() => {
      console.log('remove all row view slots');
      let rowViewSlots = this.grid.rowViewSlots;
      for (let i = 0, ii = rowViewSlots.length; i < ii; ++i) {
        let anchor = rowViewSlots[i].anchor;
        let parentNode = anchor.parentNode;
        rowViewSlots[i].removeAll(true);
        parentNode.removeChild(anchor);
      }
    }, 2000);
  }
}

## grid\column.js
import {inject, bindable, processContent, noView, ViewCompiler} from 'aurelia-framework';

@noView
@processContent(false)
@inject(Element, ViewCompiler)
export class Column {
  @bindable header

  constructor(element, viewCompiler) {
    let template = `<template>${element.innerHTML}</template>`;
    this.viewFactory = viewCompiler.compile(template);
    element.innerHTML = '';
  }
}

## grid\grid.html
<template>
  <content></content>
  <table ref="table" class="${class}">
    <thead><tr ref="header"></tr></thead>
    <tbody ref="tbody"></tbody>
  </table>
</template>

## grid\grid.js
import {
  inject, bindable, children, createOverrideContext,
  ViewSlot, ViewCompiler
} from 'aurelia-framework';

@inject(ViewSlot, ViewCompiler)
export class Grid {
  @children('column') columns;
  @bindable rows;
  @bindable class;

  columnViewFactories = [];
  rowViewSlots = [];

  constructor(viewSlot, viewCompiler) {
    this.viewSlot = viewSlot;
    this.rowViewFactory =
      viewCompiler.compile(`<template><content></content></template`);
  }

  bind(bindingContext, overrideContext) {
    this.scrapeColumnViewFactories();
    this.renderHeaders();
    this.render(this.bindingContext, this.overrideContext);
  }

  scrapeColumnViewFactories() {
    for (let i = 0; i < this.columns.length; ++i)
      this.columnViewFactories.push(this.columns[i].viewFactory);
  }

  renderHeaders() {
    let headers = this.columns.map(c => c.header);
    for (let i = 0; i < headers.length; ++i) {
      let headerElement = document.createElement('th');
      let headerNode = document.createTextNode(headers[i]);
      headerElement.appendChild(headerNode);
      this.header.appendChild(headerElement);
    }
  }

  render(bindingContext, overrideContext) {
    let rows = this.rows;
    for (let y = 0, yy = rows.length; y < yy; y++) {
      let rowBindingContext = rows[y];
      let rowOverrideContext = createOverrideContext(rowBindingContext, overrideContext);
      rowOverrideContext.$first = y === 0;
      rowOverrideContext.$last = y === yy - 1;
      rowOverrideContext.$index = y;

      // add an actual row
      let rowElement = document.createElement('tr');
      this.tbody.appendChild(rowElement);

      let rowView = this.rowViewFactory.create();
      this.viewSlot.add(rowView);

      let rowViewSlot = new ViewSlot(rowElement, true);
      for (let x = 0, xx = this.columnViewFactories.length; x < xx; x++) {
        let cellViewFactory = this.columnViewFactories[x];
        let cellView = cellViewFactory.create();
        rowViewSlot.add(cellView);

        let cellElement = document.createElement('td');
        rowElement.appendChild(cellElement);

        // move the view to the `td` element
        cellView.removeNodes();
        cellView.appendNodesTo(cellElement);
      }

      // bind the whole row at once
      rowViewSlot.bind(rowBindingContext, rowOverrideContext);
      this.rowViewSlots.push(rowViewSlot);
    }
  }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  </head>
  <body aurelia-app>
    <h1>Loading...</h1>

    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>
	<template>
	<require from="./grid/grid"></require>
	<require from="./grid/column"></require>

	<grid view-model.ref="grid" rows.bind="people" class="table table-condensed table-bordered">
	<column header="index">${$index}</column>
	<column header="first name">${firstName}</column>
	<column header="last name">${lastName}</column>
	</grid>
	</template>
	export class App {
	people = [
	{ firstName: 'Rob', lastName: 'Eisenberg' },
	{ firstName: 'Jeremy', lastName: 'Danyow' },
	{ firstName: 'Matt', lastName: 'Broadstone' }
	];

	attached() {
	setTimeout(() => {
	console.log('remove all row view slots');
	let rowViewSlots = this.grid.rowViewSlots;
	for (let i = 0, ii = rowViewSlots.length; i < ii; ++i) {
	let anchor = rowViewSlots[i].anchor;
	let parentNode = anchor.parentNode;
	rowViewSlots[i].removeAll(true);
	parentNode.removeChild(anchor);
	}
	}, 2000);
	}
	}
	import {inject, bindable, processContent, noView, ViewCompiler} from 'aurelia-framework';

	@noView
	@processContent(false)
	@inject(Element, ViewCompiler)
	export class Column {
	@bindable header

	constructor(element, viewCompiler) {
	let template = `<template>${element.innerHTML}</template>`;
	this.viewFactory = viewCompiler.compile(template);
	element.innerHTML = '';
	}
	}
	<template>
	<content></content>
	<table ref="table" class="${class}">
	<thead><tr ref="header"></tr></thead>
	<tbody ref="tbody"></tbody>
	</table>
	</template>
	import {
	inject, bindable, children, createOverrideContext,
	ViewSlot, ViewCompiler
	} from 'aurelia-framework';

	@inject(ViewSlot, ViewCompiler)
	export class Grid {
	@children('column') columns;
	@bindable rows;
	@bindable class;

	columnViewFactories = [];
	rowViewSlots = [];

	constructor(viewSlot, viewCompiler) {
	this.viewSlot = viewSlot;
	this.rowViewFactory =
	viewCompiler.compile(`<template><content></content></template`);
	}

	bind(bindingContext, overrideContext) {
	this.scrapeColumnViewFactories();
	this.renderHeaders();
	this.render(this.bindingContext, this.overrideContext);
	}

	scrapeColumnViewFactories() {
	for (let i = 0; i < this.columns.length; ++i)
	this.columnViewFactories.push(this.columns[i].viewFactory);
	}

	renderHeaders() {
	let headers = this.columns.map(c => c.header);
	for (let i = 0; i < headers.length; ++i) {
	let headerElement = document.createElement('th');
	let headerNode = document.createTextNode(headers[i]);
	headerElement.appendChild(headerNode);
	this.header.appendChild(headerElement);
	}
	}

	render(bindingContext, overrideContext) {
	let rows = this.rows;
	for (let y = 0, yy = rows.length; y < yy; y++) {
	let rowBindingContext = rows[y];
	let rowOverrideContext = createOverrideContext(rowBindingContext, overrideContext);
	rowOverrideContext.$first = y === 0;
	rowOverrideContext.$last = y === yy - 1;
	rowOverrideContext.$index = y;

	// add an actual row
	let rowElement = document.createElement('tr');
	this.tbody.appendChild(rowElement);

	let rowView = this.rowViewFactory.create();
	this.viewSlot.add(rowView);

	let rowViewSlot = new ViewSlot(rowElement, true);
	for (let x = 0, xx = this.columnViewFactories.length; x < xx; x++) {
	let cellViewFactory = this.columnViewFactories[x];
	let cellView = cellViewFactory.create();
	rowViewSlot.add(cellView);

	let cellElement = document.createElement('td');
	rowElement.appendChild(cellElement);

	// move the view to the `td` element
	cellView.removeNodes();
	cellView.appendNodesTo(cellElement);
	}

	// bind the whole row at once
	rowViewSlot.bind(rowBindingContext, rowOverrideContext);
	this.rowViewSlots.push(rowViewSlot);
	}
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
	</head>
	<body aurelia-app>
	<h1>Loading...</h1>

	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>