@ons/design-system 72.10.3 → 72.10.5

package/components/table/_macro.njk

@@ -2,11 +2,27 @@
     {% from "components/button/_macro.njk" import onsButton %}
     {% from "components/icon/_macro.njk" import onsIcon %}
     {% set variants = params.variants if params.variants %}
+    {% set hasRowSpan = false %}
+    {% for row in params.thList %}
+        {% for th in row.ths %}
+            {% if th.rowspan %}
+                {% set hasRowSpan = true %}
+            {% endif %}
+        {% endfor %}
+    {% endfor %}
+
+    {% for row in params.trs %}
+        {% for td in row.tds %}
+            {% if td.rowspan %}
+                {% set hasRowSpan = true %}
+            {% endif %}
+        {% endfor %}
+    {% endfor %}
 
     {% set table %}
         <table
             {% if params.id %}id="{{ params.id }}"{% endif %}
-            class="ons-table{{ ' ' + params.tableClasses if params.tableClasses else '' }}{% if variants and variants is not string %}{% for variant in variants %}{{ ' ' }}ons-table--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-table--{{ variants }}{% endif %}"
+            class="ons-table{{ ' ' + params.tableClasses if params.tableClasses else '' }}{% if hasRowSpan %}{{ ' ' }}ons-table--has-rowspan{% endif %}{% if variants %}{% if variants is not string %}{% for variant in variants %}{{ ' ' }}ons-table--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-table--{{ variants }}{% endif %}{% endif %}"
             {% if params.sortBy and 'sortable' in variants %}
                 data-aria-sort="{{ params.sortBy }}" data-aria-asc="{{ params.ariaAsc }}" data-aria-desc="{{ params.ariaDesc }}"
             {% endif %}
@@ -17,55 +33,78 @@
                 </caption>
             {% endif %}
             <thead class="ons-table__head">
