Configure a table toolbar

This guide aims to help you configure a table toolbar for all your tables.

What you need

You will need a Fonto Editor instance, which can be set up by following the Create a base editor guide.

1

Register TableToolbar.jsx

Import TableToolbar.jsx in your Masthead and add it to the tabs constant.

RecipeMasthead.jsx

JavaScript

import React from 'react';
import { MastheadToolbar, MastheadToolbarButtons } from 'fds/components';

// import TableToolbar
import TableToolbar from 'fontoxml-table-flow/src/TableToolbar.jsx';

import FxEditorMasthead from 'fontoxml-fx/src/FxEditorMasthead.jsx';
import FxOperationButton from 'fontoxml-fx/src/FxOperationButton.jsx';

const tabs = [
    {
        id: 'start-tab',
        label: 'Start',
        content: (
            <MastheadToolbar>
                <MastheadToolbarButtons>
                    <FxOperationButton operationName="" />
                </MastheadToolbarButtons>
            </MastheadToolbar>
        )
    },
	// Add the following object:
	{
        id: 'table-tab',
        label: 'Table',
        isHighlightedTabQuery: 'ancestor-or-self::*[fonto:is-table(.)]',
		isVisibleTabQuery: 'ancestor-or-self::*[fonto:is-table(.)]',
        content: <TableToolbar />
    }
];


const RecipeMasthead = props => {
    return <FxEditorMasthead tabs={tabs} />;
};

export default RecipeMasthead;

In the example above, we used the fonto:is-table XPath function. Besides that, we also have the fonto:is-table-cell XPath function.

Now you have a table toolbar where the default options are already configured. If your table supports all operations that are included by default, your toolbar will look as follows:

A screenshot of additions made to the default table toolbar
2

(Optional) Extend the table toolbar

It is possible to add new buttons to the table toolbar, in case the defaults do not cover all your use cases.

  • As an example, we will add a button to remove the table containing the cursor from the document. Additionally, we do not want to show the operation's default label. In order to add this button, what we need are:

    • The 'table-delete' operation

    • The MastheadToolbarButtons component

    • The FxOperationButton component

  • Create your own button group using any buttons or menus that you see fit:

JavaScript

<MastheadToolbarButtons>
	<FxOperationButton label="" operationName="table-delete" />
</MastheadToolbarButtons>
  • Add your content to the masthead component as a child of <TableToolbar>:

RecipeMasthead.jsx

JavaScript

<TableToolbar>
    <MastheadToolbarButtons>
        <FxOperationButton label="" operationName="table-delete" />
    </MastheadToolbarButtons>
</TableToolbar>

The newly added button is next to default operations in the table toolbar:

A screenshot of additions made to the default table toolbar

Any masthead component can be added to the table toolbar. For example, to add a drop to your table toolbar, refer to the Changing the masthead guide.

If you want to have a table toolbar which does not have some of the default operations, you need to create a custom masthead from scratch. Then you can add the table operations as you like. Please keep in mind that it is advised to have an expand button and a compress button to expand and compress your tables in your custom table toolbar.