Headers and footers
Column headings
The card determines the heading of a column in this order:
1.name 2.id 3.data
yaml
columns:
- name: Geraet
data: name
- id: battery
data: state
- data: area1
2
3
4
5
6
2
3
4
5
6
An empty heading is possible:
yaml
columns:
- name: ""
data: icon1
2
3
2
3
Icons in the header
yaml
columns:
- name: Batterie
icon: mdi:battery
data: state
align: right1
2
3
4
5
2
3
4
5
The alignment of the cells also affects the alignment of the header.
Activate footer
yaml
display_footer: true1
You can then specify for each column what is calculated or displayed in the footer.
| Value | Meaning |
|---|---|
sum | Total |
average | Average |
count | Number |
max | highest value |
min | lowest value |
text | fixed text |
Example with totals line
yaml
type: custom:flex-table-card
title: Werte nach Land
entities: []
display_footer: true
columns:
- name: Land
data: rows.country
footer_type: text
footer_text: "Gesamt:"
- name: Wert
data: rows.value
fmt: number
align: right
footer_type: sum
footer_modify: x.toFixed(0)
static_data:
rows:
- country: Deutschland
value: 120
- country: Frankreich
value: 901
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Design footer using CSS
yaml
css:
tfoot th: "text-align: right; font-weight: 700;"
tfoot *: "border-style: solid none none none;"1
2
3
2
3
Original example image: FlexTableFooterExample.png