-                <tr class="ons-table__row">
-                    {% for th in params.ths %}
-                        <th
-                            scope="col"
-                            class="ons-table__header{{ ' ' + th.thClasses if th.thClasses else '' }}{{ ' ons-table__header--numeric'if th.numeric }}"
-                            {% if 'sortable' in variants %}aria-sort="{{- th.ariaSort | default('none') -}}"{% endif %}{% if th.widthPercentage %}width="{{ th.widthPercentage }}%"{% endif %}
-                        >
-                            <span class="ons-table__header-text">{{- th.value -}}</span>
-                            {% if 'sortable' in variants %}
-                                {{-
-                                    onsIcon({
-                                        "iconType": "sort-sprite",
-                                        "id": th.value | replace(' ', '-'),
-                                        "classes": 'ons-u-d-no'
-                                    })
-                                -}}
-                            {% endif %}
-                        </th>
-                    {% endfor %}
-                </tr>
+                {# Uses thList if multiple-row headers, otherwise wrap single ths array into a default group #}
+                {% if params.thList %}
+                    {% set thGroups = params.thList %}
+                {% else %}
+                    {% set thGroups = [ { ths: params.ths } ] %}
+                {% endif %}
+                {% for headerCols in thGroups %}
+                    <tr class="ons-table__row">
+                        {% for th in headerCols.ths %}
+                            <th
+                                scope="col"
+                                class="ons-table__header{{ ' ' + th.thClasses if th.thClasses else '' }}{{ ' ons-table__header--numeric' if th.numeric }}"
+                                {% if th.colspan %}colspan="{{ th.colspan }}"{% endif %}
+                                {% if th.rowspan %}rowspan="{{ th.rowspan }}"{% endif %}
+                                {% if 'sortable' in variants %}aria-sort="{{ th.ariaSort | default('none') }}"{% endif %}
+                                {% if th.widthPercentage %}width="{{ th.widthPercentage }}%"{% endif %}
+                            >
+                                <span class="ons-table__header-text">{{ th.value | safe }}</span>
+                                {% if 'sortable' in variants %}
+                                    {{-
+                                        onsIcon({
+                                            "iconType": "sort-sprite",
+                                            "id": th.value | replace(' ', '-'),
+                                            "classes": 'ons-u-d-no'
+                                        })
+                                    -}}
+                                {% endif %}
+                            </th>
+                        {% endfor %}
+                    </tr>
+                {% endfor %}
             </thead>
             <tbody class="ons-table__body">
                 {% for tr in params.trs %}
                     <tr class="ons-table__row{{ ' ons-table__row--highlight' if tr.highlight }}" {% if tr.id %}id="{{ tr.id }}"{% endif %}>
                         {% for td in tr.tds %}
-                            <td
-                                class="ons-table__cell{{ ' ' + td.tdClasses if td.tdClasses else '' }}{{ ' ons-table__cell--numeric' if td.numeric }}"
-                                {% if td.id %}id="{{ td.id }}"{% endif %}
-                                {% if td.data %}{{ ' ' }}data-th="{{ td.data }}"{% endif %}
-                                {% if td.dataSort %}{{ ' ' }}data-sort-value="{{ td.dataSort }}"{% endif %}
+                            {% if td.heading == true %}
+                                {% set openingTag = '<th' %}
+                                {% set closingTag = '</th>' %}
+                            {% else %}
+                                {% set openingTag = '<td' %}
+                                {% set closingTag = '</td>' %}
+                            {% endif %}
+                            {% set isFirstRow = loop.index == 0 and td.rowspan %}
+                            {% set rowSpan = isFirstRow and loop.index0 == rowspanCount %}
+                            {{ openingTag | safe }}
+                            class="ons-table__cell{{ ' ' + td.tdClasses if td.tdClasses else '' }}{{ ' ons-table__cell--numeric' if td.numeric }}"
+                            {% if td.id %}id="{{ td.id }}"{% endif %}
+                            {% if td.data %}{{ ' ' }}data-th="{{ td.data }}"{% endif %}
+                            {% if td.colspan %}colspan="{{ td.colspan }}"{% endif %}
+                            {% if td.rowspan %}rowspan="{{ td.rowspan }}"{% endif %}
+                            {% if td.dataSort %}{{ ' ' }}data-sort-value="{{ td.dataSort }}"{% endif %}
+                            {% if td.heading %}scope="row"{% endif %}
                             >
-                                {% if td.form %}
-                                    <form action="{{ td.form.action }}" method="{{ td.form.method | default('POST') }}">
-                                        {{ onsButton(td.form.button) }}
-                                        {% if td.form.hiddenFormField %}
-                                            {% for hiddenField in td.form.hiddenFormField %}
-                                                <input
-                                                    type="hidden"
-                                                    {% if hiddenField.name %}name="{{ hiddenField.name }}"{% endif %}
-                                                    {% if hiddenField.value %}value="{{ hiddenField.value }}"{% endif %}
-                                                />
-                                            {% endfor %}
-                                        {% endif %}
-                                    </form>
-                                {% endif %}
-                                {% if td.value %}
-                                    {{ td.value | safe }}
-                                {% endif %}
-                            </td>
+                            {% if td.form %}
+                                <form action="{{ td.form.action }}" method="{{ td.form.method | default('POST') }}">
+                                    {{ onsButton(td.form.button) }}
+                                    {% if td.form.hiddenFormField %}
+                                        {% for hiddenField in td.form.hiddenFormField %}
+                                            <input
+                                                type="hidden"
+                                                {% if hiddenField.name %}name="{{ hiddenField.name }}"{% endif %}
+                                                {% if hiddenField.value %}value="{{ hiddenField.value }}"{% endif %}
+                                            />
+                                        {% endfor %}
+                                    {% endif %}
+                                </form>
+                            {% endif %}
+                            {% if td.value %}
+                                {{ td.value | safe }}
+                            {% endif %}
+                            {{ closingTag | safe }}
                         {% endfor %}
                     </tr>
                 {% endfor %}

package/components/table/_macro.spec.js

@@ -95,6 +95,36 @@ describe('macro: table', () => {
 
             expect($('.ons-table__header').attr('width')).toBe('50%');
         });
+        it('adds additional colspan attribute to column header', () => {
+            const $ = cheerio.load(
+                renderComponent('table', {
+                    ...EXAMPLE_TABLE,
+                    ths: [
+                        {
+                            value: 'Column 1',
+                            colspan: 2,
+                        },
+                    ],
+                }),
+            );
+
+            expect($('.ons-table__header').attr('colspan')).toBe('2');
+        });
+        it('adds additional rowspan attribute to column header', () => {
+            const $ = cheerio.load(
+                renderComponent('table', {
+                    ...EXAMPLE_TABLE,
+                    ths: [
+                        {
+                            value: 'Column 1',
+                            rowspan: 2,
+                        },
+                    ],
+                }),
+            );
+
+            expect($('.ons-table__header').attr('rowspan')).toBe('2');
+        });
 
         it('does not add "numeric" modifier class to column header when `td.numeric` is not provided', () => {
             const $ = cheerio.load(renderComponent('table', EXAMPLE_TABLE));
@@ -135,6 +165,28 @@ describe('macro: table', () => {
         });
     });
 
+    describe('Multiple Header Rows', () => {
+        it('renders expected header row cells', () => {
+            const $ = cheerio.load(
+                renderComponent('table', {
+                    ...EXAMPLE_TABLE,
+                    thList: [
+                        {
+                            ths: [{ value: 'Column 1' }, { value: 'Column 2' }],
+                        },
+                        {
+                            ths: [{ value: 'Column A' }, { value: 'Column B' }],
+                        },
+                    ],
+                }),
+            );
+            const row1Values = mapAll($('.ons-table__row:nth-child(1) .ons-table__header'), (node) => node.text().trim());
+            expect(row1Values).toEqual(['Column 1', 'Column 2']);
+            const row2Values = mapAll($('.ons-table__row:nth-child(2) .ons-table__header'), (node) => node.text().trim());
+            expect(row2Values).toEqual(['Column A', 'Column B']);
+        });
+    });
+
     describe('row', () => {
         it('renders expected row cells', () => {
             const $ = cheerio.load(renderComponent('table', EXAMPLE_TABLE));
@@ -291,6 +343,44 @@ describe('macro: table', () => {
 
             expect($('.ons-table__cell').hasClass('ons-table__cell--numeric')).toBe(true);
         });
+        it('adds additional colspan attribute to row header', () => {
+            const $ = cheerio.load(
+                renderComponent('table', {
+                    ...EXAMPLE_TABLE,
+                    trs: [
+                        {
+                            tds: [
+                                {
+                                    value: 'Column 1',
+                                    colspan: 2,
+                                },
+                            ],
+                        },
+                    ],
+                }),
+            );
+
+            expect($('.ons-table__cell').attr('colspan')).toBe('2');
+        });
+        it('adds additional rowspan attribute to row header', () => {
+            const $ = cheerio.load(
+                renderComponent('table', {
+                    ...EXAMPLE_TABLE,
+                    trs: [
+                        {
+                            tds: [
+                                {
+                                    value: 'Column 1',
+                                    rowspan: 2,
+                                },
+                            ],
+                        },
+                    ],
+                }),
+            );
+
+            expect($('.ons-table__cell').attr('rowspan')).toBe('2');
+        });
 
         describe('form', () => {
             const params = {

package/components/table/_table.scss

@@ -13,10 +13,15 @@
         text-align: left;
     }
 
+    &__row:not(.ons-table__row--after-rowspan) {
+        .ons-table__cell,
+        .ons-table__header {
+            @include nth-element(1, 0);
+        }
+    }
+
     &__header,
     &__cell {
-        @include nth-element(1, 0);
-
         border-bottom: 2px solid var(--ons-color-grey-75);
         overflow: hidden;
         padding: 0.5rem 0 0.5rem 1rem;
@@ -27,6 +32,13 @@
         }
     }
 
+    &--has-rowspan {
+        .ons-table__header,
+        .ons-table__cell {
+            padding: 0.5rem 1.5rem 0.5rem 0;
+        }
+    }
+
     &__cell,
     &__header--row {
         border-bottom: 1px solid var(--ons-color-borders);
@@ -36,7 +48,7 @@
         background: var(--ons-color-highlight);
     }
 
-    &:not(.ons-table--responsive) .ons-table__body .ons-table__row:last-child {
+    &:not(.ons-table--responsive, .ons-table--has-rowspan) .ons-table__body .ons-table__row:last-child {
         .ons-table__cell,
         .ons-table__header--row {
             border: 0;

package/components/table/example-table-merge-cells.njk

@@ -0,0 +1,139 @@
+{% from "components/table/_macro.njk" import onsTable %}
+{{
+    onsTable({
+        "caption": "Table with cells merged, multiple row headers and column headers",
+        "id": "basic-table",
+        "ths": [
+            {
+                "value": "Trade Category"
+            },
+            {
+                "value": "Metrics"
+            },
+            {
+                "value": "Exports"
+            },
+            {
+                "value": "Imports"
+            },
+            {
+                "value": "Balance"
+            }
+
+        ],
+        "trs": [
+            {
+                "tds": [
+                    {
+                        "heading": true,
+                        "value": "Total trade in goods: December 2024 vs November 2024",
+                        "rowspan":3
+                    },
+                    {
+                        "heading": true,
+                        "value": "Value (£bn)"
+                    },
+                    {
+                        "value": "28.8"
+                    },
+                    {
+                        "value": "45.7"
+                    },
+                    {
+                        "value": "-16.9"
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "heading": true,
+                        "value": "Change (£bn)"
+                    },
+                    {
+                        "value": "0.0"
+                    },
+                    {
+                        "value": "-1.2"
+                    },
+                    {
+                        "value": "1.2"
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "heading": true,
+                        "value": "%Change"
+                    },
+                    {
+                        "value": "0.0"
+                    },
+                    {
+                        "value": "2.6"
+                    },
+                    {
+                        "value": ""
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "heading": true,
+                        "value": "EU: December 2024 vs November 2024",
+                        "rowspan": 3
+                    },
+                    {
+                        "value": "Value (£bn)",
+                        "heading": true
+                    },
+                    {
+                        "value": "13.6"
+                    },
+                    {
+                        "value": "24.9"
+                    },
+                    {
+                        "value": "-11.3"
+                    }
+                ]
+            },
+            {
+                "tds": [
+                   {
+                        "value": "Change (£bn)",
+                        "heading": true
+                    },
+                    {
+                        "value": "-0.5"
+                    },
+                    {
+                        "value": "-0.8"
+                    },
+                    {
+                        "value": "0.3"
+                    }
+                ]
+            },
+            {
+                "tds": [
+                   {
+                        "heading": true,
+                        "value": "%Change"
+                    },
+                    {
+                        "value": "3.5"
+                    },
+                    {
+                        "value": "-1.8"
+                    },
+                    {
+                        "value": ""
+                    }
+                ]
+            }
+        ]
+    })
+}}