Configure a table toolbar

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

What you'll need

Step 1: Register TableToolbar.jsx

  • Follow the instructions in Step 5 of Create a Masthead to import TableToolbar.jsx and register it as a tab.
RecipeMasthead.jsx
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:


Step 2: Extending 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:
  • Create your own button group using any buttons or menus that you see fit:
<MastheadToolbarButtons>
	<FxOperationButton label="" operationName="table-delete" />
</MastheadToolbarButtons>
  • Add your content to the masthead component as a child of <TableToolbar>:
RecipeMasthead.jsx
<TableToolbar>
    <MastheadToolbarButtons>
        <FxOperationButton label="" operationName="table-delete" />
    </MastheadToolbarButtons>
</TableToolbar>

The newly added button is next to default operations in the 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 Create an advanced masthead guide under the "Button with drop" heading.

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.


Was this page helpful?