Implement Cell Render for the OnyxDataGrid

[JoCa96]

Why?

As a user, I want to see different kind of data visualizations for different kind of columns.

Design

Figma

Acceptance criteria

• The OnyxDataGrid is able to display numbers differently from strings, when configured so via the columns
• For type number
  • monospace font is used
  • is formatted using Intl.NumberFormat
• options/props for the type are generically made available to the feature user

Implementation details

• The column property of the OnyxDataGridProps is extended to support a type property. For now, it will support the types "string" | "number". Default is "string".
• The createRendererRows function must be adapted. Based on the column type the cells component render function is switched. Make sure that the same render function is used.
• features should be able to register their own types with the respective render functions via the DataGridFeature API

ColumnConfig API types:

/**
 * Normalized config for internal usage
 */
export type NormalizedColumnConfig<TEntry extends DataGridEntry> = {
  key: keyof TEntry;
  label?: string;
  type?: PropertyKey;
};

/**
 * ColumnConfig for the enduser
 */
export type ColumnConfig<TEntry extends DataGridEntry> =
  | keyof TEntry
  | NormalizedColumnConfig<TEntry>;

Feature API types:

  /**
   * Defines a renderer for a type.
   */
  typeRenderer?: Record<PropertyKey, DataGridRendererCellComponent<TEntry>>;

  /**
   * Allows modifying of the column configuration. E.g. adding or modifying columns. 
   */
  modifyColumns?: {
    func: (columns: Readonly<NormalizedColumnConfig<TEntry>[]>) => NormalizedColumnConfig<TEntry>[];
  };

Definition of Done

• Should be covered by tests:

  • functional tests (Playwright or unit test)
  • visual tests (Playwright screenshots)

• Make sure, that

  • 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
Documentation

• Checked and approved by
  • designer
  • dev