Skip to content

Instantly share code, notes, and snippets.

@nick123pig
Last active April 10, 2019 15:13
Show Gist options
  • Save nick123pig/9c7cb3030f63ad10e517 to your computer and use it in GitHub Desktop.
Save nick123pig/9c7cb3030f63ad10e517 to your computer and use it in GitHub Desktop.
Dashing Table

dashing-table

Allows you to use tables with the dashing framework.

Preview

Basic Table Preview

Advanced Table 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

class Dashing.Table extends Dashing.Widget
<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>
// ----------------------------------------------------------------------------
// 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;
}
}
@chrisengelsma
Copy link

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

@soulen3
Copy link

soulen3 commented Jun 8, 2016

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?

@delsoftusa
Copy link

delsoftusa commented Jun 10, 2016

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

@soulen3
Copy link

soulen3 commented Jun 16, 2016

@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 })

@alexsheehan1
Copy link

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

@jamesonwildwood
Copy link

jamesonwildwood commented Nov 22, 2016

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

@schoerg
Copy link

schoerg commented Jun 12, 2017

does someone know how to make the title dynamic too?

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

@Davidffry
Copy link

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

@regor2
Copy link

regor2 commented Oct 31, 2017

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

@AlexArthur93
Copy link

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.

@regor2
Copy link

regor2 commented Nov 8, 2017

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

@NoelzeN
Copy link

NoelzeN commented Dec 4, 2018

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?

@jvermast
Copy link

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment