Vizlib Home Try Vizlib

Vizlib Writeback Table Properties - Custom Styling

If you'd like to apply your own styling to your data, Vizlib Writeback Table contains Custom Styling settings in the property panel, with functions to help modify and control presentation and color branding. Vizlib Writeback Table now uses the Color Picker to apply color settings, you can read full instructions here

Note: When you click a column in the writeback table in edit mode, you'll open the column properties in the property panel. 


Figure 1 shows changes being made to the Checkbox column. The column name is edited, custom tooltip is added, the checkbox border color and header column header background color are customized and the alignment of the column is changed from center to left.

Figure 1: Custom Styling Example

Custom Theme

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 Checkbox data type.

Figure 2: Custom Theme

There are 2 ways you can select a color in Custom Styling. You can open the color palette and select a color using the slider or the matrix, or enter the color hex code in the expression editor e.g. entering #000000 will set the color to black.

The color settings you can select and adapt for custom styling are listed here. 

  • Custom Color - used for table components such as highlights and inputs (e.g. when a checkbox field is selected). 
  • Input Title Color (Form) - used for input titles in Form View (visible when Form View is enabled). 
  • Checkbox Border Color - used for the border of a checkbox (multiple choice and radio button data types also have this setting). 
  • Column Header Background - used for the background in the column header.
  • Column Header Text - used for text in the column header. 
  • Column Totals Background - used for the background of column totals.
  • Column Totals Text - used for text in the column totals. 
  • Required Label Color - used for the label text in a column where an input is required. 
  • Validation Error Color - used for the error message in a column using validation. 

Back to Contents

Adjust Column Width

You can set your own column width by enabling the Adjust Column Width settings and using the slider or entering a number in the expression editor to change the column width (Figure 3). You can also choose how to Align Input in a column by selecting Center, Left or Right from the dropdown. 

Figure 3: Adjust Column Width

Back to Contents

Custom Column Tooltip

If you'd like to apply changes to the tooltip in a table column, you can enable the Custom Column Tooltip settings (Figure 4) for a column and choose a Column Tooltip Icon and Column Tooltip Icon Color

Figure 4: Custom Tooltip

Back to Contents

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.