@dhis2-ui/table 10.16.2 → 10.16.3

package/src/stacked-table/stacked-table.prod.stories.js

@@ -0,0 +1,463 @@
+import { Button } from '@dhis2-ui/button'
+import React from 'react'
+import { StackedTableBody } from './stacked-table-body.js'
+import { StackedTableCellHead } from './stacked-table-cell-head.js'
+import { StackedTableCell } from './stacked-table-cell.js'
+import { StackedTableFoot } from './stacked-table-foot.js'
+import { StackedTableHead } from './stacked-table-head.js'
+import { StackedTableRowHead } from './stacked-table-row-head.js'
+import { StackedTableRow } from './stacked-table-row.js'
+import { StackedTable } from './stacked-table.js'
+
+const description = `
+Expresses tabular data such that each 'row' becomes a table section with the 'column' header in each cell. Multiple rows become multiple sections.
+
+Compose with StackedTable child components, as seen in the examples.
+
+\`\`\`js
+import {
+    StackedTable,
+    StackedTableBody,
+    StackedTableCell,
+    StackedTableCellHead,
+    StackedTableFoot,
+    StackedTableHead,
+    StackedTableRow,
+    StackedTableRowHead,
+} from 'dhis2/ui'
+\`\`\`
+`
+
+const CustomCell = (props) => (
+    <td>
+        Received props:
+        <code>
+            <pre>{JSON.stringify(props, null, 2)}</pre>
+        </code>
+    </td>
+)
+
+export default {
+    title: 'Stacked Table',
+    component: StackedTable,
+    parameters: { docs: { description: { component: description } } },
+}
+
+export const Default = (args) => (
+    <StackedTable {...args}>
+        <StackedTableHead>
+            <StackedTableRowHead>
+                <StackedTableCellHead>First name</StackedTableCellHead>
+                <StackedTableCellHead>Last name</StackedTableCellHead>
+                <StackedTableCellHead>Incident date</StackedTableCellHead>
+                <StackedTableCellHead>Last updated</StackedTableCellHead>
+                <StackedTableCellHead>Age</StackedTableCellHead>
+                <StackedTableCellHead>Registering unit</StackedTableCellHead>
+                <StackedTableCellHead>Assigned user</StackedTableCellHead>
+                <StackedTableCellHead>Status</StackedTableCellHead>
+            </StackedTableRowHead>
+        </StackedTableHead>
+        <StackedTableBody>
+            <StackedTableRow>
+                <StackedTableCell>Onyekachukwu</StackedTableCell>
+                <StackedTableCell>Kariuki</StackedTableCell>
+                <StackedTableCell>02/06/2007</StackedTableCell>
+                <StackedTableCell>05/25/1972</StackedTableCell>
+                <StackedTableCell>66</StackedTableCell>
+                <StackedTableCell>Jawi</StackedTableCell>
+                <StackedTableCell>Sofie Hubert</StackedTableCell>
+                <StackedTableCell>Incomplete</StackedTableCell>
+            </StackedTableRow>
+        </StackedTableBody>
+        <StackedTableFoot>
+            <StackedTableRow>
+                <StackedTableCell colSpan="8" hideTitle>
+                    <Button primary>StackedTable footer button</Button>
+                </StackedTableCell>
+            </StackedTableRow>
+        </StackedTableFoot>
+    </StackedTable>
+)
+
+export const HiddenLabel = (args) => (
+    <StackedTable {...args}>
+        <StackedTableHead>
+            <StackedTableRowHead>
+                <StackedTableCellHead>First name</StackedTableCellHead>
+                <StackedTableCellHead>Last name</StackedTableCellHead>
+                <StackedTableCellHead>Incident date</StackedTableCellHead>
+                <StackedTableCellHead>Last updated</StackedTableCellHead>
+                <StackedTableCellHead>Age</StackedTableCellHead>
+                <StackedTableCellHead>Registering unit</StackedTableCellHead>
+                <StackedTableCellHead>Assigned user</StackedTableCellHead>
+                <StackedTableCellHead />
+            </StackedTableRowHead>
+        </StackedTableHead>
+        <StackedTableBody>
+            <StackedTableRow>
+                <StackedTableCell>Onyekachukwu</StackedTableCell>
+                <StackedTableCell>Kariuki</StackedTableCell>
+                <StackedTableCell>02/06/2007</StackedTableCell>
+                <StackedTableCell>05/25/1972</StackedTableCell>
+                <StackedTableCell>66</StackedTableCell>
+                <StackedTableCell>Jawi</StackedTableCell>
+                <StackedTableCell>Sofie Hubert</StackedTableCell>
+                <StackedTableCell>
+                    <Button
+                        primary
+                        onClick={() => alert('something should happen now')}
+                    >
+                        A row action
+                    </Button>
+                </StackedTableCell>
+            </StackedTableRow>
+        </StackedTableBody>
+    </StackedTable>
+)
+
+export const HiddenLabelInCell = (args) => (
+    <StackedTable {...args}>
+        <StackedTableHead>
+            <StackedTableRowHead>
+                <StackedTableCellHead>First name</StackedTableCellHead>
+                <StackedTableCellHead>Last name</StackedTableCellHead>
+                <StackedTableCellHead>Incident date</StackedTableCellHead>
+                <StackedTableCellHead>Last updated</StackedTableCellHead>
+                <StackedTableCellHead>Age</StackedTableCellHead>
+                <StackedTableCellHead>Registering unit</StackedTableCellHead>
+                <StackedTableCellHead>Assigned user</StackedTableCellHead>
+                <StackedTableCellHead>Status</StackedTableCellHead>
+            </StackedTableRowHead>
+        </StackedTableHead>
+        <StackedTableBody>
+            <StackedTableRow>
+                <StackedTableCell>Onyekachukwu</StackedTableCell>
+                <StackedTableCell>Kariuki</StackedTableCell>
+                <StackedTableCell>02/06/2007</StackedTableCell>
+                <StackedTableCell>05/25/1972</StackedTableCell>
+                <StackedTableCell>66</StackedTableCell>
+                <StackedTableCell>Jawi</StackedTableCell>
+                <StackedTableCell>Sofie Hubert</StackedTableCell>
+                <StackedTableCell hideTitle>
+                    <Button
+                        primary
+                        onClick={() => alert('something should happen now')}
+                    >
+                        A row action
+                    </Button>
+                </StackedTableCell>
+            </StackedTableRow>
+            <StackedTableRow>
+                <StackedTableCell>Onyekachukwu</StackedTableCell>
+                <StackedTableCell>Kariuki</StackedTableCell>
+                <StackedTableCell>02/06/2007</StackedTableCell>
+                <StackedTableCell>05/25/1972</StackedTableCell>
+                <StackedTableCell>66</StackedTableCell>
+                <StackedTableCell>Jawi</StackedTableCell>
+                <StackedTableCell>Sofie Hubert</StackedTableCell>
+                <StackedTableCell>Incomplete</StackedTableCell>
+            </StackedTableRow>
+        </StackedTableBody>
+    </StackedTable>
+)
+
+export const ColspanInHeader = (args) => (
+    <StackedTable {...args}>
+        <StackedTableHead>
+            <StackedTableRowHead>
+                <StackedTableCellHead colSpan="2">Name</StackedTableCellHead>
+                <StackedTableCellHead>Incident date</StackedTableCellHead>
+                <StackedTableCellHead>Last updated</StackedTableCellHead>
+                <StackedTableCellHead>Age</StackedTableCellHead>
+                <StackedTableCellHead>Registering unit</StackedTableCellHead>
+                <StackedTableCellHead>Assigned user</StackedTableCellHead>
+                <StackedTableCellHead>Status</StackedTableCellHead>
+            </StackedTableRowHead>
+        </StackedTableHead>
+        <StackedTableBody>
+            <StackedTableRow>
+                <StackedTableCell>Onyekachukwu</StackedTableCell>
+                <StackedTableCell>Kariuki</StackedTableCell>
+                <StackedTableCell>02/06/2007</StackedTableCell>
+                <StackedTableCell>05/25/1972</StackedTableCell>
+                <StackedTableCell>66</StackedTableCell>
+                <StackedTableCell>Jawi</StackedTableCell>
+                <StackedTableCell>Sofie Hubert</StackedTableCell>
+                <StackedTableCell>Incomplete</StackedTableCell>
+            </StackedTableRow>
+        </StackedTableBody>
+    </StackedTable>
+)
+
+export const ColspanInBody = (args) => (
+    <StackedTable {...args}>
+        <StackedTableHead>
+            <StackedTableRowHead>
+                <StackedTableCellHead>First name</StackedTableCellHead>
+                <StackedTableCellHead>Last name</StackedTableCellHead>
+                <StackedTableCellHead>Incident date</StackedTableCellHead>
+                <StackedTableCellHead>Last updated</StackedTableCellHead>
+                <StackedTableCellHead>Age</StackedTableCellHead>
+                <StackedTableCellHead>Registering unit</StackedTableCellHead>
+                <StackedTableCellHead>Assigned user</StackedTableCellHead>
+                <StackedTableCellHead>Status</StackedTableCellHead>
+            </StackedTableRowHead>
+        </StackedTableHead>
+        <StackedTableBody>
+            <StackedTableRow>
+                <StackedTableCell>Onyekachukwu</StackedTableCell>
+                <StackedTableCell>Kariuki</StackedTableCell>
+                <StackedTableCell colSpan="2">
+                    {
+                        "Colspan 2 here. Next cell doesn't get header 'Last updated'."
+                    }
+                </StackedTableCell>
+                <StackedTableCell>66</StackedTableCell>
+                <StackedTableCell>Jawi</StackedTableCell>
+                <StackedTableCell>Sofie Hubert</StackedTableCell>
+                <StackedTableCell>Incomplete</StackedTableCell>
+            </StackedTableRow>
+            <StackedTableRow>
+                <StackedTableCell>Onyekachukwu</StackedTableCell>
+                <StackedTableCell>Kariuki</StackedTableCell>
+                <StackedTableCell>02/06/2007</StackedTableCell>
+                <StackedTableCell>05/25/1972</StackedTableCell>
+                <StackedTableCell>66</StackedTableCell>
+                <StackedTableCell>Jawi</StackedTableCell>
+                <StackedTableCell>Sofie Hubert</StackedTableCell>
+                <StackedTableCell>Incomplete</StackedTableCell>
+            </StackedTableRow>
+        </StackedTableBody>
+    </StackedTable>
+)
+
+export const MultipleHeaderRows = (args) => (
+    <StackedTable {...args}>
+        <StackedTableHead>
+            <StackedTableRowHead>
+                <StackedTableCellHead colSpan="2">Name</StackedTableCellHead>
+                <StackedTableCellHead>Incident date</StackedTableCellHead>
+                <StackedTableCellHead>Last updated</StackedTableCellHead>
+                <StackedTableCellHead>Age</StackedTableCellHead>
+                <StackedTableCellHead>Registering unit</StackedTableCellHead>
+                <StackedTableCellHead>Assigned user</StackedTableCellHead>
+                <StackedTableCellHead>Status</StackedTableCellHead>
+            </StackedTableRowHead>
+            <StackedTableRowHead>
+                <StackedTableCellHead>First name</StackedTableCellHead>
+                <StackedTableCellHead>Last name</StackedTableCellHead>
+                <StackedTableCellHead colSpan="6"></StackedTableCellHead>
+            </StackedTableRowHead>
+        </StackedTableHead>
+        <StackedTableBody>
+            <StackedTableRow>
+                <StackedTableCell>Onyekachukwu</StackedTableCell>
+                <StackedTableCell>Kariuki</StackedTableCell>
+                <StackedTableCell>02/06/2007</StackedTableCell>
+                <StackedTableCell>05/25/1972</StackedTableCell>
+                <StackedTableCell>66</StackedTableCell>
+                <StackedTableCell>Jawi</StackedTableCell>
+                <StackedTableCell>Sofie Hubert</StackedTableCell>
+                <StackedTableCell>Incomplete</StackedTableCell>
+            </StackedTableRow>
+        </StackedTableBody>
+    </StackedTable>
+)
+
+export const LongTitle = (args) => (
+    <StackedTable {...args}>
+        <StackedTableHead>
+            <StackedTableRowHead>
+                <StackedTableCellHead>
+                    This title is so long, it should be displayed in multiple
+                    lines. Lorem ipsum dolor sit amet, consetetur sadipscing
+                    elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+                    dolore magna aliquyam erat, sed diam voluptua. At vero eos
+                    et accusam et justo duo dolores et ea rebum. Stet clita kasd
+                    gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+                    amet. Lorem ipsum dolor sit amet, consetetur sadipscing
+                    elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+                    dolore magna aliquyam erat, sed diam voluptua. At vero eos
+                    et accusam et justo duo dolores et ea rebum. Stet clita kasd
+                    gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+                    amet.
+                </StackedTableCellHead>
+            </StackedTableRowHead>
+        </StackedTableHead>
+        <StackedTableBody>
+            <StackedTableRow>
+                <StackedTableCell>Onyekachukwu</StackedTableCell>
+            </StackedTableRow>
+        </StackedTableBody>
+    </StackedTable>
+)
+
+export const _CustomCell = (args) => (
+    <StackedTable {...args}>
+        <StackedTableHead>
+            <StackedTableRowHead>
+                <StackedTableCellHead colSpan="2">Name</StackedTableCellHead>
+                <StackedTableCellHead>Incident date</StackedTableCellHead>
+            </StackedTableRowHead>
+        </StackedTableHead>
+        <StackedTableBody>
+            <StackedTableRow>
+                <CustomCell>Onyekachukwu</CustomCell>
+                <CustomCell>Kariuki</CustomCell>
+                <CustomCell>02/06/2007</CustomCell>
+            </StackedTableRow>
+        </StackedTableBody>
+    </StackedTable>
+)
+
+export const CustomCellTitle = (args) => (
+    <StackedTable {...args}>
+        <StackedTableHead>
+            <StackedTableRowHead>
+                <StackedTableCellHead colSpan="2">Name</StackedTableCellHead>
+                <StackedTableCellHead>Incident date</StackedTableCellHead>
+            </StackedTableRowHead>
+        </StackedTableHead>
+        <StackedTableBody>
+            <StackedTableRow>
+                <StackedTableCell>Onyekachukwu</StackedTableCell>
+                <StackedTableCell title="Custom title">
+                    Kariuki
+                </StackedTableCell>
+                <StackedTableCell>02/06/2007</StackedTableCell>
+            </StackedTableRow>
+        </StackedTableBody>
+    </StackedTable>
+)
+
+export const LargerTable = (args) => (
+    <StackedTable {...args}>
+        <StackedTableHead>
+            <StackedTableRowHead>
+                <StackedTableCellHead>First name</StackedTableCellHead>
+                <StackedTableCellHead>Last name</StackedTableCellHead>
+                <StackedTableCellHead>Incident date</StackedTableCellHead>
+                <StackedTableCellHead>Last updated</StackedTableCellHead>
+                <StackedTableCellHead>Age</StackedTableCellHead>
+                <StackedTableCellHead>Registering unit</StackedTableCellHead>
+                <StackedTableCellHead>Assigned user</StackedTableCellHead>
+                <StackedTableCellHead>Status</StackedTableCellHead>
+            </StackedTableRowHead>
+        </StackedTableHead>
+        <StackedTableBody>
+            <StackedTableRow>
+                <StackedTableCell>Onyekachukwu</StackedTableCell>
+                <StackedTableCell>Kariuki</StackedTableCell>
+                <StackedTableCell>02/06/2007</StackedTableCell>
+                <StackedTableCell>05/25/1972</StackedTableCell>
+                <StackedTableCell>66</StackedTableCell>
+                <StackedTableCell>Jawi</StackedTableCell>
+                <StackedTableCell>Sofie Hubert</StackedTableCell>
+                <StackedTableCell>Incomplete</StackedTableCell>
+            </StackedTableRow>
+            <StackedTableRow>
+                <StackedTableCell>Kwasi</StackedTableCell>
+                <StackedTableCell>Okafor</StackedTableCell>
+                <StackedTableCell>08/11/2010</StackedTableCell>
+                <StackedTableCell>02/26/1991</StackedTableCell>
+                <StackedTableCell>38</StackedTableCell>
+                <StackedTableCell>Mokassie MCHP</StackedTableCell>
+                <StackedTableCell>Dashonte Clarke</StackedTableCell>
+                <StackedTableCell>Complete</StackedTableCell>
+            </StackedTableRow>
+            <StackedTableRow>
+                <StackedTableCell>Siyabonga</StackedTableCell>
+                <StackedTableCell>Abiodun</StackedTableCell>
+                <StackedTableCell>07/21/1981</StackedTableCell>
+                <StackedTableCell>02/06/2007</StackedTableCell>
+                <StackedTableCell>98</StackedTableCell>
+                <StackedTableCell>Bathurst MCHP</StackedTableCell>
+                <StackedTableCell>Unassigned</StackedTableCell>
+                <StackedTableCell>Incomplete</StackedTableCell>
+            </StackedTableRow>
+            <StackedTableRow>
+                <StackedTableCell>Chiyembekezo</StackedTableCell>
+                <StackedTableCell>Okeke</StackedTableCell>
+                <StackedTableCell>01/23/1982</StackedTableCell>
+                <StackedTableCell>07/15/2003</StackedTableCell>
+                <StackedTableCell>2</StackedTableCell>
+                <StackedTableCell>Mayolla MCHP</StackedTableCell>
+                <StackedTableCell>Wan Gengxin</StackedTableCell>
+                <StackedTableCell>Incomplete</StackedTableCell>
+            </StackedTableRow>
+            <StackedTableRow>
+                <StackedTableCell>Mtendere</StackedTableCell>
+                <StackedTableCell>Afolayan</StackedTableCell>
+                <StackedTableCell>08/12/1994</StackedTableCell>
+                <StackedTableCell>05/12/1972</StackedTableCell>
+                <StackedTableCell>37</StackedTableCell>
+                <StackedTableCell>Gbangadu MCHP</StackedTableCell>
+                <StackedTableCell>Gvozden Boskovsky</StackedTableCell>
+                <StackedTableCell>Complete</StackedTableCell>
+            </StackedTableRow>
+            <StackedTableRow>
+                <StackedTableCell>Inyene</StackedTableCell>
+                <StackedTableCell>Okonkwo</StackedTableCell>
+                <StackedTableCell>04/01/1971</StackedTableCell>
+                <StackedTableCell>03/16/2000</StackedTableCell>
+                <StackedTableCell>70</StackedTableCell>
+                <StackedTableCell>Kunike Barina</StackedTableCell>
+                <StackedTableCell>Oscar de la Cavallería</StackedTableCell>
+                <StackedTableCell>Complete</StackedTableCell>
+            </StackedTableRow>
+            <StackedTableRow>
+                <StackedTableCell>Amaka</StackedTableCell>
+                <StackedTableCell>Pretorius</StackedTableCell>
+                <StackedTableCell>01/25/1996</StackedTableCell>
+                <StackedTableCell>09/15/1986</StackedTableCell>
+                <StackedTableCell>32</StackedTableCell>
+                <StackedTableCell>Bargbo</StackedTableCell>
+                <StackedTableCell>Alberto Raya</StackedTableCell>
+                <StackedTableCell>Incomplete</StackedTableCell>
+            </StackedTableRow>
+            <StackedTableRow>
+                <StackedTableCell>Meti</StackedTableCell>
+                <StackedTableCell>Abiodun</StackedTableCell>
+                <StackedTableCell>10/24/2010</StackedTableCell>
+                <StackedTableCell>07/26/1989</StackedTableCell>
+                <StackedTableCell>8</StackedTableCell>
+                <StackedTableCell>Majihun MCHP</StackedTableCell>
+                <StackedTableCell>Unassigned</StackedTableCell>
+                <StackedTableCell>Complete</StackedTableCell>
+            </StackedTableRow>
+            <StackedTableRow>
+                <StackedTableCell>Eshe</StackedTableCell>
+                <StackedTableCell>Okeke</StackedTableCell>
+                <StackedTableCell>01/31/1995</StackedTableCell>
+                <StackedTableCell>01/31/1995</StackedTableCell>
+                <StackedTableCell>63</StackedTableCell>
+                <StackedTableCell>Mambiama CHP</StackedTableCell>
+                <StackedTableCell>Shadrias Pearson</StackedTableCell>
+                <StackedTableCell>Incomplete</StackedTableCell>
+            </StackedTableRow>
+            <StackedTableRow>
+                <StackedTableCell>Obi</StackedTableCell>
+                <StackedTableCell>Okafor</StackedTableCell>
+                <StackedTableCell>06/07/1990</StackedTableCell>
+                <StackedTableCell>01/03/2006</StackedTableCell>
+                <StackedTableCell>28</StackedTableCell>
+                <StackedTableCell>Dalakuru CHP</StackedTableCell>
+                <StackedTableCell>Anatoliy Shcherbatykh</StackedTableCell>
+                <StackedTableCell>Incomplete</StackedTableCell>
+            </StackedTableRow>
+        </StackedTableBody>
+        <StackedTableFoot>
+            <StackedTableRow>
+                <StackedTableCell colSpan="8" hideTitle>
+                    <Button primary>StackedTable footer button</Button>
+                </StackedTableCell>
+            </StackedTableRow>
+        </StackedTableFoot>
+    </StackedTable>
+)
+
+export const RTL = (args) => (
+    <div dir="rtl">
+        <Default {...args} />
+    </div>
+)

