Data Column

<flow-data-column>

Stable

The data column component is used with the data table component to specify column options.

See Data Table for examples of how to use the data column component.

Each data column component must specify the property attribute to determine which data object property to display. Other attributes control:

• Formatting of the data
• Alignment
• Column width
• Whether the column supports sorting UI

To set the formatting of numeric columns, set format to a D3 format string (opens new window).

Set format to icon to interpret the cell value as an icon name and display an icon.

Alternatively format can be set to a custom formatting function that accepts the cell value as an argument and should return a string.

...
<flow-data-column format=".1d" ...></flow-data-column>
<flow-data-column format="icon" ...></flow-data-column>
<flow-data-column id="custom-format-col" ...></flow-data-column>
...
document.getElementById('custom-format-col').format = val => `${val} widgets`;

Properties

Property	Description	Type	Default
align	The column alignment.	"center" | "left" | "right"	'left'
format	Specify a data formatting string or custom format function.	((data: any) => string) | string
name	The name of the table column.	string
property	The data object property to display in this column.	string
sortable	Set to `true` to enable column sorting controls.	boolean	false
width	The column width (with CSS units).	string	null

Events

Event	Description	Type
flowChange	Emitted when the column properties are changed.	any