-
Notifications
You must be signed in to change notification settings - Fork 51
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #873 from FlowFuse/392-table-column-types
Adds in richer configuration of UI Table columns
- Loading branch information
Showing
13 changed files
with
556 additions
and
34 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,171 @@ | ||
| [ | ||
| { | ||
| "id": "78b43be39f6db8e1", | ||
| "type": "ui-table", | ||
| "z": "9cb9bb3cd8e3faee", | ||
| "group": "5c66023267e5559e", | ||
| "name": "", | ||
| "label": "text", | ||
| "order": 3, | ||
| "width": 0, | ||
| "height": 0, | ||
| "maxrows": "0", | ||
| "autocols": false, | ||
| "showSearch": false, | ||
| "selectionType": "none", | ||
| "columns": [ | ||
| { | ||
| "title": "My Column", | ||
| "key": "columnA", | ||
| "type": "text", | ||
| "width": "", | ||
| "align": "start" | ||
| }, | ||
| { | ||
| "title": "My Other Column", | ||
| "key": "columnB", | ||
| "type": "text", | ||
| "width": "", | ||
| "align": "start" | ||
| }, | ||
| { | ||
| "title": "URL", | ||
| "key": "link", | ||
| "type": "link", | ||
| "width": "300px", | ||
| "align": "start" | ||
| }, | ||
| { | ||
| "title": "Progress", | ||
| "key": "progress", | ||
| "type": "progress", | ||
| "width": "", | ||
| "align": "start" | ||
| }, | ||
| { | ||
| "title": "Row", | ||
| "key": "", | ||
| "type": "row", | ||
| "width": "", | ||
| "align": "start" | ||
| }, | ||
| { | ||
| "title": "Trend", | ||
| "key": "array", | ||
| "type": "sparkline-trend", | ||
| "width": "", | ||
| "align": "start" | ||
| }, | ||
| { | ||
| "title": "Bar", | ||
| "key": "array", | ||
| "type": "sparkline-bar", | ||
| "width": "", | ||
| "align": "start" | ||
| }, | ||
| { | ||
| "title": "Tick/Cross", | ||
| "key": "boolean", | ||
| "type": "tickcross", | ||
| "width": "", | ||
| "align": "start" | ||
| }, | ||
| { | ||
| "title": "Spot", | ||
| "key": "color", | ||
| "type": "color", | ||
| "width": "", | ||
| "align": "center" | ||
| } | ||
| ], | ||
| "x": 490, | ||
| "y": 60, | ||
| "wires": [ | ||
| [] | ||
| ] | ||
| }, | ||
| { | ||
| "id": "6cdf36ffe9daf59c", | ||
| "type": "inject", | ||
| "z": "9cb9bb3cd8e3faee", | ||
| "name": "", | ||
| "props": [ | ||
| { | ||
| "p": "payload" | ||
| } | ||
| ], | ||
| "repeat": "", | ||
| "crontab": "", | ||
| "once": true, | ||
| "onceDelay": 0.1, | ||
| "topic": "", | ||
| "payload": "[{\"columnA\":\"Hello\",\"columnB\":\"World\",\"link\":\"https://news.bbc.co.uk\",\"progress\":76,\"color\":\"#FF0000\",\"array\":[6,7,9,2,4],\"boolean\":true},{\"columnA\":\"Hey\",\"columnB\":\"Globe\",\"link\":\"https://flowfuse.com\",\"progress\":56,\"color\":\"#24aa69\",\"array\":[1,3,6,3,5],\"boolean\":false}]", | ||
| "payloadType": "json", | ||
| "x": 350, | ||
| "y": 60, | ||
| "wires": [ | ||
| [ | ||
| "78b43be39f6db8e1" | ||
| ] | ||
| ] | ||
| }, | ||
| { | ||
| "id": "5c66023267e5559e", | ||
| "type": "ui-group", | ||
| "name": "Table Cell Types", | ||
| "page": "bbc7b44a426b2b01", | ||
| "width": "12", | ||
| "height": "1", | ||
| "order": 3, | ||
| "showTitle": true, | ||
| "className": "", | ||
| "visible": "true", | ||
| "disabled": "false" | ||
| }, | ||
| { | ||
| "id": "bbc7b44a426b2b01", | ||
| "type": "ui-page", | ||
| "name": "UI Table Example", | ||
| "ui": "c2e1aa56f50f03bd", | ||
| "path": "/table", | ||
| "icon": "table", | ||
| "layout": "grid", | ||
| "theme": "c2ff5ba1f92a0f0e", | ||
| "order": 11, | ||
| "className": "", | ||
| "visible": "true", | ||
| "disabled": "false" | ||
| }, | ||
| { | ||
| "id": "c2e1aa56f50f03bd", | ||
| "type": "ui-base", | ||
| "name": "Dashboard", | ||
| "path": "/dashboard", | ||
| "includeClientData": true, | ||
| "acceptsClientConfig": [ | ||
| "ui-control", | ||
| "ui-notification" | ||
| ], | ||
| "showPathInSidebar": true, | ||
| "navigationStyle": "temporary", | ||
| "titleBarStyle": "fixed" | ||
| }, | ||
| { | ||
| "id": "c2ff5ba1f92a0f0e", | ||
| "type": "ui-theme", | ||
| "name": "Default", | ||
| "colors": { | ||
| "surface": "#ffffff", | ||
| "primary": "#0094ce", | ||
| "bgPage": "#eeeeee", | ||
| "groupBg": "#ffffff", | ||
| "groupOutline": "#cccccc" | ||
| }, | ||
| "sizes": { | ||
| "pagePadding": "12px", | ||
| "groupGap": "12px", | ||
| "groupBorderRadius": "4px", | ||
| "widgetGap": "12px" | ||
| } | ||
| } | ||
| ] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| <script type="text/html" data-help-name="ui-table"> | ||
| <p> | ||
| Display and manage complex datasets with ease using the ui-table widget. | ||
| </p> | ||
| <h3>Input</h3> | ||
| <p> | ||
| The ui-table widget requires an array of data to be sent via <code>msg.payload</code>. | ||
| The table will then render a row for each object within the array, and, by default, a | ||
| column for each property in the objects. | ||
| </p> | ||
| <h3>Properties</h3> | ||
| <dl class="message-properties"> | ||
| <dt>Max Rows <span class="property-type">num</span></dt> | ||
| <dd> | ||
| Defines the maximum number of data-rows to render in the table. | ||
| Excess rows will be available through pagination control. | ||
| </dd> | ||
| <dt>Selection <span class="property-type">none | click | checkbox</span></dt> | ||
| <dd> | ||
| Defines any interaction available on the table. This will emit events | ||
| with the respective selections taking place. | ||
| </dd> | ||
| <dt>Show Search <span class="property-type">boolean</span></dt> | ||
| <dd>Will display a search bar above the table, allowing for text-based filtering of the data.</dd> | ||
| <dt>Auto Columns <span class="property-type">boolean</span></dt> | ||
| <dd> | ||
| If true, the table will automatically display all data provided. | ||
| If false, then you have much more control over the rendering of each column. | ||
| </dd> | ||
| <dt>Columns <span class="property-type">array</span></dt> | ||
| <dd>A list of the columns to render in the table. Only an available option if "Auto Columns" is set to "false"</dd> | ||
| </dl> | ||
| <h3>Cell Types</h3> | ||
| <p>The following details the available cell types that can be used in your tables</p> | ||
| <dl class="message-properties"> | ||
| <dt>Text <span class="property-type">any</span></dt> | ||
| <dd>Will render the raw value provided, without any modification or formatting</dd> | ||
| <dt>HTML <span class="property-type">string</span></dt> | ||
| <dd>Respects new line breaks (e.g. <code>\n</code>) and basic HTML tags.</dd> | ||
| <dt>Link <span class="property-type">url</span></dt> | ||
| <dd>Renders the cell as a hyperlink. The "Link" value provided should be a valid URL.</dd> | ||
| <dt>Color <span class="property-type">color</span></dt> | ||
| <dd>Renders the cell as a colored box. The "Color" field should contain a valid CSS color.</dd> | ||
| <dt>Tick/Cross <span class="property-type">boolean</span></dt> | ||
| <dd>Renders the cell as a tick or cross. The "Value" field should contain a boolean value.</dd> | ||
| <dt>Progress <span class="property-type">number</span></dt> | ||
| <dd>Renders the cell as a progress bar. The `Value` field should contain a number between 0 and 100.</dd> | ||
| <dt>Sparkline - Trend <span class="property-type">array</span></dt> | ||
| <dd>Renders the cell as a small line chart without axes. The value should be an array of numbers to be plotted.</dd> | ||
| <dt>Sparkline - Bar <span class="property-type">array</span></dt> | ||
| <dd>Renders the cell as a small bar chart without axes. The value should be an array of numbers to be plotted.</dd> | ||
| <dt>Row Number <span class="property-type">number</span></dt> | ||
| <dd>Requires no "key" to be provided as this will just render the row number (1 -> n).</dd> | ||
| </dl> | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.