Implement basic OnyxDataGrid useTableFeature composable

[JoCa96]

Depends on

• 1660

Description

The composable provides the basic API for implementing table features.

This is done by taking the provided user table data and transform and extend it. Every feature can perform some transformations and wrap rendered slots.

In the first step, we implement the basic useTableFeature composable. It should be enough to implement a Sort feature.

Implementation details

The basic useTableFeature composable API should look like this:

// we need to intersect the empty array, so the array entry types are inferred
export const useTableFeatures = <
  T extends TableFeature<any, any, any, any, any, any>[] | [],
  TFeatureName extends symbol = ExtractTFeatureName<T>,
>(
  features: T,
) => {
return {
    /** Takes the column definition and maps all, calls mutation func and maps at the end to RendererCell */
    enrichTableData,
    /** Takes the column definition and creates a RenderHeader for each, adds actions from features */
    enrichHeaders,
    // the combined `watch` for all features
    watcheSources,
  };
}

export type TableEntry = {
  id: string | number;
  [key: PropertyKey]: unknown;
};

export type TableFeature<
  TEntry extends TableEntry,
  TFeatureName extends symbol,
> = {
  /**
   * Unique name and identifier of the table feature
   */
  name: TFeatureName;

  /**
   * An array of reactive states that should trigger a table re-calcualtion
   */
  watch: WatchSource[];

  /**
   * Allows modifying the table state as a whole.
   */
  mutation?: {
    func: (state: EntryState<TEntry>[]) => EntryState<TEntry>[];
  };

  /**
   * Allows the modification of the header columns before render.
   */
  header?: {
    /** actions are shown after the header label, later `listComponent` can be added */
    actions?: { iconComponent: Component, onTrigger?: (event: MouseEvent) => void }[];
  };
};

Reference implementation

• https://github.com/SchwarzIT/onyx/blob/757-onyx-form/packages/sit-onyx/src/components/poc/OnyxDataGrid/OnyxDataGrid.feature.ts
• https://github.com/SchwarzIT/onyx/blob/13b8bb182b1fe048b1a7573f50c954a41721c378/packages/sit-onyx/src/components/poc/OnyxDataGrid/features/sorting/sorting.ts

Design

https://www.figma.com/design/YfEUBOHk4J4nYrk04geswG/Onyx-Component-Library?node-id=4435-44768&node-type=text&m=dev

Acceptance criteria

• a basic useTableFeature composable is used to create input for the renderer
• a withSorting Feature is implemented using the API

Definition of Done

• [x] example usage added to apps/demo-app/src/views/HomeView.vue
• covered by tests
  • [x] functional tests (Playwright or unit test)
  • [x] visual tests (Playwright screenshots)
• [x] follow-up tickets were created if necessary
• [x] updated version + documentation is deployed
• [x] Storybook can show the feature
• [x] Storybook code snippet of new/changed examples are checked that they are generated correctly
• [x] Namings are aligned with Figma

Approval

• Storybook: https://storybook.onyx.schwarz/?path=/story/data-datagrid--sorting
• [x] approved by dev @larsrickert

[larsrickert]

@JoCa96 Review/approval notes:

1. The example code of the features property breaks the control panel layout. Maybe we should just add a link to the Storybook example?:
2. The sorting changed action is only logged/emitted for ascending. For descending and reset, nothing is shown/emitted

[JoCa96]

Follow-up: #2082