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: {