Once you've started working with Vizlib Writeback Table, you may want to start applying your own styling changes. This article shows you how to use the customization functions available in Vizlib Writeback Table.
TABLE OF CONTENTS
When you add a column to Vizlib Writeback Table, the column name is displayed in the table as a default, with the Display Label setting Use Column Name. When you enable the Custom setting (Figure 1) you'll be able to enter text or use an expression to create a Custom Display Label, add a Column Tooltip message, set a Placeholder, set a display condition which needs to be met in Show column if, and make the column read-only with Editable if.
Figure 1: Custom Display Label
You can see an example of a customized label and tooltip in Figure 2.
Figure 2: Custom Label Example
Text Area - Multiple Rows in Single Cell
When you're using the Text/Text Area data type, the Input Type settings for Text Area can support multiple rows inside in a single table cell (Figure 3).
Figure 3: Text Area Multiple Rows
The default Text Area Rows in Table view is set to 4, with a separate control for setting the number of Text Area Rows in form view. When you enable Custom settings, the value of Text Area Rows is applied to table view and form view (Figure 4 shows the default and custom settings).
Figure 4: Multiple Cell Rows Setting
You can find out more about pasting data into table cells in our article here.
The Add-ons section of the property panel controls the Data Handling settings for the writeback table (Figure 5). You can choose to Include Zero Values by ticking the checkbox, and enter a Calculation condition using the editor.
Figure 5: Add-ons
Color Customization Example
Vizlib Writeback Table has color customization options which you can use to give your table a distinctive look. Figure 7 shows an example of a "Dark Mode" writeback table with different colors for odd and even rows, and where a color is applied when a row is edited.
Figure 7: Dark Mode Example
You can use the Custom Styling settings in the Columns section to customize the colors in a particular column, or use the Appearance section to customize the colors for components like the header and footer (Figure 8).
Figure 8: Dark Mode Edit