aemsites / momentive

AEM Sites Edge Delivery project for Momentive.com
Apache License 2.0
0 stars 0 forks source link

Table rendering logic #54

Open badvision opened 5 months ago

badvision commented 5 months ago

This will be used for manually authored tables as well as product lists. However, there's some fancy logic that is needed so it makes sense for this to be written as reusable as possible.

Most pages on the site include tables of some kind, and many of these use combinations of rowspan and colspan. However, rowspan and colspan are not retained well in edge delivery so we have to accommodate this carefully. The simplest solution for author is to have zero row or col spans in the raw data, and only apply those based on consecutive values when rendering the table markup.

Example page: https://www.momentive.jp/content/momentive/jp/ja/Product/ProductCategories/paint-and-adhesive-additives.html#tabs-c8c2b7f433-item-0a85eb3650-tab

Consider the following data:

A  B   B   C
1  V1  V4  X1
1  V2  V3  X2
2      V3  X4

If implemented correctly, this should result in a table with row/col spans like this:

image

Other requirements:

Mobile requirements:

There are no mobile requirements for this at the moment. We might decide to indicate columns which should not appear on mobile, but the current site does not have any notion of this today.