node-red-node-ui-table/locales/en-US/node.html

Table UI widget node for Node-RED Dashboard

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