Add auto format feature

docs/config-ref.md

@@ -20,6 +20,7 @@ Flex Table gives you the possibility to visualize any tabular data within Lovela
 | `disable_header_sort`  | boolean         |   optional    | Disable manual sorting by column headers (default: `false`)
 | `max_rows`             | int             |   optional    | Restrict the number of (shown) rows to this maximum number
 | `clickable`            | boolean         |   optional    | Activates the entities' on-click popup dialog
+| `auto_format`          | boolean         |   optional    | Format state and attribute data using display precision and unit of measurement, if applicable (default: `false`)
 | `css`                  | section         |   optional    | Modify the CSS-style of this flex-table instance [(css example)](https://github.com/custom-cards/flex-table-card/blob/master/docs/example-cfg-css.md)
 | `- ...`                | item(s)         |   optional    | 
 | `entities`             | section         | **required**  | Section defining the entities, either as the *data sources* or for use by a service (see below). If no entities are required for a service, use [] and omit `include/exclude`
@@ -79,6 +80,7 @@ definition. Apart from `sort_by` no other option requires referencing of this id
 | `align`                | enum     |   optional    | text alignment, one of: `left`, `center`, `right` (default: `left`)
 | `prefix`               | string   |   optional    | to be applied _before_ all cell contents 
 | `suffix`               | string   |   optional    | to be appended _after_ all cell contents
+| `no_auto_format`       | boolean  |   optional    | Disable auto formatting for this column when auto_format: true (default: `false`)
 | `multi_delimiter`      | string   |   optional    | defaults to ' ', concat multiple selector-data using this string
 | `fmt`                  | string   |   optional    | format using predefined 'formatters'
 

docs/example-cfg-simple-cell-formatting.md

@@ -1,6 +1,53 @@
 ## Examples - Simple Cell Content Formatting
 
-To render your table according to your needs `flex-table-card` provides
+To use Home Assistant's default formatting for all state and attribute values, use `auto_format`:
+
+``` yaml
+type: custom:flex-table-card
+entities:
+  include: sensor.outdoor_sensor_air_temperature
+auto_format: true
+columns:
+  - name: Outdoor Temperature
+    data: state
+```
+
+Output:
+
+| Outdoor Temperature |
+| ------------------- |
+| 64 °F               |
+
+Values will be formatted using their display precision and unit of measurement, if defined.
+
+You can combine auto and manual (or no) formatting. When using auto formatting, disable auto
+formatting for a single column by adding `no_auto_format` to the column definition:
+
+``` yaml
+type: custom:flex-table-card
+auto_format: true
+entities:
+  include: climate.downstairs
+columns:
+  - name: Name
+    data: name
+  - name: Min. Temp.
+    data: min_temp
+    suffix: " °C"
+    no_auto_format: true
+  - name: Max. Temp.
+    data: max_temp
+    suffix: " (hot!)"
+```
+
+Output:
+
+| Name       | Min. Temp. | Max. Temp.   |
+| ---------- | ---------- | ------------ |
+| DOWNSTAIRS | 44.5 °C    | 95 °F (hot!) |
+
+
+To manually format your table according to your needs, `flex-table-card` provides
 several content formatting configurations allowing simple tweaking of the
 displayed cell contents:
 
@@ -39,7 +86,7 @@ columns:
 The formatting and string manipulation options can be combined with any other
 formatting options, even with `modify`.  Formatting a cell using `align`,
 `prefix`, `suffix` does not alter the cell contents for options like `sort_by`
-or `strict`.  Whilst 'modify' *will* actually alter the cell contents
-**before** `sort_by` or `strict` are processed.
+or `strict`.  Whilst `modify` and `auto_format` *will* actually alter the cell 
+contents **before** `sort_by` or `strict` are processed.
 
 [Return to main README.md](../README.md)

flex-table-card.js

@@ -216,7 +216,7 @@ class DataRow {
     }
 
 
-    get_raw_data(col_cfgs) {
+    get_raw_data(col_cfgs, config, hass) {
         this.raw_data = col_cfgs.map((col) => {
 
             /* collect pairs of 'column_type' and 'column_key' */
@@ -287,12 +287,20 @@ class DataRow {
                         // 'icon' will show the entity's default icon
                         let _icon = this.entity.attributes.icon;
                         raw_content.push(`<ha-icon id="icon" icon="${_icon}"></ha-icon>`);
+                    } else if (col_key === "state" && config.auto_format && !col.no_auto_format) {
+                        // format entity state
+                        raw_content.push(hass.formatEntityState(this.entity));
                     } else if (col_key in this.entity) {
-                        // easy direct member of entity
+                        // easy direct member of entity, unformatted
                         raw_content.push(this.entity[col_key]);
                     } else if (col_key in this.entity.attributes) {
                         // finally fall back to '.attributes' member
-                        raw_content.push(this.entity.attributes[col_key]);
+                        if (config.auto_format && !col.no_auto_format) {
+                            raw_content.push(hass.formatEntityAttributeValue(this.entity, col_key));
+                        }
+                        else {
+                            raw_content.push(this.entity.attributes[col_key]);
+                        }
                     } else {
                         // no matching data found, complain:
                         //raw_content.push("[[ no match ]]");
@@ -673,21 +681,21 @@ class FlexTableCard extends HTMLElement {
                     }
                     entities.push(resp_obj);
                 })
-                this._fill_card(entities, config, root);
+                this._fill_card(entities, config, root, hass);
             });
         }
         else {
             // Use entities to populate
-            this._fill_card(entities, config, root);
+            this._fill_card(entities, config, root, hass);
         }
     }
 
-    _fill_card(entities, config, root) {
+    _fill_card(entities, config, root, hass) {
         // `raw_rows` to be filled with data here, due to 'attr_as_list' it is possible to have
         // multiple data `raw_rows` acquired into one cell(.raw_data), so re-iterate all rows
         // to---if applicable---spawn new DataRow objects for these accordingly
         let raw_rows = entities.map(e => new DataRow(e, config.strict));
-        raw_rows.forEach(e => e.get_raw_data(config.columns))
+        raw_rows.forEach(e => e.get_raw_data(config.columns, config, hass))
 
         // now add() the raw_data rows to the DataTable
         this.tbl.clear_rows();