Copy and paste into https://matthiasak.github.io/arbiter-frame/

thinking-in-vdom.js

let items = [
  {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
  {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
  {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
  {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
  {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
  {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
]

const app = () => {
let u = universalUtils,
    {vdom} = u,
    {debounce, m, rAF, mount, update, qs} = vdom

const productTable = data => _ => {
    let rows = [], lastCategory = null
    reset()
	log(data.$stocked(), data.$filter())
    data.filter(x => data.$stocked() ? x.stocked : true)
        .filter(x => x.name.toLowerCase().indexOf(data.$filter().toLowerCase())!== -1)
        .map(product => {
            if (product.category !== lastCategory) {
                rows.push(m('tr', m('th', {colSpan:2}, product.category)))
            }

            rows.push(
                m('tr',
                    m('td', 
                        product.stocked ? 
                            product.name : 
                            m('span', {style:{color:'red'}}, product.name)),
                    m('td', product.price)))

            lastCategory = product.category
        })

    return m('table',
        m('thead', 
            m('tr',
                m('th', 'Name'),
                m('th', 'Price'))),
        m('tbody', rows))
}

const prop = init => 
	val => 
		(val === undefined) ? 
      		init : 
			([init,val] = [val, rAF(update)], init)

const searchBar = data => _ =>
    m('form',
      m('input', {onkeyup: e => data.$filter(e.srcElement.value), type:'text', placeholder: 'search...'}),
      m('p', m('input', {onchange: e => data.$stocked(e.srcElement.checked), type:'checkbox'}), ' only show products in stock'))

const list = (data) =>  {
    data.$filter = prop('')
    data.$stocked = prop(false)
    return m('div', searchBar(data), productTable(data))
}


mount(list(items), qs())
}

require('universal-utils').then(app).catch(e => log(e+''))