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

}

Hi there. I am attempting to send data from an excel sheet to this table widget however I am attempting to make this as stream lined as possible. ultimately I will not know ahead of time the dimensions of data in excel. Any advice on how to construct the a version of this :
`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)} ]}
]`
That can dynamically accept different table widths and heights and retrieve the values from an array of those dimensions.

Hi @nick123pig ,
Can you change the cURL request example to access the ID http://localhost:3030/widgets/my-table instead of http://localhost:3030/widgets/table so it corresponds with the HTML id?

Thanks,
Roger

Did anyone by chance manage to get a sortable Table? I tried to adapt the Widget to include this sorting Library however didn't have success so far:
https://www.kryogenix.org/code/browser/sorttable/
What I did was adding the Javascript File to ./assets/javascript (You need to convert the file to UTF-8, otherwise the Dashboard doesn't render anymore as soon as you downloaded the file) and adapted the table.html file to include the

<script src="sorttable.js"></script>

and

< table class="sortable">

however I still can't sort the table. Anyone who managed to get a sortable Table?

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?