diff --git a/src/components/CollapsibleTable.js b/src/components/CollapsibleTable.js
index 704e732e7..cfda9e037 100644
--- 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) => {
{row.data.map((cell, i) => (
-
- {cell.value}
-
+ cell.truncate ?
+ (
+ {cell.value}
+
+ ) : (
+
+ {cell.value}
+ )
))}
{/* subtable */}
diff --git a/src/components/data_search/DatasetSearchTable.js b/src/components/data_search/DatasetSearchTable.js
index 4a7c3a897..f666e6b57 100644
--- 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: {