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).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'
}
}
<object-table style-bold="$:isBoldStyle($object)">
...
</object-table>
function isBoldStyle(object){
return true;
}
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.
The following is the complete list of supported styles available:
JSON Syntax | Attribute Syntax | Text | 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 |
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)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.
Last modified 9mo ago