Dashing Table

readme.md

dashing-table

Main Github Page

Allows you to use tables with the dashing framework.

Preview

Installation

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

Alternately, you can use the automated dashing installer by running dashing install 9c7cb3030f63ad10e517 from the root of your dashing project.

Usage

• Create a widget on your dashboard with data-view="Table". Example:

<li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
  <div data-id="my-table" data-view="Table" data-title="Table Title" data-moreinfo="More information about this table"></div>
</li>

• Create a job to populate the widget.

To send a row to the tbody (or thead), send a array of hashes 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 multiple rows, use an array of these hashes.

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

Basic Example

hrows = [
  { cols: [ {value: 'One'}, {value: 'Two'}, {value: 'Three'}, {value: 'Four'} ] }
]

rows = [
  { cols: [ {value: 'cell11'}, {value: rand(5)}, {value: rand(5)}, {value: rand(5)} ]},
  { cols: [ {value: 'cell21'}, {value: rand(5)}, {value: rand(5)}, {value: rand(5)} ]},
  { cols: [ {value: 'cell31'}, {value: rand(5)}, {value: rand(5)}, {value: rand(5)} ]},
  { cols: [ {value: 'cell41'}, {value: rand(5)}, {value: rand(5)}, {value: rand(5)} ]}
]

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

Advanced Example (using colspan, class, style)

hrows = [
  {
    style: 'color:#888;',
    class: 'right',
    cols: [
      {class: 'left', value: 'One'},
      {style: 'color:red; text-align:center;',value: 'Two'},
      {style: 'color:blue;', value: 'Three'},
      {style: 'color:yellow;',value: 'Four'}
    ]
  }
]

rows = [
  { cols: [ {class: 'left', value: 'cell11'}, {value: 'value' + rand(5).to_s}, {class: 'right', value: rand(5)}, {class: 'right', value: rand(5)} ]},
  { cols: [ {class: 'left', value: 'cell21'}, {value: 'value' + rand(5).to_s}, {class: 'right', value: rand(5)}, {class: 'right', value: rand(5)} ]},
  { cols: [ {class: 'left', value: 'cell31'}, {value: 'value' + rand(5).to_s}, {class: 'right', value: rand(5)}, {class: 'right', value: rand(5)} ]},
  { cols: [ {class: 'left', value: 'cell41'}, {value: 'value' + rand(5).to_s}, {colspan: 2, class: 'right', value: rand(5)} ]}
]

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

Curl Example

  curl -d '  { "auth_token":"YOUR_AUTH_TOKEN",
                "hrows": [ {"cols": [ {"value":"Name 0"}, {"value":"Value 0"} ] } ],
                "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"} ] } ]
              }' http://localhost:3030/widgets/table

Contributors

• Nick Stocchero (creator)
• Jorge Morgado

table.coffee

class Dashing.Table extends Dashing.Widget

table.html

<h1 class="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-style="col.style" 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-style="row.style" data-bind-class="row.class">
      <td data-foreach-col="row.cols" data-bind-colspan="col.colspan" data-bind-rowspan="col.rowspan" data-bind-style="col.style" data-bind-class="col.class">
        <span class="table-value" data-bind="col.value | raw"></span>
      </td>
    </tr>
  </tbody>
</table>

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

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

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);

$th-background-color:       #222;
$tr-odd-background-color:   #12a0c5;
$tr-even-background-color:  #47bbb3;
$tr-hover-background-color: #858585;

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

  background-color: $background-color;

  .title {
    color: $title-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;
  }

  // Specify a table border for the table, header and cell elements
  // table { border-collapse: collapse; }
  // table, th, td { border: 1px solid black; }

  // Just a border around the table, nothing else
  // table { border: 1px solid black; }

  // Set the background color for the header row
  th { background-color: $th-background-color; }

  // If you want a stripped table set the color for both odd and even rows
  tr:nth-child(odd) { background-color: $tr-odd-background-color; }
  tr:nth-child(even) { background-color: $tr-even-background-color; }

  // Highlight table rows on mouse over
  tr:hover { background-color: $tr-hover-background-color; }

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

  .left {
    text-align: left;
  }
  .right {
    text-align: right;
  }

}

Is there any way to append a new entry at the bottom of an existing table without removing the content? Or is it all-for-one?