configure As Basic Table Elements
Type: Function
How to get configureAsBasicTableElements?
JavaScript
import configureAsBasicTableElements from 'fontoxml-table-flow-basic/src/configureAsBasicTableElements.js'
Configure the given set of elements as a basic table. More configuration options for the configureAsBasicTableElements
function will be added at a later point in time.
For example:
Other
configureAsBasicTableElements(sxModule, {
priority: 5, // Optional
table: {
localName: 'table',
namespaceURI: 'http://some-uri.com/table',
tableFilterSelector: 'not(@conref)' // Optional
},
// optional
headerRow: {
localName: 'header',
namespaceURI: 'http://some-uri.com/header'
},
row: {
localName: 'tr',
namespaceURI: 'http://some-uri.com/tr'
},
// optional
headerCell: {
localName: 'th',
namespaceURI: 'http://some-uri.com/th',
defaultTextContainer: 'p'
},
cell: {
localName: 'td',
namespaceURI: 'http://some-uri.com/td'
defaultTextContainer: 'p' // Optional
}
});
configureProperties(sxModule, 'self::table', {
contextualOperations: [
{ name: 'table-contextual-delete' }
],
markupLabel: 'table',
tabNavigationItemSelectorOrNodeSpec: 'self::cell'
});
Basic tables do not use elements to define columns, that is why the columnBefore widgets are linked to the cell elements in the first row.
Example usage for the table widgets:
Other
configureAsBasicTableElements(sxModule, {
table: {
localName: 'table',
namespaceURI: 'http://some-uri.com/table',
},
headerRow: {
localName: 'header',
namespaceURI: 'http://some-uri.com/header'
},
row: {
localName: 'tr',
namespaceURI: 'http://some-uri.com/tr'
},
cell: {
localName: 'td',
namespaceURI: 'http://some-uri.com/td'
},
rowBefore: [
createIconWidget('dot-circle-o', {
clickOperation: 'do-nothing'
})
],
columnBefore: [
createIconWidget('clock-o', {
clickOperation: 'lcTime-value-edit',
tooltipContent: 'Click here to edit the duration'
})
],
showInsertionWidget: true,
showHighlightingWidget: true,
columnWidgetMenuOperations: [{ contents: [{ name: 'column-delete-at-index' }] }],
rowWidgetMenuOperations: [{ contents: [{ name: 'contextual-row-delete' }] }]
});
The cell element menu button widgets are added based on the existence of contextual operations on cell level. Make sure that only cell-specific operations are added to the cell widget, so that users are only given options relevant to them. Example on how you can add this element menu on the widget:
Other
configureProperties(sxModule, 'self::cell', {
contextualOperations: [
{ name: 'contextual-set-total-cell', hideIn: ['context-menu'] }
]
});
Basic tables can also be configured to be collapsible. Refer to our guide to learn more.
Arguments
sx
Module (Required)
Type: SxModule
options
(Required)
Type: Object
Properties