[Discussion] [Analytical Table Cell Type]: Cell#CellInstance#CellType#value any => string limits usage

[wvudako]

I hope this is the right place and format to address my design concerns, feel free to move or reformat it to better suit your workflow

Prerequisites:

• the property
  Cell#CellInstance#CellType#value
  in webcomponents-react/dist/components/AnalyticalTable/types/index.d.ts:83
• documentation
  https://www.sap.com/design-system/fiori-design-web/v1-136/ui-elements/analytical-table-alv/#components
  https://ui5.github.io/webcomponents-react/v2/?path=/docs/data-display-analyticaltable--docs

The change:
Upgraded from webcomponents 2.13 to 2.15 introduced the change of the cell value being string instead of any.

Issue:
We would like to provide more information than a simple string to the CellRenderer from the DTO of the row/cell to change styling or behaviour. This is not specifically allowed or disallowed, but not advised according to the doc, but the examples are limited to strings, object status (without extra text) and input elements.

Examples:
For the object status you might want to display another text than the actual severity (ValueState).
We do not use inline editing, but I would assume input elements would require more than just a string.
Displaying a standard browser link (that needs text and URL) shouldnt be impossible

Discussion / idea:
One could serialize information into the value but I assume thats not the idea
The doc states that you should only use the given elements to prevent styling issues and that makes sense, but the cell types seem to limited.
Having styled text should in most cases not be a problem styling wise, like coloring, but as stated above its hard to open up too many possibilities to break the intented UI design

Notes:

• Since JS/TS does not actually prevent putting other types in that property this is actually not a breaking change for us and just leads to some ugly casts

[Lukas742]

Hi @wvudako

Thanks for raising this! I converted this issue to a GitHub Discussion, as it looks more like a general discussion than a dedicated bug report or feature request. I’ll create issues if any arise from the discussion.

---

It's not entirely clear to me how you’re passing the value to the "CellRenderer". Could you share a short code example that shows how you’re currently doing it? You can edit the StackBlitz example below.

The value should always be a string (or null/undefined), because otherwise filtering, sorting, grouping, etc. won’t work out of the box and would need to be implemented on the consumer side. There may also be other unexpected side-effects, depending on how the value is set.

Usually, the "CellRenderer" receives the entire table instance object, including the current row and cell. This allows you to decide how to use value or other data. For example:

const columns = [
  {
    Header: 'ObjectStatus',
    accessor: 'os',
    Cell: (props: AnalyticalTableCellInstance) => {
      const { value, row } = props;
      return <ObjectStatus state={value}>{row.original.osText}</ObjectStatus>;
    },
  },
  { Header: 'Input', accessor: 'input', Cell: InputCell },
];

https://stackblitz.com/edit/ui5wcr-at-cfrb2orz?file=src%2FApp.tsx

The value is derived from the passed data. The actual text (row.original.osText) also comes from the data array, but you can use a custom text not present in the data if needed. Sorting, filtering, and grouping only work automatically for columns where the accessor matches a data field. So in case of the "ObjectStatus" column, the sort value for example, is not the displayed text, but the state (os).
For custom components, you would need to implement these data operations manually, or use server-side data operations and disable client-side logic via the respective reactTableOption (e.g., manualSortBy) Docs.