Intro

The table toolbar provides actions for tables across Data & Analytics products.

https://www.figma.com/design/3pnSbYmau9yyEpKr63q5cb/DNA-Web-UI-Kit?node-id=53282-5912&t=CpFuMn6L6nKbY7p3-11

When to Use

Do

Use the table toolbar:

  • There are multiple objects on your page and you need to edit only a single table.
  • You want to show actions as close to their corresponding controls as possible.
  • You need a title for your table.

Don't

Don’t use the table toolbar:

  • You are using single selection and have only one or two actions. In this case, place the actions on each line
  • If there is no table to use it with.

Top Tips

Anatomy

Save, Cancel, Create, Add, Delete, and Remove should be text buttons — reference: Table Toolbar | SAP Fiori for Web Design Guidelines
Warning
Icon
false

  1. Title (Optional)

  2. Variant management or content switch (segmented button or input select) (Optional)

  3. Search or Segmented Control (Optional)

  4. Finalizing Actions (Optional): Save, Cancel

  5. Business Actions (Optional):
    Actions for object management

    • Create (for new items) or Add (for existing items)
    • Edit
    • Delete (if the object itself is deleted) or Remove (if the reference to an item is removed)
    • Paste

  6. Actions for content management (Optional):
    view settings

    • Show Details / Hide Details
    • Sort
    • Filter
    • Group
    • Column Settings

  7. Generic actions, export to spreadsheet, Print (Optional)

  8. Maximize/Minimize, View switch (for example to switch between table & chart view), position of the overflow (not visible in this example) (Optional)

Table Toolbar anatomy diagram with 8 numbered callouts on a single-row toolbar (44px height). Callout 1: Title text at the far left. Callout 2: A labeled dropdown (Select / filter field) with placeholder text. Callout 3: Search input field. Callout 4: Save and Cancel action buttons. Callout 5: Create and Delete action buttons. Callout 6: Sort toggle icon button and filter icon button. Callout 7: A group of two icon buttons — Print and Export. Callout 8: Maximize/Minimize button at the far right of the toolbar

Anatomy of the Switch (DNA)

Responsivness

To enable responsiveness, use the overflow toolbar control. Based on the sap.m.Toolbar control, the OverflowToolbar control is a container that provides overflow when its content does not fit in the visible area. Controls that can overflow include the segmented button, select, toggle button, checkbox, input, search field, combo box, and date/time input.

Only allow important actions to shrink and stay outside the overflow. The app team itself must decide which actions it considers to be sufficiently important.

Table Toolbar in a narrow/collapsed responsive state showing only a Search input field and an overflow menu button (three dots) visible, indicating that all other toolbar actions have collapsed into the overflow menu.

Overflow toolbar control