custom-cards/flex-table-card

Highly Flexible Lovelace Card - arbitrary contents/columns/rows, regex matched, perfect to show appdaemon created content and anything breaking out of the entity_id + attributes concept

Flex Table

Installation using HACS (Home Assistant Community Store)

• Use HACS inside your frontend, if unavailable here is how to install HACS
• Search for flex-table, hit install, done!
• Add the appropriate lines as provided by HACS to your lovelace ui config

Installation (as quick, only manual updates, better for developers)

• Find your home-assistent config-dir (e.g., ~/.homeassistant/) and change into ~/.homeassistant/www (create if needed)
• Run $ wget https://raw.githubusercontent.com/custom-cards/flex-table-card/master/flex-table-card.js to get the .js file
• Add at the top of your UI Lovelace config (via lovelace ui config or within .yaml)

resources:
  - type: module
    url: /local/flex-table-card.js

Quick-Start & Documentation

• Quick-Start
• (Configuration) Examples
  • Basics
  • Column Data Selector
  • Formatting
  • Sorting & Strict
  • Headers
  • Advanced Cell Formatting
  • Formatting with CSS
  • Auto Entities
  • Loading from Services
• Configuration Reference
• How to Contribute

flex-table-card's Issues

[Feature Request] Format an attribute based on its value

I use the Flex-Table to display a connection overview of the next three train connections including possible delays.

I'm looking for a way to format the delay depending on the value:
0..4 min - green
5..9 min - yellow
10 .. min - red

Is that already possible?

Request: Pretty Last Changed Property

Thanks for this card, one feature request: Can you add in some jinja timestamp magic to prettify the "last_changed" property (something like "April 26, 2020, 11:15" or "3 hours, 56 minutes ago")?

`strict` does not work as expected combined with `suffix`

If there is no result for a specific cell using strict shall remove the full row.
Right now if suffix is also used within this cell/column the row seems not to be removed.

user_given_name is obsolete, changing to friendly_name not working

zha-network-card.js change:

change all occurances of "user_given_name" to "friendly_name" not working.

How can I achieve this?

// collect the "raw" data from the requested source(s) if ("attr" in col) { return col.attr in this.device.attributes ? this.device.attributes[col.attr] : null; } else if ("prop" in col) { if (col.prop == "object_id") { return this.device.attributes.device_reg_id; } else if (col.prop == "name") { // handle device name customization if ( "user_given_name" in this.device.attributes && this.device.attributes["user_given_name"] ) { return this.device.attributes.user_given_name; } else { return this.device.attributes.name; } } else if (col.prop == "nwk") {

How to display attribute named 'state' ?

By using - data: state I've got state value, but need to display attribute with name state.

Pls help with that. Thank You very much.

Cannot read property 'setConfig' of undefined

Home Assistant 2021.1.5
flex-table-card var VERSION = "0.6.1";

Installed flex-table-card via HACS. Shows up as expected under repositories and card is enabled but cannot be used.

Throws the following error in the GUI editor;
Cannot read property 'setConfig' of undefined

sort_by doesnt seem to work with attributes list

Sort_by function doesnt seem to work with x. data sources.
In the example below, adding or removing "sort_by" doesnt change the output at all.
I have also tried using: data, data.best_before_date, data.x.best_before_date as a parameter for sort_by without any luck
Here's my lovelace card:

columns:
  - data: items
    name: Product
    modify: x.name
  - data: items
    name: Amount
    modify: x.available_amount
  - data: items
    name: Expiring
    modify: x.best_before_date
sort_by: x.best_before_date
entities:
  include: binary_sensor.grocy_expired_products
title: Expiring products
type: 'custom:flex-table-card'

and the example data:

items: 
- name: Nuts - Brazil Nuts - Alesto
  id: 16
  product_group_id: null
  available_amount: 2
  best_before_date: '2020-07-12T00:00:00+00:00'
  barcodes:
    - '20202392'
  amount_missing: null
  is_partly_in_stock: null
- name: Nutmeg Extract
  id: 53
  product_group_id: null
  available_amount: 1
  best_before_date: '2017-07-22T00:00:00+00:00'
  barcodes:
    - '740101219146'
  amount_missing: null
  is_partly_in_stock: null
