dtaalbers/app.html

## app.html
<template>
  <div if.bind="selected_rows.length > 0">
    Selection (${ selected_rows.length })
  </div>
  <input type="text" value.bind="query" keyup.delegate="search()" placeholder="Search..">
  <table>
    <thead>
      <tr>
        <td></td>
        <th>Id</th>
        <th>Name</th>
      </tr>
    </thead>
    <tbody>
      <tr repeat.for="row of rows">
        <th><input type="checkbox" model.bind="row" checked.bind="selected_rows"></th>
        <td>${ row.id }</td>
        <td>${ row.name }</td>
      </tr>
    </tbody>
  </table>
</template>

## app.js
export class App {

  query;

  rows;
  selected_rows = [];
  data = [
    {
      id: 0,
      name: 'Amazing row'
    },
    {
      id: 1,
      name: 'Less amazing row'
    },
    {
      id: 2,
      name: 'avarage row'
    },
    {
      id: 3,
      name: 'less than average row'
    },
    {
      id: 4,
      name: 'are you sure this is even a row?'
    },
    {
      id: 5,
      name: 'this is not a row, i am sure of it'
    },
  ];

  attached() {
    this.rows = this.data;
  }

  search() {
   if(!this.query || this.query.trim() == '') {
     this.rows = this.data
   } else {
      this.rows = this.data.filter(x => x.name.includes(this.query));
   }
  }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      .panel {
        border: 1px solid black;
      }
      .panel-heading {
        background: lightblue;
        color: white;
        border-bottom: 1px solid black;
        padding: 3px;
        font-size: 20px;
      }
      .panel-body {
        padding: 3px;
      }
    </style>
  </head>
  <body aurelia-app>
    <h1>Loading...</h1>

    <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
    <script>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
</html>
	<template>
	<div if.bind="selected_rows.length > 0">
	Selection (${ selected_rows.length })
	</div>
	<input type="text" value.bind="query" keyup.delegate="search()" placeholder="Search..">
	<table>
	<thead>
	<tr>
	<td></td>
	<th>Id</th>
	<th>Name</th>
	</tr>
	</thead>
	<tbody>
	<tr repeat.for="row of rows">
	<th><input type="checkbox" model.bind="row" checked.bind="selected_rows"></th>
	<td>${ row.id }</td>
	<td>${ row.name }</td>
	</tr>
	</tbody>
	</table>
	</template>
	export class App {

	query;

	rows;
	selected_rows = [];
	data = [
	{
	id: 0,
	name: 'Amazing row'
	},
	{
	id: 1,
	name: 'Less amazing row'
	},
	{
	id: 2,
	name: 'avarage row'
	},
	{
	id: 3,
	name: 'less than average row'
	},
	{
	id: 4,
	name: 'are you sure this is even a row?'
	},
	{
	id: 5,
	name: 'this is not a row, i am sure of it'
	},
	];

	attached() {
	this.rows = this.data;
	}

	search() {
	if(!this.query \|\| this.query.trim() == '') {
	this.rows = this.data
	} else {
	this.rows = this.data.filter(x => x.name.includes(this.query));
	}
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	.panel {
	border: 1px solid black;
	}
	.panel-heading {
	background: lightblue;
	color: white;
	border-bottom: 1px solid black;
	padding: 3px;
	font-size: 20px;
	}
	.panel-body {
	padding: 3px;
	}
	</style>
	</head>
	<body aurelia-app>
	<h1>Loading...</h1>

	<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
	<script>
	require(['aurelia-bootstrapper']);
	</script>
	</body>
	</html>