Vizlib Home

Vizlib Writeback Table Properties - Custom Styling

If you'd like to apply your own styling to your data, Vizlib Writeback Table contains a Custom Styling panel, with functions to help modify and control presentation and color branding. 

Custom Styling is originally set to the Default styling scheme (Figure 1). If you select a cell to, it will be highlighted in black, then change to the default color (Vizlib Blue) when text is entered. 

Figure 1: Default Custom Styling


Getting Started

  • To start using custom styling, toggle the Custom Theme slider to the right to allow you to edit the Custom properties (Figure 2). This example shows the properties for a Text data type. 

Figure 2: Custom Styling Commands

With text, there are 7 color types you can select and adapt for custom styling.

  • Custom Color - the color used to highlight each row currently selected. 
  • Column Header Background - the background color used for the column header.
  • Column Header Text - the text color used for the column header. 
  • Column Totals Background - the background color used for the column total.
  • Column Totals Text - the text color used for the column total . 
  • Validation Label Color - the text color of the label in a column header using validation. 
  • Validation Error Color - the text color for the error message of a column using validation. 

Color Selection

There are 2 methods of selecting a color.

  • Open the color palette by clicking on the dropdown and select a color from the matrix. 
  • Open the expression editor and enter the hex code for the color you want to change, e.g. entering #000000 will set the color to black.

You can see an example of custom styling being applied in Figure 3. The Column Header Text is changed to red, and the Column Header Background changes to blue.

Figure 3: Color Selection

Adjust Column Width

You can enable the Adjust Column Width settings and either use the slider or enter a number in the expression editor to change the column width (Figure 4).

Figure 4: Adjust Column Width

Text Align

If you want to customize the text alignment for a column, you can enable the Text Align settings (the default settings for columns are Right for numeric values and Left for text.) You can choose left, centre or right alignment and have it applied to every row in the column (Figure 5).

Figure 5: Text Align

Kenneth is the author of this solution article.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.