Dashing Table

table.coffee

class Dashing.Table extends Dashing.Widget 
#	ready: ->
#    setInterval(@startCountdown, 2000)

#	startCountdown: =>
#		$("#table1").toggle()
#		$("#table2").toggle()

#	onData: (data) ->
#		if data.rows1
#			$("#table1").toggle();
#			$("#table2").toggle();			
#		if data.rows2
#			$("#table1").toggle();
#			$("#table2").toggle();

table.html

<table id='table1' class="table table-condensed" data-bind-style="style1">
	<thead>
		<tr>
			<th data-foreach-header="headers1" data-bind="header.value"></th>
		</tr>
	</thead>
	<tbody>
	</tbody>
  <tr data-foreach-row="rows1" data-bind-class="row.class">
	<td  data-foreach-col="row.cols" data-bind-class="col.y_class" data-bind="col.value" data-bind-title="col.title"></td>
	<!--	<td data-foreach-col="row.cols" data-bind-title="col.title" data-bind-class="col.y_class" data-bind="col.value"></td> --!>
  </tr>
</table>

<table id='table2' class="table table-condensed" data-bind-style="style2">
	<thead>
		<tr>
			<th data-foreach-header="headers2" data-bind="header.value"></th>
		</tr>
	</thead>
	<tbody>
	</tbody>
  <tr data-foreach-row="rows2" data-bind-class="row.class">
	<td  data-foreach-col="row.cols" data-bind-class="col.y_class" data-bind="col.value" data-bind-title="col.title"></td>
	<!--	<td data-foreach-col="row.cols" data-bind-title="col.title" data-bind-class="col.y_class" data-bind="col.value"></td> --!>
  </tr>
</table>

<p class="more-info" data-bind="moreinfo"></p>
<p class="updated-at" data-bind="updatedAtMessage"></p>

table.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #333;
$value-color:       #fff;

$title-color:       rgba(255, 255, 255, 0.7);
$label-color:       #333333;
$moreinfo-color:    rgba(255, 255, 255, 0.7);

// ----------------------------------------------------------------------------
// Widget-list styles
// ----------------------------------------------------------------------------
.widget-table {

  background-color: $background-color;
	color: #fff;
  vertical-align: top;
/*
  .title {
    color: $title-color;
 }

  td {
   margin: 0 15px;
    text-align: left;
    color: $label-color;
 }

  .value {
    margin-left: 12px;
    font-weight: 600;
    color: $value-color;
  }

  .updated-at {
    color: rgba(0, 0, 0, 0.3);
  }
*/
  .more-info {
    color: $moreinfo-color;
  }

}