- name: Quinoa Puffed - Golden Sun
  id: 66
  product_group_id: null
  available_amount: 1
  best_before_date: '2019-02-28T00:00:00+00:00'
  barcodes:
    - '20897789'
  amount_missing: null
  is_partly_in_stock: null
- name: Pasta Conchiglie - Combino
  id: 71
  product_group_id: null
  available_amount: 1
  best_before_date: '2020-06-05T00:00:00+00:00'
  barcodes:
    - '20501198'
  amount_missing: null
  is_partly_in_stock: null
- name: Pasta Egg Spatzle - Combino
  id: 75
  product_group_id: null
  available_amount: 1
  best_before_date: '2017-08-14T00:00:00+00:00'
  barcodes:
    - '20049997'
  amount_missing: null
  is_partly_in_stock: null
- name: Rice Paella - Morrisons
  id: 76
  product_group_id: null
  available_amount: 1
  best_before_date: '2018-02-28T00:00:00+00:00'
  barcodes:
    - '5010251461289'
  amount_missing: null
  is_partly_in_stock: null
- name: 'Soba Noodles - Vitasia '
  id: 85
  product_group_id: null
  available_amount: 1
  best_before_date: '2020-02-28T00:00:00+00:00'
  barcodes:
    - '20561864'
  amount_missing: null
  is_partly_in_stock: null
- name: Honey - Miód wielokwiatowy - Favorit
  id: 111
  product_group_id: null
  available_amount: 1
  best_before_date: '2016-07-28T00:00:00+00:00'
  barcodes:
    - '4770148229361'
  amount_missing: null
  is_partly_in_stock: null
- name: 'Krem do Gulaszu - Univer '
  id: 117
  product_group_id: null
  available_amount: 1
  best_before_date: '2020-08-12T00:00:00+00:00'
  barcodes:
    - '5997010302024'
  amount_missing: null
  is_partly_in_stock: null

Unused entities does not work together with this card

With this config added:

- type: 'custom:flex-table-card'
    sort_by: battery_level+
    strict: true
    title: Battery Levels
    entities:
      exclude:
        - unknown_device
      include: zwave.*
    columns:
      - attr: node_id
        name: NodeID
      - name: Name
        prop: name
      - attr: battery_level
        name: Battery Level (%)

The Unused Entities view in lovelace does not work. (page is just blank)
Gives this error in console:

c51eb71de175ca5b2bc6.chunk.js:1 Uncaught (in promise) TypeError: obj.entities.forEach is not a function
    at addEntities (c51eb71de175ca5b2bc6.chunk.js:1)
    at obj.cards.forEach.card (c51eb71de175ca5b2bc6.chunk.js:1)
    at Array.forEach (<anonymous>)
    at addEntities (c51eb71de175ca5b2bc6.chunk.js:1)
    at config.views.forEach.view (c51eb71de175ca5b2bc6.chunk.js:1)
    at Array.forEach (<anonymous>)
    at computeUsedEntities (c51eb71de175ca5b2bc6.chunk.js:1)
    at computeUnusedEntities (c51eb71de175ca5b2bc6.chunk.js:1)
    at HTMLElement._createElement (c51eb71de175ca5b2bc6.chunk.js:12)
    at HTMLElement.set hass [as hass] (c51eb71de175ca5b2bc6.chunk.js:1)

Question/Feature request: exclude results from table?

I see its possible to exclude entities, but is it possible to exclude a row based on a value (which may come from an attribute)?

Thanks.

Feature Request: Style based on cell contents

It would be great to be able to apply styles(think card-mod or card-modder) to cells based on their contents. For example I have a table showing device status for wireless sensors and I'd like to be able to color the cell text red if the cell entry is "disconnected"

Eval is evil

When displaying external sensor data (e.g. fetched from an API) the usage of eval will execute malicious code in the context of the trusted HA user interface. I know that this probably very far-fetched but I strongly support the plan to

allow "prefix" and "suffix" for each column to add units or similar stuff, means a simplified version of "modify"

And drop eval completely.

