Implement OnyxDataGridRenderer support component

Why?

According to our #1660 we want to abstract the rendering of the OnyxDataGrid. We implement this TableRenderLayer via the OnyxDataGridRenderer support component.

It encompasses a minimal API that renders an HTML compliant table with only permitted content elements:

Permitted content

In this order:

an optional element,

zero or more elements,

an optional element,

either one of the following:

zero or more elements

one or more elements

an optional element

The TableRenderLayer must be stateless. Its main purpose is to create an HTML compliant table structure. The table should be rendered according to the following rules:

columns describes the horizontal layout of the table, every entry MUST result in a column and <th>element
rows describe the vertical layout of the table, every entry MUST result in a row and a <tr> element
so there should not be any "unused" entries in either column or row
extensions should only follow table concepts that are supported/specified by the HTML spec
the entry keys of a row must match the specified columns or colgroups
the content of the table data cells (<td>...</td>) in a row can be any content

Design

Figma

Acceptance criteria

The OnyxDataGridRenderer is implemented:
- [x] Does not have internal state
- [x] Renders and supports only compliant HTML
- [x] Uses and offers BEM classes
- [x] Is styled according to the Figma design
[Can render:
- [x] table header
- [x] table rows
- [x] combined rows
- [x] column categories

Definition of Done

The following component requirements are implemented:
- [ ] skeleton
- [ ] density
- [ ] example usage added to apps/demo-app/src/views/HomeView.vue
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

Implementation details

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

The following is the code used by the PoC of #1660. @JoCa96 - I would consider making the id key dynamic. Column and row grouping, as well as styling was not yet considered.

import type { FunctionalComponent, HTMLAttributes, TdHTMLAttributes } from "vue";

// eslint-disable-next-line @typescript-eslint/no-explicit-any
type AnyKey = keyof any;

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

export type Metadata = Record<string, unknown>;

export type CellRenderFunc<
  TEntry extends TableEntry,
  TMetadata extends Metadata,
> = FunctionalComponent<RenderCellProps<TEntry, TMetadata>>;

/**
 * Props of the TableRenderLayer
 */
export type RendererProps<TEntry extends TableEntry, TMetadata extends Metadata> = {
  theadProps?: HTMLAttributes;
  tbodyProps?: HTMLAttributes;
  columns: RenderHeader<TEntry>[];
  rows: RenderRow<TEntry, TMetadata>[];
};

export type RenderHeader<
  TEntry extends TableEntry,
  TKey extends keyof TEntry = keyof TEntry,
  TProps extends object = object,
> = {
  /**
   * Key of the column - usually a key of the tabledata.
   * But can also be used for custom columns.
   */
  key: TKey;
  /**
   * Attributes and data that is provided to the component using `v-bind`.
   */
  headerProps: HTMLAttributes & TProps;
  /**
   * The component that renders the header content.
   */
  header: FunctionalComponent<TProps>;
};

export type RenderRow<TEntry extends TableEntry, TMetadata extends Metadata> = {
  /**
   * Unique id of the row.
   */
  id: TableEntry["id"];
  trProps?: HTMLAttributes;
  cells: Record<keyof TEntry, RenderCell<TEntry, TMetadata> | undefined>;
};

export type RenderCell<TEntry extends TableEntry, TMetadata extends Metadata> = {
  props: RenderCellProps<TEntry, TMetadata>;
  tdProps?: TdHTMLAttributes;
  /**
   * The component that renders the actual cell content.
   */
  is: CellRenderFunc<TEntry, TMetadata>;
};

export type RenderCellProps<TEntry extends TableEntry, TMetadata extends Metadata> = {
  /**
   * Complete row data
   */
  row: TEntry;
  /**
   * Data that is provided to the component via the `metadata` prop
   */
  metadata?: TMetadata;
  /**
   * table data that is provided to the component via the `modelValue` prop
   */
  modelValue: TEntry[keyof TEntry];
};

Basic structure:

<template>
  <table>
    <thead v-bind="props.theadProps">
      <tr>
        <th v-for="col in props.columns" :key="col.key">
          <component :is="col.header" v-bind="col.headerProps" />
        </th>
      </tr>
    </thead>
    <tbody v-bind="props.tbodyProps">
      <tr v-for="row in props.rows" :key="row.id" v-bind="row.trProps">
        <td v-for="col in props.columns" :key="col.key" v-bind="row.cells[col.key].tdProps">
          <component :is="row.cells[col.key].is" v-bind="row.cells[col.key].props" />
        </td>
      </tr>
    </tbody>
  </table>
</template>

Applicable ARIA Pattern

https://www.w3.org/WAI/ARIA/apg/patterns/table/

SchwarzIT / onyx