Servoy Extra Component Table

Forum to discuss the new web client version of Servoy.

Servoy Extra Component Table

Postby dev-ws-011 » Tue May 25, 2021 11:04 am

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.

Servoy Developer
Posts: 66
Joined: Fri Oct 21, 2016 8:23 am

Re: Servoy Extra Component Table

Postby Andrei Costescu » Wed May 26, 2021 8:55 am

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 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:
Code: Select all
// 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.
Andrei Costescu
Andrei Costescu
Posts: 1011
Joined: Tue Jun 26, 2007 3:14 pm

Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 2 guests