88 lines
3.5 KiB
HTML
88 lines
3.5 KiB
HTML
<script type="text/html" data-help-name="ui_table">
|
|
<p>A Node-RED-Dashboard UI widget node that displays a table of data.</p>
|
|
|
|
<h3>Inputs</h3>
|
|
<dl class="message-properties">
|
|
<dt>payload<span class="property-type">array</span></dt>
|
|
<dd>An array of objects which contains row data.</dd>
|
|
</dl>
|
|
|
|
<h3>Outputs (optional)</h3>
|
|
<dl class="message-properties">
|
|
<dt>payload<span class="property-type">object</span></dt>
|
|
<dd>An object that contains the data from the row that was selected.</dd>
|
|
<dt>topic<span class="property-type">string</span></dt>
|
|
<dd>A string that contains the property name of selected cell.</dd>
|
|
<dt>row<span class="property-type">number</span></dt>
|
|
<dd>A number that contains the row index of the clicked cell (from 0).</dd>
|
|
</dl>
|
|
|
|
<h3>Details</h3>
|
|
<p>To clear the table send an empty data array <code>[]</code>.</p>
|
|
<p>Each data row object should have the same set of keys because the keys in the object are used as the column names.</p>
|
|
<p>With no configuration the node will try to create a table with equally spaced columns of simple text for each row provided, using the keys as column titles.</p>
|
|
<p>If manual configuration is used each column can be configured with a Title, Width, Alignment and Format.</p>
|
|
<p>Width can be in pixels, or %, or left blank for automatic.</p>
|
|
<p>Format can be:<ul>
|
|
<li>Plain Text - Simple text values.</li>
|
|
<li>HTML - Rich html to allow text Formatting - <i>NOTE</i>: this is raw un-sanitised HTML.</li>
|
|
<li>Link - URL link to a web page.</li>
|
|
<li>Image - Source (src) URL of an image to display.</li>
|
|
<li>Progress - a progress bar from 0 to 100.</li>
|
|
<li>Traffic - Red/Amber/Green indicator light set by numbers in the range 0-33-67-100.</li>
|
|
<li>Color - HTML color name, or hex value (#rrggbb) to fill the cell.</li>
|
|
<li>Tick/Cross - Tick or Cross symbol, boolean true/false, numeric 1/0 or text "1"/"0".</li>
|
|
<li>Stars - Number of stars - numeric 0 to 5.</li>
|
|
<li>Row Number - Current row number.</li>
|
|
</ul></p>
|
|
|
|
<h3>Example data</h3>
|
|
<pre><code>[
|
|
{
|
|
"Name": "Kazuhito Yokoi",
|
|
"Age": "35",
|
|
"Favourite Color": "red",
|
|
"Date Of Birth": "12/09/1983",
|
|
"Rating": 5
|
|
},
|
|
{
|
|
"Name": "Oli Bob",
|
|
"Age": "12",
|
|
"Favourite Color": "red",
|
|
"Date Of Birth": "12/08/2017",
|
|
"Rating": 2
|
|
}
|
|
]</code></pre>
|
|
|
|
<h3>Advanced features</h3>
|
|
|
|
Instead of sending an array to ui-table this node to replace the complete table data it also accepts an object as payload to send commands. The object must have the following properties
|
|
|
|
<ul>
|
|
<li> `command` a valid tabulator command such as `addRow`, `replaceData` or `addFilter`</li>
|
|
<li> `arguments` *(optional)* can array of arguments for that function</li>
|
|
<li> `returnPromise` *(optional)* a boolean value. `true` if the function should return a promise.</li>
|
|
</ul>
|
|
|
|
<dl class="message-properties">
|
|
<dt>payload<span class="property-type">object</span></dt>
|
|
<dd>An object containing a command to the ui-table widget.
|
|
<pre><code>{
|
|
command: "addRow",
|
|
arguments: [
|
|
{
|
|
"Name": "Oli Bob",
|
|
"Age": "12",
|
|
"Favorite Color": "red",
|
|
"Date Of Birth": "12/08/2017",
|
|
"Rating": 2
|
|
},
|
|
true
|
|
],
|
|
returnPromise: true
|
|
}</code></pre>
|
|
</dd>
|
|
</dl>
|
|
|
|
</script>
|