4D View Pro: Customize the Style of your Tables

Tables are an integral part of 4D View Pro documents, so we have provided many table-related features over the releases of 4D. 4D v19 R8 adds a new one related to styles so that the table fits perfectly with the rest of your document.

From now on, the VP Set table theme provides a way to apply by programming one of the predefined table styles. If none of these styles meet your need, you can define your own theme and apply it to your table.

HDI VP Table Style

SpreadJS has over 60 predefined themes:

  • “dark1” to “dark11”
  • “light1” to “light21”
  • “medium1” to “medium28”
  • “professional1” to “professional24”

To create a table with one of these themes, you can indicate it in the VP CREATE TABLE command:

$parameter:=New object
$parameter.theme:="dark10"
VP CREATE TABLE(VP Cells("ViewProArea"; 2; 1; 3; 1); "myTable"; "people"; $parameter)

In the same way, you can modify the theme of an existing table with VP SET TABLE THEME:

$parameter:=cs.ViewPro.TableThemeOptions
$parameter.theme:="medium2"
VP SET TABLE THEME("ViewProArea"; "myTable"; $parameter)

blank

You can retrieve and test the dark, light, and medium themes using the Ribbon:

blank

Create a customized theme

If none of the defined themes suit your needs, you can create your theme yourself. You can define a style for your columns, rows, header, and footer.

For example, if you want to have this banded column rendering:

blank

You need to:

  • Activate the band column rendering:
$param:=cs.ViewPro.TableThemeOptions
$param.bandColumns:=True
$param.bandRows:=False
  • Create your header style:
$styleHeader:=cs.ViewPro.TableStyle.new()
$styleHeader.backColor:="rgb(255,228,92)"
$styleHeader.foreColor:="rgb(3,4,94)"
$param.theme:=cs.ViewPro.TableTheme.new()
$param.theme.headerRowStyle:=$styleHeader
  • Create your alternate columns style:
$styleColumn1:=cs.ViewPro.TableStyle.new()
$styleColumn1.backColor:="#0077B6"
$styleColumn1.foreColor:="#03045E"
$param.theme.firstColumnStripStyle:=$styleColumn1

$styleColumn2:=cs.ViewPro.TableStyle.new()
$styleColumn2.backColor:="#CAF0F8"
$styleColumn2.foreColor:="#03045E"
$param.theme.secondColumnStripStyle:=$styleColumn2

Apply your new theme thanks to the VP SET TABLE NAME:

VP SET TABLE THEME("ViewProArea"; "myTable"; $param)

And it’s done!

Check out this feature with the HDI and the documentation for more details!

Fabrice Mainguené
• Product Owner •Fabrice Mainguené joined 4D Program team in November, 2016. As a Product Owner, he is in charge of writing the user stories then translating it to functional specifications. His role is also to make sure that the feature implementation delivered is meeting the customer need.After obtaining a Bachelor degree in Computer Science at CNAM, Fabrice joined a small software publishing company as a Windev developer. Then he worked for different companies in industry and trade areas as a Windev and web developer as well as technical advisor on new features.