package/src/stacked-table/stacked-table.test.js

@@ -0,0 +1,127 @@
+/* eslint-disable react/prop-types */
+import { mount } from 'enzyme'
+import React from 'react'
+import { StackedTableBody } from './stacked-table-body.js'
+import { StackedTableCellHead } from './stacked-table-cell-head.js'
+import { StackedTableCell } from './stacked-table-cell.js'
+import { StackedTableHead } from './stacked-table-head.js'
+import { StackedTableRowHead } from './stacked-table-row-head.js'
+import { StackedTableRow } from './stacked-table-row.js'
+import { StackedTable } from './stacked-table.js'
+
+const Table = ({ headerLabels, bodyLabels }) => (
+    <StackedTable>
+        <StackedTableHead>
+            <StackedTableRowHead>
+                {headerLabels.map(({ label, ...props }, index) => (
+                    <StackedTableCellHead {...props} key={label + index}>
+                        {label}
+                    </StackedTableCellHead>
+                ))}
+            </StackedTableRowHead>
+        </StackedTableHead>
+        <StackedTableBody>
+            <StackedTableRow>
+                {bodyLabels.map(({ label, ...props }) => (
+                    <StackedTableCell {...props} key={label}>
+                        {label}
+                    </StackedTableCell>
+                ))}
+            </StackedTableRow>
+        </StackedTableBody>
+    </StackedTable>
+)
+
+describe('StackedTable', () => {
+    const headerLabels = [
+        { label: 'First name', colSpan: '1' },
+        { label: 'Last name', colSpan: '1' },
+        { label: 'Incident date', colSpan: '1' },
+        { label: 'Last updated', colSpan: '1' },
+        { label: 'Age', colSpan: '1' },
+        { label: 'Registering unit', colSpan: '1' },
+        { label: 'Assigned user', colSpan: '1' },
+        { label: 'Status', colSpan: '1' },
+    ]
+
+    const bodyLabels = [
+        { label: 'Onyekachukwu' },
+        { label: 'Kariuki' },
+        { label: '02/06/2007' },
+        { label: '05/25/1972' },
+        { label: '66' },
+        { label: 'Jawi' },
+        { label: 'Sofie Hubert' },
+        { label: 'Incomplete' },
+    ]
+
+    it('should add the headerLabels to each cell', () => {
+        const table = mount(
+            <Table headerLabels={headerLabels} bodyLabels={bodyLabels} />
+        )
+        const cells = table.find('td')
+
+        headerLabels.forEach((label, index) => {
+            const cell = cells.at(index)
+            const title = cell.find('.title').text()
+
+            expect(title).toBe(headerLabels[index].label)
+        })
+    })
+
+    it('should not add empty header labels to the body cells', () => {
+        const emptyLabelIndex = 2
+        const headerLabelsWithEmpty = [
+            ...headerLabels.slice(0, emptyLabelIndex),
+            '',
+            ...headerLabels.slice(emptyLabelIndex + 1),
+        ]
+        const table = mount(
+            <Table
+                headerLabels={headerLabelsWithEmpty}
+                bodyLabels={bodyLabels}
+            />
+        )
+        const cells = table.find('td')
+        const cell = cells.at(emptyLabelIndex)
+        const title = cell.find('.title')
+
+        expect(title).toHaveLength(0)
+    })
+
+    it('should add a header label with a colspan higher than 1 to multiple body cells', () => {
+        const indexWithColspan = 1
+        const colSpan = 3
+        const originalHeaderLabel = headerLabels[indexWithColspan]
+        const headerLabelsWithColspan = [
+            ...headerLabels.slice(0, indexWithColspan),
+            { ...originalHeaderLabel, colSpan: `${colSpan}` },
+            ...headerLabels.slice(indexWithColspan + colSpan),
+        ]
+        const table = mount(
+            <Table
+                headerLabels={headerLabelsWithColspan}
+                bodyLabels={bodyLabels}
+            />
+        )
+        const cells = table.find('td')
+        const label = headerLabelsWithColspan[indexWithColspan].label
+
+        // all body cells that are group under the single header should share the same label
+        for (let i = 0; i < colSpan; ++i) {
+            const index = indexWithColspan + i
+            const cell = cells.at(index)
+            expect(cell).toHaveLength(1)
+
+            const title = cell.find('.title')
+            expect(title.text()).toBe(label)
+        }
+
+        // the next body cell should have the label of the next header cell
+        const titleAfterColspan =
+            headerLabelsWithColspan[indexWithColspan + 1].label
+        const cellAfterColspan = cells.at(indexWithColspan + colSpan)
+        expect(cellAfterColspan).toHaveLength(1)
+        expect(cellAfterColspan.find('.title').text()).toBe(titleAfterColspan)
+    })
+})

