Implement column action

[JoCa96]

Depends on

• Implement basic useTableFeature composable #1852

Why?

This feature is needed for our collaboration project PSF.

In case of advanced filtering/sorting or multiple column actions being required, we need to show the actions in a special flyout.

This story is implemented on the basis of the advanced sorting mode.

Design

Figma > Data > Advanced Sorting

Acceptance criteria

• TableFeature type is extended to be able to add column actions
• the actions can be configured for an inline and a list view
• The OnyxDataGrid shows the column actions in a flyout when
  • there is more than one action defined
  • an action only has a listComponent defined
• The existing sorting feature is extended with a list component as shown in Figma

Implementation details

The basic useTableFeature composable API (defined in #1852) is extended like this:

export type TableFeature< /* ... */> = {
  // same as before ...

  /**
   * Allows the modification of the header columns before render.
   */
  header?: {
    /** actions are shown after the header label, later `listComponent` can be added */
    actions?: {
      label: string;
      /** optional icon component to be shown in the column header, if not defined list mode will be enforced */
      iconComponent?: Component;
      /** components to render in the list mode of the column actions, if multiple are defined, they will be grouped together */
      listComponents: Component | Component[];
      onTrigger: (event: MouseEvent) => void;
    }[];
  };
};

Applicable ARIA Pattern

• MenuButton
• SortableTable

Definition of Done

• covered by tests
  • functional tests (Playwright or unit test)
  • visual tests (Playwright screenshots)
• follow-up tickets were created if necessary -> Implement UX feedback for moreActions #2293
• updated version + documentation is deployed
• Storybook can show the feature
• Storybook code snippet of new/changed examples are checked that they are generated correctly
• Namings are aligned with Figma

Approval

• Storybook
• approved by designer @jannick-ux
• approved by dev @JoCa96

[JoCa96]

This ticket is not blocked anymore, see

onyx/packages/sit-onyx/src/components/OnyxDataGrid/features/index.ts

Line 33 in fa44d95

actions?: (column: keyof TEntry) => {