here somehow avoid that a 'null' is string-converted

flex-table-card/flex-table-card.js

Lines 164 to 168 in 3ec416d

	// @todo: here somehow avoid that a 'null' is string-converted
	raw_content = raw_content.map((obj) => String(obj)).join(delim);
	else
	raw_content = raw_content[0];
	return raw_content;

---

This issue was generated by todo based on a todo comment in 3ec416d. It's been assigned to @daringer because they committed the code.

sort - by integer

I am sorting by the state column that is a string but have an integer value, and the sort is not correct:
195
354
4

Question/Feature request: joining entity attributes in one column?

I'm playing with your custom card to make a table that lists some part of my devices, checking it's state, last_changed date & time etc. and because I want to put it in popup window, in lovelace ui that's designed for phone screens, I have kinda limited space ;)

so right now it's easy to have a regular table, one attribute for a column:

Device	State	Change	EntityID
friendly name	online	2020-02-01, 17:00	device.some_name

and I can of course change color of state text based on it's,, state :) so I have green online and red-background, white-letters offline.

now things are getting tricky, as I wanted to do something like this:

Device	Change
friendly name / device.some_name	2020-02-01, 17:00

where device.some_name is displayed as a secondary line below the friendly_name and additionaly if device is offline, I'd like to change the friendly_name's color to red.

while I know how to concatenate or replace strings to have two lines of text, or to change some color, I'm having troubles with figuring out how to configure column so I can put name and entity_id together in one.

first I thought that attr_as_list is what I'm looking for but either I can't understand the proper usage, or it isn't that.

ok, so after this long introduction:

• if attr_as_list is the solution can you please point me to the right direction, giving an example of combining state & last_changed with "regular attributes" (like those visible in the developer/state tab) - in one column?
• if attr_as_list is not the solution - do you think it would be plausible to add that feature?

phew, I'm only hoping, that I didn't complicate the above post/question - english isn't my first language and while I'm 100% sure what I wanted to say/wrote, I'm not that sure I correctly wrote that down ;)

Adding CSS selectors to specific rows based on attribute

Similar to sorting it would be nice if one could add a CSS selector based on an attribute of the entity, that way it would be possible to apply different styling to rows based on the selector.

For example:

type: 'custom:flex-table-card'
entities:
  include: sensor.example.*
columns:
  - prop: state
    name: 'Status'
    as_css_selector: 'tr' # apply state as css selector for row
css:
  tr.state-on: 'color: green' # to make the font of rows with the .state-on selector green
  tr.state-off: 'color: gray' # to make the font of rows with the .state-off selector gray

[Question] How to display list of dicts?

I'm trying to display information about outdated HACS components. For this, I have defined some sensors (basically following this approach) which provide the outdated repositories. Thus, with Development Tools/Template, the statement {{ (state_attr('binary_sensor.hacs_update_issues', 'status')).repositories }} results in the following output:

[{'name': 'FL550/dwd_weather', 'display_name': 'Deutscher Wetterdienst', 'installed_version': 'v1.2.1', 'available_version': 'v1.2.2'}, {'name': 'briis/weatherbit', 'display_name': 'Weatherbit Weather Forecast for Home Assistant', 'installed_version': 'v0.34', 'available_version': 'v0.34.1'}]

I'm then trying to use the following code for the UI part:

type: 'custom:auto-entities'
card:
  type: 'custom:flex-table-card'
  title: Pending HACS updates
  columns:
    - name: Component
      data: display_name
    - name: Current version
      data: installed_version
    - name: Latest version
      data: available_version
  sort:
    method: attribute
    attribute: display_name
filter:
  template: >
    {{ (state_attr('binary_sensor.hacs_update_issues', 'status')).repositories }}

However, no rows are shown. The same is true for the following template I tried.

    {%- for repository in (state_attr('binary_sensor.hacs_update_issues', 'status')).repositories -%}
      {{ repository}},
    {%- endfor -%} 

Is what I'm doing possible at all with flex-table-card? Thanks in advance...

Row background color

Love the card.
Seems like it would make sense to align the row background color choises with what HA uses for their tables: table-row-background-color and table-row-alternative-background-color instead of paper-card-background-color and secondary-background-color. Makes creating themes much easier.

