Support entity device and area

docs/example-cfg-data.md

@@ -10,6 +10,8 @@ for the assigned value of `data`:
 * `name` = *friendliest name* will be selected
 * `object_id` = full entity *path* without domain
 * `icon` = renders the entity's current icon (`entity.attributes.icon`) into the cell
+* `device` = name of the device that the entity belongs to, if available
+* `area` = name of the area that the entity or its device is assigned to, if available
 * `_state`= is a *hack* to be able to select `entity.attributes.state` as data
 * any `key in this.entity` (e.g., `entity_id`, `state`, ...)
 * otherwise a key within `this.entity.attributes` will be assumed 
@@ -28,6 +30,8 @@ for being an `Array.isArray()`).
 each one using a comma `,`. If multiple selectors are used the resulting data is concatenated using 
 `multi_delimiter`, which defaults to a whitespace ' '.
 
+Note that even if a `device` or an `area` is defined for an `entity`, it may not be available for `flex-table` to display.
+
 ### Migration from versions < 0.7
 Since version 0.7 the old selectors (`attr`, `prop`, `attr_as_list`, `multi`) are all replaced by
 `data`, which is a don't care & drop-in replacement for the old selectors. In particular `attr`, 

flex-table-card.js

@@ -287,6 +287,12 @@ 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 === "area") {
+                        // 'area' will show the entity's or its device's assigned area, if any
+                        raw_content.push(this._get_area_name(this.entity.entity_id, hass));
+                    } else if (col_key === "device") {
+                        // 'device' will show the entity's device name, if any
+                        raw_content.push(this._get_device_name(this.entity.entity_id, hass));
                     } else if (col_key === "state" && config.auto_format && !col.no_auto_format) {
                         // format entity state
                         raw_content.push(hass.formatEntityState(this.entity));
@@ -394,6 +400,26 @@ class DataRow {
         return null;
     }
 
+    _get_device_name(entity_id, hass) {
+        var device_id;
+        if (hass.entities[entity_id] !== undefined) {
+            device_id = hass.entities[entity_id].device_id;
+        }
+        return device_id === undefined ? "-" : hass.devices[device_id].name_by_user || hass.devices[device_id].name;
+    }
+
+    _get_area_name(entity_id, hass) {
+        var area_id;
+        if (hass.entities[entity_id] !== undefined) {
+            area_id = hass.entities[entity_id].area_id;
+            if (area_id === undefined) {
+                let device_id = hass.entities[entity_id].device_id;
+                if (device_id !== undefined) area_id = hass.devices[device_id].area_id;
+            }
+        }
+        return area_id === undefined || hass.areas[area_id] === undefined ? "-" : hass.areas[area_id].name;
+    }
+
     render_data(col_cfgs) {
         // apply passed "modify" configuration setting by using eval()
         // assuming the data is available inside the function as "x"