I have now used functions for the ‘type’ column. This fixes a problem I had sorting by this column and also highlights the type as red if down.
Using functions may have appeared in this thread already, and I missed it but this useful ‘issue’ in the Github project gives some additional pointers for Flex
https://github.com/custom-cards/flex-table-card/issues/75
My revised configuration follows:
type: custom:flex-table-card
title: Fing Devices
entities:
- sensor.fing_devices_table
sort_by: x.name+
display_footer: true
columns:
- name: Name
data: devices
modify: >-
if (x.name && x.name.length > 0) {'<div style="font-weight: bold;">' +
x.name +'</div>'} else {'-'}
fallback: N/A
- name: MAC Address
data: devices
modify: if (x.mac && x.mac.length > 0) {x.mac} else {'-'}
fallback: N/A
- name: IP Address
data: devices
modify: if (x.ip[0] && x.ip[0].length > 0) {x.ip[0]} else {'-'}
fallback: N/A
footer_type: text
footer_text: Down/All
- data: devices
name: " "
align: center
modify: |-
var StateCount = 0;
if (x.state =='UP')
StateCount = 0;
if (x.state =='DOWN')
StateCount = 1;
StateCount
footer_type: sum
fallback: Unknown
- data: devices
name: " "
icon: mdi:arrow-up-drop-circle-outline
align: center
modify: |-
var ICON = 'mdi:arrow-up-drop-circle-outline';
var ICONCOLOR = 'color:green';
if (x.state =='UP')
ICON = 'mdi:arrow-up-drop-circle-outline';
if (x.state =='UP')
ICONCOLOR = 'color:green';
if (x.state =='DOWN')
ICON = 'mdi:arrow-down-drop-circle-outline';
if (x.state =='DOWN')
ICONCOLOR = 'color:red';
'<ha-icon icon="' + ICON + '" style="' + ICONCOLOR + '">'
footer_type: count
fallback: Unknown
- name: Type
data: devices
modify: >-
function getTypeColor(aLevel) {
if (aLevel == undefined)
return 'brown';
else
{
if (aLevel == 'DOWN')
return 'red';
else
if (aLevel == 'BLOCKED')
return 'rgb(250,218,67)';
else
return 'green';
}
}
function getTypeIcon(aLevel) {
var icon;
if (aLevel == undefined)
icon = 'mdi:help-circle-outline';
else if (aLevel == 'DESKTOP')
icon = "mdi:monitor";
else if (aLevel == 'GATEWAY')
icon = "mdi:hub-outline";
else if (aLevel == 'LAPTOP')
icon = "mdi:laptop";
else if (aLevel == 'LIGHT')
icon = "mdi:lightbulb-outline";
else if (aLevel == 'LOUDSPEAKER')
icon = "mdi:speaker-wireless";
else if (aLevel == 'MEDIA_PLAYER')
icon = "mdi:play-network-outline";
else if (aLevel == 'MOBILE')
icon = "mdi:cellphone";
else if (aLevel == 'NAS_STORAGE')
icon = "mdi:nas";
else if (aLevel == 'PRINTER')
icon = "mdi:printer";
else if (aLevel == 'RADIO')
icon = "mdi:radio";
else if (aLevel == 'RASPBERRY')
icon = "mdi:raspberry-pi";
else if (aLevel == 'ROUTER')
icon = "mdi:router";
else if (aLevel == 'SMART_CONTROLLER')
icon = "mdi:hub";
else if (aLevel == 'SMART_HOME')
icon = "mdi:home-outline";
else if (aLevel == 'SMART_PLUG')
icon = "mdi:power-plug-outline";
else if (aLevel == 'STB')
icon = "mdi:set-top-box";
else if (aLevel == 'SURVEILLANCE_CAMERA')
icon = "mdi:cctv";
else if (aLevel == 'TABLET')
icon = "mdi:tablet";
else if (aLevel == 'TELEVISION')
icon = "mdi:television";
else if (aLevel == 'VOICE_CONTROL')
icon = "mdi:account-voice";
else if (aLevel == 'WIFI')
icon = "mdi:wifi";
else if (aLevel == 'WIFI_EXTENDER')
icon = "mdi:wifi-sync";
else
icon = "mdi:help-circle-outline";
return (icon);
}
'<ha-icon icon="' + getTypeIcon(x.type) + '" style="width: 20px; height: 20px; color: ' + getTypeColor(x.state) + ';"></ha-icon>'
align: center
fallback: N/A
- name: Make
data: devices
modify: if (x.make && x.make.length > 0) {x.make} else {'-'}
fallback: N/A
- name: Model
data: devices
modify: if (x.model && x.model.length > 0) {x.model} else {'-'}
fallback: N/A
- name: First Seen
data: devices
modify: |-
if(x.first_seen == undefined)
{"-"}
else {
var date = new Date(x.first_seen);
String(date.getDate()).padStart(2,'0')+"/"+
(String(date.getMonth()+ 1).padStart(2,'0'))+"/"+
date.getFullYear()+
" "+
String(date.getHours()).padStart(2,'0')+":"+
String(date.getMinutes()).padStart(2,'0')+":"+
String(date.getSeconds()).padStart(2,'0')
}
- name: Last Changed
data: devices
modify: |-
if(x.last_changed == undefined)
{"-"}
else {
var date = new Date(x.last_changed);
String(date.getDate()).padStart(2,'0')+"/"+
(String(date.getMonth()+ 1).padStart(2,'0'))+"/"+
date.getFullYear()+
" "+
String(date.getHours()).padStart(2,'0')+":"+
String(date.getMinutes()).padStart(2,'0')+":"+
String(date.getSeconds()).padStart(2,'0')
}
css:
tbody tr td+: ""
tbody tr td:nth-child(4)+: "opacity: 0.0; border-style: none none none none;"
tfoot *: "border-style: none none none none;"