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>

Full list of styles

The following is the complete list of supported styles available:

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>