[PROBABLY NOT A REAL BUG] formatting - like a space after a comma - can break column data selector

not a big deal [even if I've fought with errors for an hour just to find out about that ;)] and also maybe "it's just me", but while configuring multi-data column, with data:, a space is interpreted as part of the column name. I'm just posting this in case someone would encounter the same issue.

let's say I have entity with the string-attribute sensor_id and numeric-attribute sensor_readout, now this example:

data: sensor_id,sensor_readout
multi_delimiter: "|"

outputs: "abc|123"

but when I add a space after the comma (thanks to my OCD and work-related-habits to help with formatting):

data: sensor_id, sensor_readout
multi_delimiter: "|"

this outputs:: "abc|null"

as it treats space as a part of second column probably.

I know, that example given in documentation is without a space, but first I just thought that it was an accident ;)

Area of entity

When I add a column with data, I would like to be able to fill the column with the entity assigned area

column sorting problem

hello, I am trying to make a table with some sensors with yearly energy value. but for some reason, the sorting is not working.

https://imgur.com/2zYJbY9

Also instead of a friendly name of a sensor, is it possible to use a custom name of the sensor?

Unused entities list empty

Hi,

me again :). After playing a bit with the card I noticed that my Unused entities list was no longer shown. After some testing I realised that as soon as I use "include" or "exclude" the list became empty

title: 'Temperature & Humidity'
type: custom:flex-table-card
css:
  table+: "border: 20px solid white; border-collapse: collapse;"
  thead+: "font-size: x-large; color: #44739e"
  td+: "height: 28px;"
  tbody tr:nth-child(even): "background-color: #F5F5F5;"
entities:
  include:
    - sensor.0x00158d00032316c2_temperature
    - sensor.0x00158d000346476a_temperature
    - sensor.0x00158d0002b54177_temperature
    - sensor.0x00158d0002b5b640_temperature
    - sensor.0x00158d0002b5419e_temperature
    - sensor.0x00158d0002b51986_temperature
    - sensor.0x00158d0002b54160_temperature
columns:
  - attr: friendly_name
	icon: mdi:home-variant-outline
  - attr: temperature
	suffix: °C
	icon: mdi:thermometer
	align: right
  - attr: humidity
	icon: mdi:water-percent
	suffix: '%'
	align: right

Howto sort on sensor attributes

First of all thank you for this great custom card. I think it is really useful and has a lot of potential. Not all data fits into a colorful bar/pie/line chart, some things make perfect sense in a table. 🙂

Now, as discussed in issue #4 flex-table-card supports the attributes of a sensor. I query an API that gives me gas prices of some nearby gas stations (diesel + e5). The sensor name is sensor.gas_prices and the attribute name is stations and the payload I read with Jinja template {{ state_attr("sensor.gas_prices","stations") }} looks like this:

[
    {
        "id": "dadfc9a7-3715-453c-af05-d1dc6354843e",
        "name": "Name of station A",
        "brand": "TOTAL",
        "street": "Street name a",
        "place": "City name",
        "lat": 50.123456,
        "lng": 10.123456,
        "dist": 2,
        "diesel": 1.279,
        "e5": 1.359,
        "e10": 1.339,
        "isOpen": true,
        "houseNumber": "3",
        "postCode": 12345
    },
    {
        "id": "ed7869ad-8d7c-4ee6-86fa-6c1d03d5e047",
        "name": "Name of station B",
        "brand": "Shell",
        "street": "Street name b",
        "place": "City name",
        "lat": 50.654321,
        "lng": 10.654321,
        "dist": 3.2,
        "diesel": 1.269,
        "e5": 1.359,
        "e10": 1.319,
        "isOpen": true,
        "houseNumber": "",
        "postCode": 12354
    }
]

And sure enough I can display the values in a table with this YAML config:

type: 'custom:flex-table-card'
title: Gas prices
max_rows: 10
entities:
  include: sensor.gas_prices
