[NxComparisonTablePopularCell] Multiple Bestsellers in Comparison-Table

[kfriedberger]

multiple nx-comparison-table-popular-cells in nx-comparison-table

We want to show multiple nx-comparison-table-popular-cell-elements in one nx-comparison-table. For example, the following screenshot shows three columns and two of them have a popular cell attached.

Screenshot coming from the requirements and UI designer (the black boxes represent some arbitrary text 😄 ):

🎯 Goals

We would like to use the popular-cell-element to provide information about a campaign related to the given column. Therefore, we would not only mark "one", but "several" columns as "popular-cell". We want to enter distinct content per popular cell.

The best solution for us would be something like the following code:

<nx-comparison-table>
  <ng-container nxComparisonTableRow type="header">

    <nx-comparison-table-popular-cell forColumn="2">
      <div class="has-popover">
        <span>some text</span>
        <nxt-info-icon>more text</nxt-info-icon>
      </div>
    </nx-comparison-table-popular-cell>

    <nx-comparison-table-popular-cell forColumn="3">
      <div class="has-popover">
        <span>some other text</span>
        <nxt-info-icon>more other text</nxt-info-icon>
      </div>
    </nx-comparison-table-popular-cell>

...

📖 References

I am not sure how much Allianz-internal information can be given here. Feel free to contact me in order to get more information.

👌 Requirements

• The requested solution, i.e., having multiple popular cells, is backwards-compatible with the existing solution of having zero or one popular cell.
• Multiple popular cells for distinct column-indices should be possible, each cell has its own content.
• If multiple popular cells for the same column-index are specified, it is sufficient to show only one of them (the last one?) and ignore the rest for the same column-index. Other columns should not be affected by this.
• If a popular cell for a non-existing column (like forColumn=-10) is used, it can be ignored.
• We are building a retail-application, the layout should work in desktop and mobile layout.

And of course we would be very happy about a soon execution 😄

[yd-allianz]

Hi @kfriedberger you're right, we shouldn't post any internals here on the open source board, please create an issue in our internal repository. Then we can have the discussion and add this to our process.