JSFiddle - React, Tailwind, and code Playground

CoffeeScript

{div,form,input,p,span,table,thead,tbody,tr,th,td} = React.DOM

ProductCategoryRow = React.createClass
  render: ->
    return tr {},
      th colSpan:2, @props.category

ProductRow = React.createClass
  render: ->
    name = @props.product.name
    styled = if @props.product.stocked then name else span({style:{color:'red'}}, name)
    return tr {},
      td {}, styled
      td {}, @props.product.price

ProductTable = React.createClass
  render: ->
    console.log(@props);
    rows = []
    lastCategory = null
    @props.products.forEach (product) =>
      if product.name.indexOf(@props.filterText) is -1 || (!product.stocked && @props.inStockOnly)
        return
      if product.category isnt lastCategory
        rows.push(ProductCategoryRow({category:product.category, key:product.category}))

      rows.push(ProductRow({product:product, key:product.name}))
      lastCategory = product.category
      return

    return table {},
      thead {},
        tr {},
          th {}, 'Name'
          th {}, 'Price'
      ,
      tbody {}, rows

SearchBar = React.createClass
  handleChange: ->
    @props.onUserInput(
      @refs.filterTextInput.getDOMNode().value,
      @refs.inStockOnlyInput.getDOMNode().checked
    )

  render: ->
    form {onSubmit:@handleSubmit},
      input {type:'text', placeholder:'Search...', value:@props.filterText, ref:'filterTextInput', onChange:@handleChange},
        p {}, ''
    ,
      input {type:'checkbox', value:@props.inStockOnly, ref:'inStockOnlyInput', onChange:@handleChange},
        'Only show products in stock'

FilterableProductTable = React.createClass
  getInitialState: ->
    return {
      filterText: '',
      inStockOnly: false
    }

  handleUserInput: (filterText, inStockOnly) ->
    @setState({
      filterText: filterText,
      inStockOnly: inStockOnly
    })

  render: ->
    div {},
      SearchBar({filterText:@state.filterText, inStockOnly:@state.inStockOnly, onUserInput:@handleUserInput}),
     ...