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

}

Thanks for this! One thing I've noticed though is it tends to blink with every received event. Has this happened for you?

I'm seeing the same thing as chrisengelsma. The widget blinks whenever events are received. I tried editing the coffee script to have the table fade out and in when it receives events, but it blinks and then transitions. Any idea what would be causing this?

I have a job that sends data to view and have a List But I'm not sure how to send List data so that table widget show the data in table. Will greatly appreciate if you anyone can help. Thanks.

class ShipmentStatus:IJob
{
public Lazy Timer { get; private set; }

    public ShipmentStatus()
    {
        Timer = new Lazy<Timer>(() => new Timer(SendMessage, null, TimeSpan.Zero, TimeSpan.FromSeconds(2)));
    }

    protected void SendMessage(object message)
    {
        try
        {
            var Shipments = DataProcessor.GetShipmentStatus();
            Logger.Log("Total Recrod Retrieved: " + Shipments.Count.ToString());

            Dashing.SendMessage(new { id = "shipmentstatus", items = Shipments.Select(m => new { label = m.CustID, value = m.CustID}) });
        }catch(Exception ex)
        {
            Logger.Log(ex.Message);
        }
    }
}

@chrisengelsma It looks like blinking is caused by batman.js taking too long to render the table. I update table.html to accept a raw html string and write that string in one of the ruby jobs. Seem to be working much better.

table.html
<span class="widget-table" data-bind="table | raw"></span>
<p class="more-info" data-bind="moreinfo"></p>
<p class="updated-at" data-bind="updatedAtMessage"></p>

Sending data:
table="<table><tr><td>test></td></tr></table>"
send_event('Table1', { table: table })

Is there a way to make this table scrollable? I have a long array to display, I've made the widget 2x4 to fit it all, but it would be nice to keep it 2x2 and have it be scrollable. Thanks

I just wanted to say that figuring out how to post to a table with mysql job was REALLY hard. Here's my code for people that might follow:

sql = "SELECT * FROM table ORDER BY date DESC LIMIT 15;"

  # Execute the query
  results = db.query(sql,:as => :hash)
  ::LOGGER.info "results = '#{results}'"

  # Sending to List widget, so map to :label and :value
  hrows = [
    { cols: [ {value: 'Heading1'},
      {value: 'Heading2'},
      {value: 'Heading3'},
      {value: 'Heading4'}
    ] }
  ]
  ::LOGGER.debug "Table Headers #{hrows}"
  ary = Array.new
  results.each do |row|
    rows = { cols: [ {value: "#{row['column1']}"},
        {value: "#{row['column2']}"},
        {value: "#{row['column3']}"},
        {value: "#{row['column4']}"}
      ] }
    ary.push(rows)
    ::LOGGER.debug "Table Row #{rows}"
  end
  ::LOGGER.debug "Table Row #{ary}"
  send_event('mytable', { hrows: hrows, rows: ary } )

does someone know how to make the title dynamic too?

edit: nevermind, adding title: "titlename" solved it

I wish to manage background td color by coffee, it's possible?
If yes, can you show me how plz.
thx

This still does not work.
Here is the latest of what I have tried (copied the working ruby code and converted into JSON but no go)

curl -d '{ "auth_token":"YOUR_AUTH_TOKEN",
"hrows":[
  { "cols": [ {"value": "One"}, {"value": "Two"}, {"value": "Three"}, {"value": "Four"} ] }
],

"rows":[
  { "cols": [ {"value": "cell11"}, {"value": "asdf"}, {"value": "sdfg"}, {"value": "dfhg"} ]},
  { "cols": [ {"value": "cell21"}, {"value": "asdf"}, {"value": "sdfg"}, {"value": "dfhg"} ]},
  { "cols": [ {"value": "cell31"}, {"value": "asdf"}, {"value": "sdfg"}, {"value": "dfhg"} ]},
  { "cols": [ {"value": "cell41"}, {"value": "asdf"}, {"value": "sdfg"}, {"value": "dfhg"} ]}
]}' http://localhost:3030/widgets/table

Can someone run this and tell me if it works (or let me know of anything obvious that I could be missing)?
Thank you

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?