diff --git a/docs/config-ref.md b/docs/config-ref.md index 2d6ae0c..5a0a71f 100644 --- a/docs/config-ref.md +++ b/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' diff --git a/docs/example-cfg-simple-cell-formatting.md b/docs/example-cfg-simple-cell-formatting.md index b2e4997..6dad127 100644 --- a/docs/example-cfg-simple-cell-formatting.md +++ b/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) diff --git a/flex-table-card.js b/flex-table-card.js index 3eb0452..fbf780e 100644 --- a/flex-table-card.js +++ b/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(``); + } 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();