columns:
  - name: Station
    attr_as_list: stations
    modify: x.brand
  - name: Diesel
    attr_as_list: stations
    modify: Math.abs(x.diesel).toFixed(2)
  - name: E5
    attr_as_list: stations
    modify: Math.abs(x.e5).toFixed(2)
  - name: Distance
    attr_as_list: stations
    modify: x.dist

But how can I sort on, let's say, the diesel price? Looking at the code it seems that only sensor attribute names are supported. It looks for a value in the attr, prop or attr_as_list field, but the latter always has stations as a value.

Abandoned - Alternative?

Looks like this card has been abandoned - has anyone found a good alternative?

Problem with multiple sensor in 1 row

I would like to see more sensors in each row, in this I would have the name of the sonoff, the sensor of the wifi, the ip sensor, and that of the version of tasmota. How can I do?

Multiple Include, Exclude

Hello,

is there any way for multiple include / exclude?

Thank you

Sorting not correct when using toFixed

Sort by is not sorting as expected. E.g. below list is set to sort by third column - changePercent- but as you can see it is not working out very well.

Aksje	Last	Change %	Last updated
KID	74.60	4.48 %	8/3/2020, 9:49:39 PM
MOWI	169.95	3.75 %	8/3/2020, 9:59:04 PM
GSF	94.00	2.17 %	8/3/2020, 9:58:57 PM
TOM	381.00	2.06 %	8/3/2020, 9:59:05 PM
ENDUR	1.52	14.72 %	8/3/2020, 9:52:41 PM
VEI	125.60	1.95 %	8/3/2020, 9:50:36 PM
STB	50.02	1.21 %	8/3/2020, 9:58:21 PM
AKER	386.20	0.94 %	8/3/2020, 9:58:48 PM
NEL	18.74	0.40 %	8/3/2020, 9:59:04 PM
ASA	114.00	-1.30 %	8/3/2020, 9:38:34 PM
HEX	46.82	-1.10 %	8/3/2020, 9:55:56 PM
NSKOG	28.00	-0.36 %	8/3/2020, 9:59:12 PM

Above is when using the modify to round to a fixed nos. of decimals, e.g. modify: parseFloat(x).toFixed(2). Without using modify on the column, it is sorting just fine:

Aksje	Last	Change %	Last updated
ENDUR	1.52	14.72 %	8/3/2020, 9:52:41 PM
KID	74.60	4.48 %	8/3/2020, 9:49:39 PM
MOWI	169.95	3.75 %	8/3/2020, 9:59:04 PM
GSF	94.00	2.17 %	8/3/2020, 9:58:57 PM
TOM	381.00	2.06 %	8/3/2020, 9:59:05 PM
VEI	125.60	1.95 %	8/3/2020, 9:50:36 PM
STB	50.02	1.21 %	8/3/2020, 9:58:21 PM
AKER	386.20	0.94 %	8/3/2020, 9:58:48 PM
NEL	18.74	0.4 %	8/3/2020, 9:59:04 PM
NSKOG	28.00	-0.36 %	8/3/2020, 9:59:12 PM
HEX	46.82	-1.1 %	8/3/2020, 9:55:56 PM
ASA	114.00	-1.3 %	8/3/2020, 9:38:34 PM

Value 0 is rendered as undefinedundefinedundefined

If an entity has an attribute with value 0 it is not rendered correctly: undefinedundefinedundefined is returned instead:

I believe the problem is here

Request: Manually order entity list

Is it possible to manually set entity order?
for example in the order of the list.

Issues with multiple excludes and regexp

This does not work:

          exclude:
            - light\.fibaro.*
            - light.group_2

When I comment out the second line, it works:

          exclude:
            - light\.fibaro.*
            # - light.group_2

From the docs, multiple excludes should be allowed in a list, right? And the format is regexp.

[documentation] more examples

Hey. Just wanted to raise a feature request regarding the documentation to include more real-life examples. Its really hard to understand how to use flex-table-card and how to make even simplest things with it, especially now when a large part of documentation is about features which were deprecated (attr_as_list).

Documentation request: CSS

Being a total N00b, I don’t understand most part of the documentation.

Could you please document:

• Custom color for a column
• Custom color for a row
• Custom color for column name
• Coloring a cell depending a cell valueCheers.

