Merge pull request #101 from dhis2/DHIS2-11840

Closes DHIS2-11840
dhis2 · Sep 30, 2021 · 60c4665 · 60c4665
2 parents 02a56e8 + 8fa7b74
commit 60c4665
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 13 deletions.
diff --git a/src/data-workspace/display/table.js b/src/data-workspace/display/table.js
@@ -12,29 +12,43 @@ import styles from './table.module.css'
 
 // Needs to have the same width as the table, so can't use the one from
 // @dhis2/ui
-const DataTableToolbar = ({ children }) => (
+const DataTableToolbar = ({ children, columns }) => (
     <tr>
-        <th className={styles.titleCell} colSpan="2">
+        <th className={styles.titleCell} colSpan={columns.toString()}>
             {children}
         </th>
     </tr>
 )
 
 DataTableToolbar.propTypes = {
     children: PropTypes.any.isRequired,
+    columns: PropTypes.number.isRequired,
 }
 
 const Table = ({ title, columns, rows }) => (
     <>
         <DataTable className={styles.dataTable}>
             <TableHead>
-                <DataTableToolbar>{title}</DataTableToolbar>
+                <DataTableToolbar columns={columns.length}>
+                    {title}
+                </DataTableToolbar>
                 <DataTableRow>
-                    {columns.map(column => (
-                        <DataTableColumnHeader key={column}>
-                            {column}
-                        </DataTableColumnHeader>
-                    ))}
+                    <DataTableColumnHeader className={styles.cell}>
+                        <span className={styles.labelCellContent}>
+                            {columns[0]}
+                        </span>
+                    </DataTableColumnHeader>
+
+                    {columns.slice(1).map(column => {
+                        return (
+                            <DataTableColumnHeader
+                                key={column}
+                                className={styles.cell}
+                            >
+                                {column}
+                            </DataTableColumnHeader>
+                        )
+                    })}
                 </DataTableRow>
             </TableHead>
             <TableBody>
@@ -43,12 +57,17 @@ const Table = ({ title, columns, rows }) => (
 
                     return (
                         <DataTableRow key={index}>
-                            <DataTableCell className={styles.labelCell}>
-                                {firstCell}
+                            <DataTableCell className={styles.cell}>
+                                <span className={styles.labelCellContent}>
+                                    {firstCell}
+                                </span>
                             </DataTableCell>
 
                             {cells.map((value, index) => (
-                                <DataTableCell key={index}>
+                                <DataTableCell
+                                    key={index}
+                                    className={styles.cell}
+                                >
                                     {value}
                                 </DataTableCell>
                             ))}

diff --git a/src/data-workspace/display/table.module.css b/src/data-workspace/display/table.module.css
@@ -9,6 +9,14 @@ table.dataTable {
     width: auto;
 }
 
-td.labelCell {
+th.cell, td.cell {
+    height: auto;
+    min-height: 45px;
+    padding-top: 14px;
+    padding-bottom: 14px;
+}
+
+.labelCellContent, .labelCellContent {
+    display: block;
     max-width: 480px;
 }
diff --git a/src/selection-context/use-selection-context.test.js b/src/selection-context/use-selection-context.test.js
@@ -115,7 +115,7 @@ describe('useSelectionContext', () => {
     })
 
     describe('functions returned from the hook update the state and url', () => {
-        it.only('setOpenedSelect', () => {
+        it('setOpenedSelect', () => {
             const mock = jest.fn()
             pushStateToHistory.mockImplementation(mock)