Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement OnyxDataGrid column action #1939

Open
15 tasks
JoCa96 opened this issue Oct 9, 2024 · 0 comments
Open
15 tasks

Implement OnyxDataGrid column action #1939

JoCa96 opened this issue Oct 9, 2024 · 0 comments
Assignees
Labels
cooperation Issues for projects in cooperative mode dev Requires technical expertise
Milestone

Comments

@JoCa96
Copy link
Collaborator

JoCa96 commented Oct 9, 2024

Depends on

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

Definition of Done

  • covered by tests
    • functional tests (Playwright or unit test)
    • visual tests (Playwright screenshots)
  • follow-up tickets were created if necessary
  • 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
  • Deployed Docs
  • approved by designer @jannick-ux
  • approved by dev
@JoCa96 JoCa96 added dev Requires technical expertise cooperation Issues for projects in cooperative mode labels Oct 9, 2024
@JoCa96 JoCa96 added this to the Tables milestone Oct 9, 2024
@JoCa96 JoCa96 added the 0-refinement All issues that can or need to be estimated in our next refinement label Oct 9, 2024
@JoCa96 JoCa96 self-assigned this Oct 9, 2024
@JoCa96 JoCa96 removed the 0-refinement All issues that can or need to be estimated in our next refinement label Oct 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
cooperation Issues for projects in cooperative mode dev Requires technical expertise
Projects
Status: Ready
Development

No branches or pull requests

2 participants