How to configure tables

The first thing to do is to configure the schema experience for the chosen table standard(s). Every standard exposes a configureAs*TableElements function. This function takes care of configuring the elements used by the chosen table standard. Depending on the table standard chosen, the function accepts additional options

Configuring tables with the configureAs*TableElements functions will only configure the absolute minimum of configuration options for the elements being configured. To configure additional properties for elements found in these tables, use the configureProperties function.

This is a short example of configuring simple tables for a DITA application:

configureAsSimpletableTableElements(sxModule, {
    stentry: {
        defaultTextContainer: 'p'
    }
});

configureProperties(sxModule, 'self::simpletable', {
    blockHeaderLeft: [
        createMarkupLabelWidget()
    ],
    markupLabel: 'simple table',
    tabNavigationItemSelector: 'self::stentry'
});

Before a user can start inserting and editing tables, there needs to be a way to trigger the operations which perform these actions. It is recommended to group the table-related operations in a single masthead tab. A table insert can also be added to the start or insert tab. Most table-related operations also have a variant specifically meant for use in a contextual menu. These operations are prefixed with contextual-.

For more information about configuring a masthead for an application, refer to the guide on creating a masthead.

To configure the table toolbar, click the following link.

The table context menu is used by default. However, it can still be turned off by setting the configuration option useDefaultContextMenu to false.

The contextual menu features all operations that can be expected such as adding and removing row and column, merging cells and splitting cell operations. Configured contextual operations for tables or their sub-elements go in the `more` menu as below.

It is possible to use tables faster and easier thanks to table widgets. Here are 4 kinds of table widgets:

• Insertion widget: This can be used to add new rows or columns at a certain place by clicking plus icons around a table.

• Selection widget: It is possible to run some table operations for each column or row in a selection menu. A selection menu will show up when a selection widget is clicked. Besides that the corner selection widget can be used to select the entire table.

• Row widget: An icon widget can be added before each row by using createIconWidget. Row widgets are linked to the row elements of the table.

• Column widget: Multiple column widgets can be added before each column. Column widgets are linked to the column specification element of the table or the cells in the first row in cases where the table definition does not support column specification elements. When a column specification element is missing or there are merged cells in the first row, the number of columns is more than the number of the context nodes of the column widgets. In this case, the column widgets will not be rendered at all. All widgets are supported, however the columnBefore widget area is limited, so not every combination or configuration will look right as a result.

The table widgets can be configured via the configureAs*TableElements functions (configureAsTableElements, configureAsBasicTableElements, configureAsCalsTableElements, configureAsSimpletableTableElements, configureAsTeiTableElements, configureAsXhtmlTableElements). Beside that configureProperties with table defining node selector can be used. If you need to disable row or column widgets for some elements, you can perform the appropriate checks in a custom widget that does apply to the entire table, as each will be rendered for the corresponding row sourceNode or column specification/cell sourceNode:

const tableWidgetConfigurations = {
	showInsertionWidget: true,
	showSelectionWidget: true,
	rowBefore: [
		(sourceNode, renderer) => {
			const iconWidget = createIconWidget('dot-circle-o');

			if (
				// sourceNode is the row node
				evaluateXPathToBoolean(
					// Change the selector according to your needs
					'@special-row-marker-attribute',
					sourceNode,
					readOnlyBlueprint
				)
			) {
				return iconWidget(sourceNode, renderer);
			}

			return null;
		},
	],
	columnBefore: [
		(sourceNode, renderer) => {
			const iconWidget = createIconWidget('clock-o');

			if (
				// sourceNode is the cell or column specification node
				evaluateXPathToBoolean(
					// Change the selector according to your needs
					'@special-column-marker-attribute',
					sourceNode,
					readOnlyBlueprint
				)
			) {
				return iconWidget(sourceNode, renderer);
			}

			return null;
		},
	],
};

// You can configure table widgets either this way:
configureAsCalsTableElements(sxModule, {
	// other configuration options

	// table widget configuration options
	...tableWidgetConfigurations,
});

// or this way:

// tgroup is the table defining node in CALS tables
configureProperties(sxModule, 'self::tgroup', {
	// table widget configuration options
	...tableWidgetConfigurations,
});

Tables can be configured to be collapsible. This is useful in cases when you either have a lot of tables or very large tables that are impacting the overall editor performance. Collapsible tables can offer a huge performance boost, as they are evaluated Just-In-Time, which means that they are only evaluated when they are not collapsed.

Tables can be configured via the configureAs*TableElements functions for example configureAsCalsTableElements. Making a table collapsible can be done using the properties isCollapsibleQuery and isInitiallyCollapsedQuery:

• isCollapsibleQuery is an XPath expression which determines whether or not a table has the ability to be collapsed. This is optional and defaults to false().

• isInitiallyCollapsedQuery is an XPath expression which determines whether a table that has the ability to be collapsed should start off as collapsed on initial load. This is optional, and defaults totrue(). Note: This will only come into effect when isCollapsibleQuery returns true for the configured table.

Examples:

This configuration enables tables with more than 5 rows or 5 columns to have the ability to be collapsed and collapses all tables by default:

configureAsTableElements(
	sxModule,
 	{
 		table: {
			localName: 'table'
 		},
		isCollapsibleQuery: '$rowCount > 5 or $columnCount > 5',
		isInitiallyCollapsedQuery: 'true()'
	},
	tableDefinition
);

This configuration enables tables with more than 5 rows or 5 columns to have the ability to be collapsed, however only tables with more than 10 rows or 10 columns start off initially as collapsed:

configureAsTableElements(
	sxModule,
 	{
 		table: {
			localName: 'table'
 		},
		isCollapsibleQuery: '$rowCount > 5 or $columnCount > 5',
		isInitiallyCollapsedQuery: '$rowCount > 10 or $columnCount > 10'
	},
	tableDefinition
);