config-ref.md

Configuration

The flex-table-card 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
• lots of possibilities for configuration: entity selection (include, exclude), (hidden-)column-sorting, js-based content manipulation, row limiting and more...

Flex Table gives you the possibility to visualize any tabular data within Lovelace. Especially overviews with high data densities can be easily realized. Some screenshots:

Configuration Options

Top-level options

Name	Type	Required?	Description
type	string	required	custom:flex-table-card
title	string	optional	A title for the card
strict	boolean	optional	If true, each cell must have a match, or row will be hidden example
sort_by[-|+]	col-id	optional	Sort by given column, '+' (ascending) or '-' (descending) example
max_rows	int	optional	Restrict the number of (shown) rows to this maximum number
clickable	boolean	optional	Activates the entities' on-click popup dialog
css	section	optional	Modify the CSS-style of this flex-table instance (css example)
- ...	item(s)	optional
entities	section	required	Section defining the entities, i.e., data sources (see below)
- ...	item(s)	required
columns	section	required	Section defining the column(s) and its contents (see below)
- ...	item(s)	required

entities options (2nd level): selection / querying / filtering

option	Type	Required?	Description
include	regexp	required	Defines the initial entity data source(s) basics
exclude	regexp	optional	Reduces the included data sources(s)

auto-entities are also supported, see the examples.

css options (2nd level): css adaptations

option	Type	Required?	Description
<css_selector>	string	optional	the original <css_selector> will be replaced with option's value
<css_selector>+	string	optional	<css_selector>'s contents are appended to the existing <css_selector>;

columns options (2nd level): header definition, column identifcation

option	Type	Required?	Description
name	string	optional	column header
id	string	optional	unique identifier e.g., to sort one of multiple equally referencing cells

If neither name nor id is set the identifier for the column will be derived from the content definition. Apart from sort_by no other option requires referencing of this identifier, for easy referencing by sort_by it is considered best practice to set id and use it for sort_by. More details and examples

columns options (2nd level): visibility, cell formatting, content manipulation

option	Type	Required?	Description
data	string	required	selector for data to be shown, see column data examples
hidden	bool	optional	true to avoid showing the column (e.g., for sorting)
icon	string	optional	use icon inside header (left of name), typical mdi:something (cheatsheet)
modify	string	optional*	apply java-script code, x is data, i.e., (x) => eval(<modfiy>)
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
multi_delimiter	string	optional	defaults to ' ', concat multiple selector-data using this string
fmt	string	optional	format using predefined 'formatters'

*Use modify with caution and on your own risk only. This will directly execute code using eval(), which is by definition a safety risk. Especially avoid processing any third party APIs / contents with flex-table-card using the modify parameter, only apply this parameter, if you are 100% sure about the contents and origin of the data. Apart from that modify is very powerful, see advanced cell formatting.

Currently the available *formatters are:

• full_datetime
• hours_passed
• hours_mins_passed
• number
• duration
• duration_h

Feel free to contribute, just share your best modify line to allow others to use them, too.

Return to main README.md