Access list within attributes

I'm trying to get your card to display data from UK Transport. This sensor returns an attribute next_trains which contains a list of trains, which is the data I'd like to display.

I can access the list via jinja as follows:

{{ state_attr("sensor.next_train_to_wat","next_trains") }}
which returns:

[{'origin_name': 'Weymouth', 'destination_name': 'London Waterloo', 'status': 'ON TIME', 'scheduled': '18:18', 'estimated': '18:18', 'platform': '1', 'operator_name': 'South Western Railway'}, {'origin_name': 'Poole', 'destination_name': 'London Waterloo', 'status': 'EARLY', 'scheduled': '18:25', 'estimated': '18:25', 'platform': '1', 'operator_name': 'South Western Railway'}, {'origin_name': 'Weymouth', 'destination_name': 'London Waterloo', 'status': 'EARLY', 'scheduled': '18:48', 'estimated': '18:48', 'platform': '1', 'operator_name': 'South Western Railway'}, {'origin_name': 'Portsmouth Harbour', 'destination_name': 'London Waterloo', 'status': 'ON TIME', 'scheduled': '18:57', 'estimated': '18:57', 'platform': '1', 'operator_name': 'South Western Railway'}, {'origin_name': 'Weymouth', 'destination_name': 'London Waterloo', 'status': 'EARLY', 'scheduled': '19:18', 'estimated': '19:18', 'platform': '1', 'operator_name': 'South Western Railway'}, {'origin_name': 'Poole', 'destination_name': 'London Waterloo', 'status': 'NO REPORT', 'scheduled': '19:25', 'estimated': '19:25', 'platform': '1', 'operator_name': 'South Western Railway'}, {'origin_name': 'Weymouth', 'destination_name': 'London Waterloo', 'status': 'LATE', 'scheduled': '19:48', 'estimated': '19:50', 'platform': '1', 'operator_name': 'South Western Railway'}, {'origin_name': 'Portsmouth Harbour', 'destination_name': 'London Waterloo', 'status': 'ON TIME', 'scheduled': '19:56', 'estimated': '19:56', 'platform': '1', 'operator_name': 'South Western Railway'}]

How would I display this data with your card?

Grafana?

Realy nice!
I tried to get the data shown in Grafana. Day and hour diagrams.
Any suggestions how?

Renders on every hass update

Hi,

