How to make column widths editable for XHTML tables

This guide will explain how to enable column widths for XHTML tables.

Step 1: Setting up the column width pop-over

Use the open-table-column-sizing-popover operation to create an operation to open the column sizing popover menu for XHTML tables. It will look something like this:


"xhtml-open-table-column-sizing-popover": {
	"label": "t__Adjust column size",
	"steps": {
		"type": "operation/open-table-column-sizing-popover",
		"data": {
			"popoverAnchorNodeId": "{{contextNodeId}}"

Step 2: Configuring the operation

To configure the operation inside your editor you have to configure the properties of your table by adding the operation to the contextual operations of you table.

An example:


    configureProperties(sxModule, 'self::table', {
        tabNavigationItemSelector: 'self::entry | self::td',
        contextualOperations: [{ name: 'xhtml-open-table-column-sizing-popover' }]

Keep in mind that this operation only works as a contextual operation.

Step 3: Setting the column width type of the XHTML table

To set the column width type of the XHTML table, use configureAsXhtmlTableElements to configure the options for XHTML tables.

The option shouldCreateColumnSpecificationNodes has to be set to true and columnWidthType should be set to either: 'none', 'relative' (*) or 'percentual' (%).

columnWidthType will default to 'none' if it isn't specified.

Keep in mind that you can not set the columnWidthType to 'relative' or 'percentual' if shouldCreateColumnSpecificationNodes is set to false.

This is an example with the 'relative' columnWidthType. Change the columnWidthType to 'percentual' if you want the 'percentual' width type.


configureAsXhtmlTableElements(sxModule, {
	shouldCreateColumnSpecificationNodes: true,
    columnWidthType: 'relative'