Configure tables
This guide describes how to configure tables and how to make use of the table related operations offered by the platform.
The platform has support for DITA simpletable, CALS, XHTML and other table definitions. This article describes support for DITA simpletable, CALS and XHTML. For other table definitions see our guide on how to configure custom table definitions.
DITA simpletable is part of the D
To use CALS tables, make sure to select the C
FontoXML supports the use of multiple table standards in one editor instance.
Configure the schema experience
The first thing to do is to configure the schema experience for the chosen table standard(s). Every standard exposes a configure
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
D IT A Simpletable
To configure simpletable table elements, use the configure
function. The options object as second argument is not required. For a full list of available options, refer to the configure
documentation and to the D
A simple example of the usage of the configure
function:
JavaScript
configureAsSimpletableTableElements(sxModule);
C AL S
To configure CALS table elements, use the configure
function. This function requires the table.local
option to be set. Therefore, the option object for this function is required. For a full list of available options, refer to the configure
documentation and the C
JavaScript
configureAsCalsTableElements(sxModule, {
table: {
localName: 'table'
}
});
X HT ML
To configure XHTML table elements, use the configure
function. The options object as second argument is not required. For a full list of available options, refer to the configure
documentation and the X
JavaScript
configureAsXhtmlTableElements(sxModule);
Configure other element properties
Configuring tables with the configure
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 configure
function.
The configureProperties can configure any property for any given element. However, due to system limitations, the default
option is the only option which needs to be configured via the configure
function.
This is a short example of configuring simple tables for a DITA application:
JavaScript
configureAsSimpletableTableElements(sxModule, {
stentry: {
defaultTextContainer: 'p'
}
});
configureProperties(sxModule, 'self::simpletable', {
blockHeaderLeft: [
createMarkupLabelWidget()
],
markupLabel: 'simple table',
tabNavigationItemSelector: 'self::stentry'
});
Configure a table masthead tab
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.
Table standard specific operations
The only operations specific to a table standard are the insert operations. The platform offers operations for inserting these specific table standards, with CALS being the only exception. This is caused by the local name of the "table" element being configurable. To insert a simpletable use the simpletable-table-insert
operation. To insert an XHTML table, use the xhtml-table-insert
operation.
To insert a CALS table, implement an application specific cals-table-insert operation. This should look something like this:
JSON
{
"cals-table-insert": {
"label": "CALS table",
"description": "A generic CALS table",
"icon": "table",
"initialData": {
"childNodeStructure": [
"table", // <- change this value according to the used schema
[
"tgroup"
]
],
"rows": 1,
"columns": 1
},
"steps": [
{
"type": "operation/table-insert"
}
]
}
}
Table toolbar
To configure the table toolbar, click the following link.
Table contextual menu
The table context menu is used by default, and cannot be turned off. 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.

Table widgets
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.
-
Highlighting widget: It is possible to run some table operations for each column or row in a highlight menu. A highlight menu will show up when a highlighting widget is clicked. Besides that the corner highlighting widget can be used to select the entire table.
-
Row widget: Row widgets are fully configurable and can be added by using create
Icon Widget. Row widgets are linked to the row elements of the table. Only icon widget is supported. -
Column widget: Column widgets are fully configurable and can be added by using create
Icon Widget. Column widgets are linked to the column specification element of the table. Only icon widget is supported.

The table widgets can be configured via the configure
function. Please check here for more information.
Collapsible Tables
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 configure
functions for example configureis
and is
:
-
is
is an XPath expression which determines whether or not a table has the ability to be collapsed. This is optional and defaults toCollapsible Query false()
. -
is
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 toInitially Collapsed Query true()
. Note: This will only come into effect whenis
returns true for the configured table.Collapsible Query
$row
and $column
are helper variables which can optionally be used in is
and is
XPath expressions. These variables make it easier to configure collapsible tables, $row
represents the total number of rows inside the configured table and $column
represents the total number of columns inside 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:
JavaScript
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:
JavaScript
configureAsTableElements(
sxModule,
{
table: {
localName: 'table'
},
isCollapsibleQuery: '$rowCount > 5 or $columnCount > 5',
isInitiallyCollapsedQuery: '$rowCount > 10 or $columnCount > 10'
},
tableDefinition
);
Please note that Inclusions do not support collapsible tables