package/src/stacked-table/supply-header-labels-to-children.js

@@ -0,0 +1,7 @@
+import { Children, cloneElement } from 'react'
+
+export const supplyHeaderLabelsToChildren = (headerLabels, children) => {
+    return Children.map(children, (child) => {
+        return cloneElement(child, { headerLabels })
+    })
+}

package/src/stacked-table/table-context.js

@@ -0,0 +1,4 @@
+import { createContext } from 'react'
+
+export const TableContext = createContext({ headerLabels: [] })
+export const { Provider, Consumer } = TableContext

package/src/stacked-table/table.js

@@ -0,0 +1,28 @@
+import { colors } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const Table = ({ children, className, dataTest }) => (
+    <table className={className} data-test={dataTest}>
+        {children}
+
+        <style jsx>{`
+            table {
+                display: block;
+                border: 0;
+                background-color: ${colors.white};
+                min-width: 100%;
+                text-align: left;
+                border-collapse: collapse;
+                vertical-align: top;
+                color: ${colors.grey900};
+            }
+        `}</style>
+    </table>
+)
+
+Table.propTypes = {
+    children: PropTypes.node.isRequired,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+}

package/src/table/index.js

@@ -0,0 +1,8 @@
+export { Table } from './table.js'
+export { TableFoot } from './table-foot.js'
+export { TableBody } from './table-body.js'
+export { TableHead } from './table-head.js'
+export { TableCell } from './table-cell.js'
+export { TableCellHead } from './table-cell-head.js'
+export { TableRow } from './table-row.js'
+export { TableRowHead } from './table-row-head.js'

package/src/table/table-body.js

@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const TableBody = ({
+    children,
+    className,
+    dataTest = 'dhis2-uicore-tablebody',
+    role,
+}) => (
+    <tbody className={className} data-test={dataTest} role={role}>
+        {children}
+    </tbody>
+)
+
+TableBody.propTypes = {
+    /** Should be `<TableRow>` components */
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    role: PropTypes.string,
+}