Dashing Table

readme.md

Table for Dashing

Allows you to use tables with the dashing framework

Installation

• Create a folder in your widgets folder called table. Insert the three files (table.coffee, table.scss, table.html)

or

• dashing install 8eac8fe050bed362688f

Usage

• Create a widget on your dashboard with data-view="Table"
• Create a job to populate the widget

To send a row to the tbody (or thead), send a JSON hash to rows (hrows for thead). The bindings work from row to column. Every column should be it's own array element off a cols hash. The hash must have a key of "value" in order to show up. To send multple rows, use an array of these hashes.

Some other keys that you use include colspan, rowspan, class, and style.

Basic Example

headers = {"cols"=>[{"value"=>"Name"}, {"value"=>"Value"}]}

rows = [{"cols"=>[{"value"=>"Name 1"}, {"value"=>"Value 1"}]},
 {"cols"=>[{"value"=>"Name 2"}, {"value"=>"Value 2"}]},
 {"cols"=>[{"value"=>"Name 3"}, {"value"=>"Value 3"}]},
 {"cols"=>[{"value"=>"Name 4"}, {"value"=>"Value 4"}]}]

send_event("my-table", { hrows: headers, rows: rows } )

Advanced Example (using colspan, rowspan, class, style)

headers = {"style" => "color:#888" , "cols" => [ { "value" => "Name", "rowspan" => 2}, {"value" => "Value", "colspan" => 2} ] }

rows = [ {"cols" => [{"value" =>  "Name 1"}, {"value" =>  "Value 1"}]},
{"class" => "special", cols" => [{"value" =>  "Name 2"}, {"value" =>  "Value 2"}]},
{"rowspan" => 3, cols" => [{"value" =>  "Name 3"}, {"value" =>  "Value 3"}]},
{"style" => "text-transform:capitalize;", cols" => [{"value" =>  "Name 4"}, {"value" =>  "Value 4"}]} ]

send_event("my-table", { hrows: headers, rows: rows } )

My Version

• Uses an h1 tag for the title

table.coffee

class Dashing.Table extends Dashing.Widget

table.html

<h1 class="table-title" data-bind="title"></h1>

<table>
  <thead>
   <tr data-foreach-hrow="hrows" data-bind-style="hrow.style" data-bind-class="hrow.class">
      <th data-foreach-col="hrow.cols" data-bind-colspan="col.colspan" data-bind-rowspan="col.rowspan" data-bind-class="col.class">
        <span class="table-value" data-bind="col.value | raw"></span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr data-foreach-row="rows" data-bind-class="row.class">
      <td data-foreach-col="row.cols" data-bind-colspan="col.colspan" data-bind-rowspan="col.rowspan" data-bind-class="col.class">
        <span class="table-value" data-bind="col.value | raw"></span>
      </td>
    </tr>
  </tbody>
</table>

table.scss

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

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

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

  background-color: $background-color;
  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;
  }

}

Hi,
I have tried a few curl commands but I cannot make CURL commands work. I can send CURL commands to any of the demos but not the table at all. Can you post a quick example of what works for this exact example? (I tried the one that this project is forked from; but to no avail)
Thanks,
Roger