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)

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

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:

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!