I have added a large table but after adding it the browser was so slow and found the cause to be flex table.
just added this

   set hass(hass) {
        const config = this._config;
        const root = this.shadowRoot;
	console.log('set hass');

and in the chrome developer tools it is refreshing so many times in a second and it is redrawing the whole table.

I think shouldUpdate(changedProps) {... } function should help

Thanks.

Sort only takes into consideration the first digit

I am displaying a list of entities and their states and sorting by state. Whenever an entity hits 2 digits, it seems that this card only takes the first digit into account for sorting.

As soon as that first entity hit a state of 9, it popped to the bottom of the list.

config:

type: 'custom:flex-table-card'
sort_by: state+
title: ZTM
entities:
  include: sensor.ztm*
columns:
  - attr: friendly_name
    name: Number
  - prop: state
    name: Time

[Feature Request] Column totals

Not sure what more you need - happy to test.

When referenced entity attributes doesn't exist, lovelace tab and other cards don't load

In my config I have:

          - cards: null
            columns:
              - align: center
                attr_as_list: next_trains
                modify: x.scheduled
                name: Train Time
              - align: center
                attr_as_list: next_trains
                modify: x.estimated
                name: Est
              - align: center
                attr_as_list: next_trains
                name: Status
                prefix: '<style> cc { color: red; } </style>'
              - align: center
                attr_as_list: next_trains
                name: Delay
                suffix: m
            entities:
              include: sensor.next_train_to_xyz
            icon: 'mdi:train'
            style: |
              ha-card {
                background: #5C4432;
                border-radius: 5px;
              }
            type: 'custom:flex-table-card'

If there are no trains (due to it being late or engineering works that day), the attribute sensor.next_train_to_xyz.next_trains[] does not exist - this stops that entire lovelace tab from loading (i.e. no other cards load on that tab).

TypeError: m[0].map is not a function Error Message

I am trying to set up a simple list table that will take attributes within en entity and list them and am having a problem getting it working. Below is a sample of the attribute and how I have setup the card. I'm running HA 0.90.1. When the invalid function error is displayed, the card disappears from the lovelace screen.

Am I missing something?

I am the developer of the icloud3 device_tracker program (go here for information about it) so I can change the program if something related to how the attribute list & dictionary is set u is needed. My goal is to keep an event log of significant events while determining the location of an iphone and then display them. Since I'm keeping this log im memory, only the last 400 entries will be kept.

jinja query and result:
{{ states.sensor.icloud3_event_log.attributes.eventlog }}

[{'fname': 'Gary', 'time': '14:22:21', 'zone': 'home', 'dist': '0mi', 'trav': '', 'interval': '2 hrs', 'text': 'Command: event_log .'},{'fname': 'Gary', 'time': '14:10:25', 'zone': 'home', 'dist': '0mi', 'trav': '', 'interval': '2 hrs', 'text': 'Update Complete'},{'fname': 'Gary', 'time': '14:10:25', 'zone': 'home', 'dist': '0mi', 'trav': '', 'interval': '2 hrs', 'text': 'IOS App Data Prepared (27.726639,-80.3904565)'},{'fname': 'Gary', 'time': '14:10:25', 'zone': 'home', 'dist': '0mi', 'trav': '', 'interval': '2 hrs', 'text': 'Update via IOS trigger'},{'fname': 'Gary', 'time': '14:10:25', 'zone': 'home', 'dist': '0mi', 'trav': '', 'interval': '2 hrs', 'text': 'Moving back into last zone'},{'fname': 'Gary', 'time': '14:10:25', 'zone': 'home', 'dist': '0mi', 'trav': '', 'interval': '2 hrs', 'text': 'New Trigger Background Fetch @ 14:09:56'},{'fname': 'Gary', 'time': '14:01:51', 'zone': 'home', 'dist': '0mi', 'trav': '', 'interval': '2 hrs', 'text': 'Command: event_log .'},{'fname': 'Gary', 'time': '14:00:10', 'zone': 'home', 'dist': '0mi', 'trav': '', 'interval': '2 hrs', 'text': 'Update Complete'},{'fname': 'Gary', 'time': '14:00:10', 'zone': '', 'dist': '', 'trav': '', 'interval': '0 sec', 'text': 'iCloud Data Prepared (27.72679575618569,-80.39053289340372)'},{'fname': 'Gary', 'time': '14:00:10', 'zone': '', 'dist': '', 'trav': '', 'interval': '0 sec', 'text': 'Zone=not_set'},{'fname': 'Gary', 'time': '14:00:05', 'zone': '', 'dist': '', 'trav': '', 'interval': '0 sec', 'text': 'Cancelled, Old data, Age=9.5m'},{'fname': 'Gary', 'time': '14:00:05', 'zone': '', 'dist': '', 'trav': '', 'interval': '0 sec', 'text': 'iCloud Data Prepared (27.72666067040769,-80.39055797966861)'},{'fname': 'Gary', 'time': '14:00:05', 'zone': '', 'dist': '', 'trav': '', 'interval': '0 sec', 'text': 'Old Location Data'}]

My lovelace card set up

type: custom:flex-table-card
  title: iCloud3 Event Log
  entites:
    include: sensor.icloud3_event_log
  columns:
    - name: Time 
      attr_as_list: eventlog
      modify: x.time
    - name: Zone
      attr_as_list: eventlog
      modify: x.zone
    - name: Dist
      attr_as_list: eventlog
      modify: x.dist

The error displayed in the HA log file
2019-04-01 14:24:12 ERROR (MainThread) [frontend.js.latest.201903210] https://cobbha.duckdns.org/local/custom_lovelace/flex-table-card.js?v=1:4:23 Uncaught TypeError: m[0].map is not a function

Bug/Feature: be more resilient against missing data

most prominent, if attr_to_list is not containing any stuff flex-table-card won't show up and create errors, fix that...

documentation open topics

• fill contribute.md
• add links all over the configuration reference and in between the examples for quick navigation
• add image for each example
• create a separate 'quick-start', instead of linking 'basics'
• add id documentation to sort/strict section #39
• remove deprecated documentation #38
• add hidden example (machine-readable vs. human-readable) to sort/strict section #39

Hacs install lists type as module, should be js

When looking at this component in HACS it says to list the type as module when including it in the list of resources in the yaml. This doesn't work though, it only works when type is js. It says the correct type in the readme of this repo but the HACS guide needs to be updated to match

Feature request: click header to sort

It would be cool if instead of just choosing the sort order once through config, we could click on the header of each column to sort it by that column index.
(the config would still be valid for the default sort)

Feature Request: configurable empty behavior

Allow setting an on_empty configuration parameter to define the output behavior, if no rows are created.

on_empty:
    # to hide the entire flex-table (default: false)
    hide: true
    # if `!hide` show the following text instead of content
    text: "my story why there are no rows to show"
    # do not show the column headers (default: false)
    hide_headers: true

'align' option NOT affect column header - in some case, is it OK ?

flex-table-card version/revision 3395cff

Column obey 'align' option, but header stay left-aligned. Config example and screenshot attached.

              - data: battery
                name: Battery (%)
                align: right
                modify: 'isNaN(parseInt(x, 10)) ? "-" : parseInt(x, 10)'
              - data: voltage
                name: Voltage
                align: right
                modify: 'isNaN(parseInt(x, 10)) ? "-" : parseInt(x, 10)'
...
              th.left: 'padding: 0px 0px 10px 10px'
              th.right: 'padding: 0px 0px 10px 10px'

If change from th.left + th.right to 'just' th, like:

              th: 'padding: 0px 0px 10px 10px'

header alignment follow column:

Patch for auto-entities support

Here's a small patch file to add support for auto-entities. I don't know if it will break something (probably it will), consider this just as a starting point:

--- flex-table-card.js      2020-02-28 11:54:48.465137124 +0100
+++ flex-table-card.js.auto_entities    2020-02-28 12:24:57.992151258 +0100
@@ -186,7 +186,19 @@
             return new RegExp(`^${merged}$`, 'gi');
     }
 
