configureAsBasicTableElements

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. Check our guide for more information on table widgets.

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,
    showSelectionWidget: 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

sxModule
(Required)
Type: SxModule
options
(Required)
Type: Object
Properties