# Servoy Extra Component Table

**URL:** <https://forum.servoy.com/t/servoy-extra-component-table/20505>\
**Category:** Questions\
**Created:** [May 25, 2021, 9:04am UTC](https://forum.servoy.com/t/servoy-extra-component-table/20505 "2021-05-25T09:04:46Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![dev-ws-011](https://avatars.discourse-cdn.com/v4/letter/d/ac8455/32.png) [@dev-ws-011](https://forum.servoy.com/u/dev-ws-011)\
**Post date:** [May 25, 2021, 9:04am UTC](https://forum.servoy.com/t/servoy-extra-component-table/20505/1 "2021-05-25T09:04:46Z")

</div>

Hi All,

I have been working with Servoy Extra Component ‘Table’ for being simple and light weight component.  
But I am facing some issues while providing fontawesome icons to header style of columns:

- Header is disturbed if fontawesome is provided to a column
- Header arrangement is moved irrespective of columns i.e. header is shown in 2 lines (upper line displays fontawesome icon and bottom line displays header text)
- Also, some free fontawesome icons are not displayed e.g. fas fa-external-link-alt, fas fa-key.

Any help will be highly appreciated.

Regards

---

<div class="post-metadata">

**Author:** ![Andrei\_Costescu](https://avatars.discourse-cdn.com/v4/letter/a/e36b37/32.png) [@Andrei\_Costescu](https://forum.servoy.com/u/Andrei_Costescu)\
**Post date:** [May 26, 2021, 6:55am UTC](https://forum.servoy.com/t/servoy-extra-component-table/20505/2 "2021-05-26T06:55:27Z")

</div>

You tried using headerStyleClass I guess. And that maps to whole th and font-awsome classes don’t work as expected on that element in extra-table.  
You should [create a feature request](https://support.servoy.com) for supporting this nicely in extra-table.

You could also hack this in via solution css/less but it’s ugly (basically targets the correct div and copies the actual style from inside the font-awsome classes). For example if you would set in headerStyleClass of a column in properties view “extraTableHeader-fa-arrow-circle-left” and you’d add something like this to solution .less/css file, it would work:

```auto
// Hacks for putting font-awsome icons in extra-table column header; basically we copy the styles of classes "fas" and the actual icon class (from font-awsome 5 generated "all.css") into
// a selector that matches on the given column header text div"; it would be nicer to use .less extends api to extend those classes but those are
// not in a .less file so it doesn't' work'; but this should be handled better inside the extra-table component to allow ppl. to just set icon class
// directly on the column definition in properties view

.extraTableHeader-fa-arrow-circle-left div div .table-servoyextra-header-label:before {
  content: "\f0a8";
}
  
.extraTableHeader-fa-arrow-circle-left div div .table-servoyextra-header-label {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}

```

But as I said, please file a feature request for this - to make it nice.