Merge pull request #204 from fedspendingtransparency/mod/10878-dtui-t…

…able-row-height-and-links

Mod/10878 dtui table row height and links

components/table/Table.jsx

@@ -18,6 +18,8 @@ require('../../styles/components/table/_table.scss');
 const propTypes = {
     columns: PropTypes.arrayOf(PropTypes.object).isRequired,
     rows: PropTypes.arrayOf(oneOfType([PropTypes.array, PropTypes.object])),
+    rowHeight: PropTypes.number,
+    headerRowHeight: PropTypes.number,
     currentSort: shape({
         direction: oneOf(['asc', 'desc']),
         field: PropTypes.string
@@ -106,13 +108,14 @@ const Table = (props) => {
                     <caption className="usa-dt-sr-only">{props.screenReaderCaption}</caption>
                 )}
                 <thead className="usda-table__head">
-                    <tr className="usda-table__row">
-                        {props.columns.map((col) => (
+                    <tr className="usda-table__row" style={{ height: props.headerRowHeight }}>
+                        {props.columns.map((col, index) => (
                             <TableHeader
                                 key={uniqueId()}
                                 currentSort={props.currentSort}
                                 updateSort={props.updateSort}
                                 stickyFirstColumn={props.stickyFirstColumn}
+                                index={index}
                                 {...col} />
                         ))}
                     </tr>
@@ -125,13 +128,14 @@ const Table = (props) => {
                                 }
                                 return acc.concat([{ ...col, displayName: '', className: 'empty-subheader' }]);
                             }, [])
-                            .map((col) => (
+                            .map((col, index) => (
                                 <TableHeader
                                     key={uniqueId()}
                                     className={col?.title ? 'nested-header' : 'empty'}
                                     currentSort={props.currentSort}
                                     updateSort={props.updateSort}
                                     stickyFirstColumn={props.stickyFirstColumn}
+                                    index={index}
                                     {...col} />
                             ))}
                     </tr>

components/table/TableData.jsx

@@ -14,6 +14,7 @@ import TableHeader from './TableHeader';
 const propTypes = {
     columns: PropTypes.arrayOf(PropTypes.object).isRequired,
     rows: PropTypes.arrayOf(oneOfType([PropTypes.array, PropTypes.object])).isRequired,
+    rowHeight: PropTypes.number,
     expandable: PropTypes.bool,
     divider: PropTypes.string,
     onClickHandler: PropTypes.func,
@@ -25,6 +26,7 @@ const propTypes = {
 const TableData = ({
     columns,
     rows,
+    rowHeight,
     expandable,
     divider,
     onClickHandler,
@@ -84,14 +86,16 @@ const TableData = ({
                                 localClickHandler(row, i);
                             }
                         }}
-                        className={`usda-table__row-item usda-table__row${oddClass}`}>
+                        className={`usda-table__row-item usda-table__row${oddClass}`}
+                        style={{ height: rowHeight }}>
                         {row.map((data, j) => (
                             columns[j]?.bodyHeader
                                 ? (
                                     <TableHeader
                                         className="table-header_body-header"
                                         key={uniqueId()}
                                         stickyFirstColumn={stickyFirstColumn}
+                                        index={j}
                                         {...data} />
                                 )
                                 : (

components/table/TableHeader.jsx

@@ -70,7 +70,8 @@ const propTypes = {
     icon: PropTypes.element,
     bodyHeader: PropTypes.bool,
     stickyFirstColumn: PropTypes.bool,
-    columnWidth: PropTypes.number
+    columnWidth: PropTypes.number,
+    index: PropTypes.number
 };
 
 const TableHeaderCell = ({
@@ -86,7 +87,8 @@ const TableHeaderCell = ({
     icon = (<></>),
     bodyHeader = false,
     stickyFirstColumn = false,
-    columnWidth
+    columnWidth,
+    index
 }) => {
     const handleClickedSort = (e, sortOn = title) => {
         updateSort(sortOn, e.target.value);
@@ -99,7 +101,7 @@ const TableHeaderCell = ({
     };
     return (
         <th
-            className={`${className} table-header${bodyHeader ? ' table-header_body-header' : ''} ${stickyFirstColumn === true ? ' stickyColumn' : ''} `}
+            className={`${className} table-header${bodyHeader ? ' table-header_body-header' : ''} ${stickyFirstColumn && index === 0 ? ' stickyColumn' : ''} `}
             style={{ minWidth: columnWidth }}
             colSpan={columnWidth ? '' : columnSpan}
             rowSpan={rowsSpan()}