Styles

Styles allow a developer to have fine-grained control over the rendering of a table's cells. Styles can be applied on rows (at an object-table level) and/or on cells (at a column level).

As a single expression (style)

A single function can be used in the style="" attribute to return a single payload of styling information.

<object-table style="$:getRowStyles($object)">
  ...
</object-table>

function getRowStyles(object){
   return {
       align: 'right',
       color: '#8E24AA',
       iconColor: '#ffffff',
       bold: true,
       italics: true,
       underline: true,
       strikethrough: true,
       backgroundColor: '#90CAF9'
    }
}

For a complete list of available properties see the Full list of styles section below.

As individual styles

<object-table style-bold="$:isBoldStyle($object)">
    ...
</object-table>

function isBoldStyle(object){
   return true;
}

For a complete list of available properties see the Full list of styles section below.

Applied on a column level

All the style attributes (both style and style-[property]) can also be applied to a column instead of the object-table. In this case, the styling only applies to cells in that specific column and takes precedence over the styles applied on the object-table level.

<object-table>
    <column style-bold="true">{name}</column>
    ...
</object-table>

Note: It is possible to combine both row level and cell level style attributes.

Full list of styles

The following is the complete list of supported styles available:

JSON Syntax	Attribute Syntax		Description
align	[`style-align`](../#style-align)	left, right, center	Align the text content inside a cell to the left, right or center
color	[`style-color`](../#style-color)	string	Color of the text
iconColor	[`style-icon-color`](../#style-icon-color)	string	Color of icon on the left of the cell
bold	[`style-bold`](../#style-bold)	boolean	Makes the text bold or normal weight
italics	[`style-italics`](../#style-italics)	boolean	Makes the text italic or normal weight
underline	[`style-underline`](../#style-underline)	boolean	Makes the text underlined
strikethrough	[`style-strikethrough`](../#style-strikethrough)	boolean	Makes the text have a strikethrough
backgroundColor	[`style-background-color`](../#style-background-color)	string	The background color of the entire cell

Cell Icons

Cells inside a column can render icons. The icons can either be statically defined or provided as the result of a function that has access to $object.

<object-table>
    <column icon="fa-cube" heading="Static icon">{name}</column>
    <column icon="$:getIcon($object)" heading="Dynamic icon">{name}</column>
    ...
</object-table>

function getIcon(object){
    return "fa-bolt"
}

To change the color of the icon, use the iconColor style (as seen in the full list of available cell styles)

Cells with icons only

It is sometimes desirable to have the content of a cell only be an icon, this can be achieved with fit="shrink" as well as omitting the heading and display attributes.

<object-table>
    ...
    <column icon="fa-cube" fit="shrink" />
    <column icon="fa-bolt" fit="shrink" />
    ...
</object-table>

Tip: This is particularly useful for status indicators in tables.