# 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.

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

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

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-e7eda983ac06ab503361efe07311c04cca8d9b5f%2Fobject-table-style-example.png?alt=media)

For a complete list of available properties see the [Full list of styles](#full-list-of-styles) section below.

### As individual styles

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

```javascript
function isBoldStyle(object){
   return true;
}
```

For a complete list of available properties see the [Full list of styles](#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.

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

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-b378b000a289c42a978a6e1864b737cc37f70cc9%2Fobject-table-column-style-example.png?alt=media)

{% hint style="info" %}
**Note**: It is possible to combine both row level and cell level style attributes.
{% endhint %}

### Full list of styles

The following is the complete list of supported styles available:

<table><thead><tr><th width="205">JSON Syntax</th><th>Attribute Syntax</th><th></th><th>Description</th></tr></thead><tbody><tr><td><code>align</code></td><td><code>[`style-align`](../#style-align)</code></td><td><code>left</code>, <code>right</code>, <code>center</code></td><td>Align the text content inside a cell to the left, right or center</td></tr><tr><td><code>color</code></td><td><code>[`style-color`](../#style-color)</code></td><td>string</td><td>Color of the text</td></tr><tr><td><code>iconColor</code></td><td><code>[`style-icon-color`](../#style-icon-color)</code></td><td>string</td><td>Color of icon on the left of the cell</td></tr><tr><td><code>bold</code></td><td><code>[`style-bold`](../#style-bold)</code></td><td>boolean</td><td>Makes the text <strong>bold</strong> or normal weight</td></tr><tr><td><code>italics</code></td><td><code>[`style-italics`](../#style-italics)</code></td><td>boolean</td><td>Makes the text <em>italic</em> or normal weight</td></tr><tr><td><code>underline</code></td><td><code>[`style-underline`](../#style-underline)</code></td><td>boolean</td><td>Makes the text underlined</td></tr><tr><td><code>strikethrough</code></td><td><code>[`style-strikethrough`](../#style-strikethrough)</code></td><td>boolean</td><td>Makes the text have a strikethrough</td></tr><tr><td><code>backgroundColor</code></td><td><code>[`style-background-color`](../#style-background-color)</code></td><td>string</td><td>The background color of the entire cell</td></tr></tbody></table>

### 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`.

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

```javascript
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.

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

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-e1e5af64773906dc74d1efab8c27c0cac68fccf3%2Fobject-table-column-icon.png?alt=media)

{% hint style="info" %}
**Tip:** This is particularly useful for status indicators in tables.
{% endhint %}