- Find your homeassistent directory containing your configuration (let's say
~/.homeassistant/) - Change into
~/.homeassistant/www $ wget https://raw.githubusercontent.com/custom-cards/flex-table-card/master/flex-table-card.jswill download the.jsfile directly where it should be- Finally, add the following on top of your UI Lovelace configuration (means either via Config UI or .yaml)
resources:
- type: js
url: /local/flex-table-card.js
- Verify that it works with one of the examples below.
"Dirty" here is simply the face that directly wget is used instead of checking out the repository with git as it best practice.
Flex table aims for more flexibility for tabular-ish visuallization needs, by realizing:
- unlimited columns / rows
- various different data-sources may be used in a single table
- higher level of abstraction for content selection
Flex Table gives you the possibility to visualize any tabular data within Lovelace. Especially for overview views high data density can be easily realized, see Screenshots:
Options
Top-level options
| Name | Type | Default | Description |
|---|---|---|---|
| type | string | required | custom:flex-table-card |
| title | string | optional | A title for the card |
| strict | bool | optional | If true, each cell must have a match, or row will be hidden |
| sort_by | col-id | optional | Sort by column (see <content>), append ' ' (ascending) or '-' (descending) |
| max_rows | int | optional | Restrict the number of (shown) rows to this maximum number |
| entities | section | required | Section defining the entity data sources (see below) |
| columns | section | required | Section defining the column(s) (see below) |
2nd-level options: entity selection / querying / filtering
entities |
Type | Default | Description |
|---|---|---|---|
| include | regexp | required | Defines the initial entity data source(s) |
| exclude | regexp | optional | Reduces the included data sources(s) |
2nd-level options: columns definition, each list-item defines a column
columns |
Type | Default | Description |
|---|---|---|---|
| name | string | optional | Column header (if not set, <content> is used) |
| hidden | bool | optional | true to avoid showing the column (e.g., for sorting) |
| modify | string | optional | apply java-script code, x is data, i.e., (x) => eval(<modfiy>) |
| <content> | required | see in column contents below, one of these must exist! |
3rd-level options: column (cell) content definition
column contents |
Type | Description |
|---|---|---|
| attr | regexp | matches to the first attribute matching this regexp |
| prop | string | matches the entity's state members, e.g. state (any from here ) |
| attr_as_list | string | matched attribute is expected to contain a list to be expanded down the table (see table 1, 2 and 3) |
Example
-
configuration of the contents is done by a two step approach
- first the candidate rows have to be queried using wildcarding/regular expressions, leading to a set of entities (candidates)
- eventually for each column a rule has to be given how the matching should happen, matched e.g. attributes will then be exposed as the contents of the row (cells).
- type: custom:flex-table-card
title: may be omitted, to be hidden
# 1st the **canidate** entities will be selected
entities:
include: zwave.*
exclude: zwave.unknown_node*
# 2nd, the *column contents* are defined, there are
# different ways to match contents:
columns:
# example: match entity's attribute(s)
- name: Column Header
attr: receivedTS
# extract only date from string
modify: x.split("T")[0]
- name: More Header
attr: sendTS
# example: match and show the given entity-property
# e.g., the state (incl. any non-attr members)
- name: Next Head
prop: stateFurther I also regulary have the need to transport, store and visualize non-trivial data within the frontend, provided by appdaemon.
I use the variable component, which does simply nothing, despite providing an entity to be written into from appdaemon's side via the set_variable() service.
To keep data ordered, passing a full (py-)list to the service, leads to proper jsonification. But now we've done a reshape for the input data but luckily no problem. Nothing more to adjust than to add a single keyword, with an obvious naming:
- type: custom:flex-table-card
title: Fancy tabular data
# this matches then just the *variable component* entitiy
entities:
include: variable.muell_tracker
# the columns are now similar, just with one match leading
# to severall lines being filled, check the screenshots:
columns:
- name: Date
attr_as_list: due_dates
- name: Description
attr_as_list: descriptionsCurrent Issues / Drawbacks / Plans
- additional colunm selector for a service call maybe
- history / recorder access realization to match for historical data ...
- (click)-able sorting of columns
- entity dialog box activiation on row-click (will be next!)
- find out if cards are allowed to span more width, and if how?
- generally 'functions' might be a thing, a sum/avg/min/max ? but is the frontend the right spot for a micro-excel?