Servoy Extra Component Table

Questions
1

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

2

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:

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