feat: add row id to table and update row styles

plinnegan · Jun 3, 2021 · 42f0994 · 42f0994
1 parent 1a4ce87
commit 42f0994
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 8 deletions.
diff --git a/src/App.module.css b/src/App.module.css
@@ -53,3 +53,15 @@
 .dataTable {
   width: 90vw;
 }
+
+.loaderTd {
+  width: 80px;
+}
+
+.actionTd {
+  width: 15%;
+}
+
+.loaderDiv {
+  height: 50px;
+}
diff --git a/src/components/Page.js b/src/components/Page.js
@@ -309,6 +309,7 @@ const Page = ({ metadata, existingConfig }) => {
             <TableCellHead key="selected">
               <Checkbox checked={allRowsSelected} onChange={handleAllRowsSelected} />
             </TableCellHead>
+            <TableCellHead key="rowId">Row ID</TableCellHead>
             <TableCellHead key="dsName">
               Data Set <SortButton handleClick={() => sortByColumn('dsName')} />
             </TableCellHead>

diff --git a/src/components/Row.js b/src/components/Row.js
@@ -1,11 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Button, ButtonStrip, Checkbox, TableRow, TableCell, CircularLoader } from '@dhis2/ui'
-
-const loaderTd = {
-  width: '60px',
-  height: '50px',
-}
+import classes from '../App.module.css'
 
 const Row = ({
   dsName,
@@ -24,10 +20,12 @@ const Row = ({
       <TableCell>
         <Checkbox checked={rowSelected} onChange={(e) => selectRow(rowId)} />
       </TableCell>
+      <TableCell key={`${rowId}-id`}>{rowId}</TableCell>
       <TableCell key={`${rowId}-dsName`}>{dsName}</TableCell>
       <TableCell key={`${rowId}-deName`}>{deName}</TableCell>
       <TableCell key={`${rowId}-piName`}>{piName}</TableCell>
-      <TableCell key={`${rowId}-edit`}>
+
+      <TableCell className={classes.actionTd} key={`${rowId}-edit`}>
         <ButtonStrip>
           <Button disabled={loading} secondary onClick={(e) => handleClick(rowId)}>
             Edit
@@ -40,8 +38,8 @@ const Row = ({
           </Button>
         </ButtonStrip>
       </TableCell>
-      <TableCell>
-        <div style={loaderTd}>{loading && <CircularLoader small />}</div>
+      <TableCell className={classes.loaderTd}>
+        <div className={classes.loaderDiv}>{loading && <CircularLoader small />}</div>
       </TableCell>
     </TableRow>
   )