-    _getEntities(hass, incl, excl) {
+    _getEntities(hass, entities, incl, excl) {
+        const format_entities = (e) => {
+            if(!e) return null;
+            if(typeof(e) === "string")
+                return {entity: e.trim()}
+            return e;
+        }
+
+        if (!incl && ! excl && entities) {
+                       entities = entities.map(format_entities);
+            return entities.map(e => hass.states[e.entity]);
+        }
+
         // apply inclusion regex
         const incl_re = listify(incl).map(pat => this._getRegEx([pat])); 
         // make sure to respect the incl-implied order: no (incl-)regex-stiching, collect 
@@ -309,7 +321,7 @@
         const root = this.shadowRoot;
 
         // get "data sources / origins" i.e, entities
-        let entities = this._getEntities(hass, config.entities.include, config.entities.exclude);
+        let entities = this._getEntities(hass, config.entities, config.entities.include, config.entities.exclude);
 
         // `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
@@ -343,3 +355,4 @@
 }
 
 customElements.define('flex-table-card', FlexTableCard);
+

Include / Exclude by properties

I am not sure if it can be done, at least i did not find it in the documentation.

I would like to create auto entities based on an attribute, for example all battery powered devices below 20% capacity, so something like

entities:
include: '*.batterly_level'
condition: state < 20

Is that possible or maybe planned?

Feature Request: Icons instead of name

Hi,

It would be great if we could have an icon as column headers instead of names.

Thanks

Feature Request: Disable borders

Would be nice if possible. Purely asthetic :)

Filter table selection

I cannot find in the documentation the functionality to filter on state or attribute values. For example, only display values like "unavailable" or state between 1 to 10.

Please consider this as a new functionality.. Or make it compatuble with the custom:auto-entities card
https://github.com/thomasloven/lovelace-auto-entities

UPDATE: Cancel this one - did find the docs.

Card size/width

Hey,
is it possible to change/expand the width of the card as my table has about 7 columns