added truncated table cells

DataBiosphere · Nov 2, 2023 · 399b71b · 399b71b
1 parent 6784bb6
commit 399b71b
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 3 deletions.
diff --git a/src/components/CollapsibleTable.js b/src/components/CollapsibleTable.js
@@ -38,12 +38,15 @@ const table = {
       data: [
         {
           value: 'Row 1, Cell 1',
+          truncate: true,
         },
         {
           value: 'Row 1, Cell 2',
+          truncate: false,
         },
         {
           value: 'Row 1, Cell 3',
+          truncate: false,
         }
       ],
       subtable: {
@@ -114,6 +117,22 @@ const StyledTableCell = styled(TableCell)(() => ({
   },
 }));
 
+const TruncatedTableCell = styled(StyledTableCell)(() => ({
+  [`&.${tableCellClasses.root}`]: {
+    padding: '8px',
+    maxWidth: '20ch',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    transition: 'max-width 0.5s',
+    '&:hover': {
+      whiteSpace: 'normal',
+      overflow: 'normal',
+      wordBreak: 'break-all'
+    },
+  },
+}));
+
 const CollapsibleRow = (props) => {
   const { row, row: { subtable: { rows: subrows } }, selected, selectHandler } = props;
 
@@ -145,9 +164,14 @@ const CollapsibleRow = (props) => {
           </IconButton>
         </StyledTableCell>
         {row.data.map((cell, i) => (
-          <StyledTableCell key={i}>
-            {cell.value}
-          </StyledTableCell>
+          cell.truncate ?
+            (<TruncatedTableCell key={i}>
+              {cell.value}
+            </TruncatedTableCell>
+            ) : (
+              <StyledTableCell key={i}>
+                {cell.value}
+              </StyledTableCell>)
         ))}
       </TableRow>
       {/* subtable */}

diff --git a/src/components/data_search/DatasetSearchTable.js b/src/components/data_search/DatasetSearchTable.js
@@ -115,30 +115,39 @@ export const DatasetSearchTable = (props) => {
           data: [
             {
               value: entry[0].study.studyName,
+              truncate: true,
             },
             {
               value: entry[0].study.description,
+              truncate: false,
             },
             {
               value: entry.length,
+              truncate: true,
             },
             {
               value: isNaN(sum) ? undefined : sum,
+              truncate: true,
             },
             {
               value: entry[0].study.phenotype,
+              truncate: true,
             },
             {
               value: entry[0].study.species,
+              truncate: true,
             },
             {
               value: entry[0].study.piName,
+              truncate: true,
             },
             {
               value: entry[0].study.dataSubmitterEmail,
+              truncate: true,
             },
             {
               value: entry[0].study.dataCustodianEmail.join(', '),
+              truncate: true,
             },
           ],
           subtable: {