setup some overflow ellipsis

Author: CollinBeczak

src/components/TableShared/EnhancedTable.jsx

@@ -84,7 +84,6 @@ export const renderTableHeader = (headerGroups) => {
                   ...headerProps.style,
                   width: column.width,
                   minWidth: column.minWidth,
-                  maxWidth: column.width,
                   position: "relative",
                 }}
               >
@@ -138,7 +137,6 @@ export const renderTableHeader = (headerGroups) => {
               style={{
                 width: column.width,
                 minWidth: column.minWidth,
-                maxWidth: column.width,
               }}
             >
               {column.canFilter && (
@@ -172,3 +170,37 @@ export const TableWrapper = ({ children, className = "" }) => (
     <div className="mr-inline-block mr-min-w-full">{children}</div>
   </div>
 );
+
+/**
+ * Renders a table cell with nowrap styling
+ * @param {Object} cell - The react-table cell object
+ * @param {Object} options - Additional styling options
+ * @returns {JSX.Element} - The rendered table cell
+ */
+export const renderTableCell = (cell, options = {}) => {
+  return (
+    <td
+      {...cell.getCellProps()}
+      style={{
+        ...cell.getCellProps().style,
+        whiteSpace: "nowrap !important",
+        overflow: "hidden !important",
+        textOverflow: "ellipsis !important",
+        minWidth: cell.column.minWidth,
+        ...options,
+      }}
+    >
+      <div
+        style={{
+          overflow: "hidden !important",
+          textOverflow: "ellipsis !important",
+          whiteSpace: "nowrap !important",
+          width: "100%",
+          display: "block",
+        }}
+      >
+        {cell.render("Cell")}
+      </div>
+    </td>
+  );
+};

src/components/TaskAnalysisTable/TaskAnalysisTable.jsx

@@ -33,8 +33,13 @@ import WithLoadedTask from "../HOCs/WithLoadedTask/WithLoadedTask";
 import IntlDatePicker from "../IntlDatePicker/IntlDatePicker";
 import PaginationControl from "../PaginationControl/PaginationControl";
 import SvgSymbol from "../SvgSymbol/SvgSymbol";
-import { SearchFilter, TableWrapper, renderTableHeader } from "../TableShared/EnhancedTable";
-import { cellStyles, inputStyles, rowStyles, tableStyles } from "../TableShared/TableStyles";
+import {
+  SearchFilter,
+  TableWrapper,
+  renderTableHeader,
+  renderTableCell,
+} from "../TableShared/EnhancedTable";
+import { inputStyles, rowStyles, tableStyles } from "../TableShared/TableStyles";
 import ViewTask from "../ViewTask/ViewTask";
 import messages from "./Messages";
 import TaskAnalysisTableHeader from "./TaskAnalysisTableHeader";
@@ -285,22 +290,7 @@ export const TaskAnalysisTableInternal = (props) => {
                       className={`${row.isExpanded ? "mr-bg-black-10" : ""} ${rowStyles}`}
                     >
                       {row.cells.map((cell) => {
-                        return (
-                          <td
-                            key={cell.column.id}
-                            {...cell.getCellProps()}
-                            className={cellStyles}
-                            style={{
-                              ...cell.getCellProps().style,
-                              maxWidth: cell.column.width,
-                              minWidth: cell.column.minWidth,
-                              overflow: "hidden",
-                              height: "40px",
-                            }}
-                          >
-                            <div className="mr-cell-content">{cell.render("Cell")}</div>
-                          </td>
-                        );
+                        return renderTableCell(cell);
                       })}
                     </tr>
 
@@ -389,7 +379,18 @@ const setupColumnTypes = (props, taskBaseRoute, manager, openComments) => {
     id: "featureId",
     Header: props.intl.formatMessage(messages.featureIdLabel),
     accessor: (t) => t.name || t.title,
-    Cell: ({ value }) => value || "",
+    Cell: ({ value }) => (
+      <div
+        style={{
+          overflow: "hidden",
+          whiteSpace: "nowrap",
+          textOverflow: "ellipsis",
+          width: "100%",
+        }}
+      >
+        {value || ""}
+      </div>
+    ),
     Filter: ({ column: { filterValue, setFilter } }) => (
       <div className="mr-flex mr-items-center" onClick={(e) => e.stopPropagation()}>
         <SearchFilter
@@ -486,6 +487,7 @@ const setupColumnTypes = (props, taskBaseRoute, manager, openComments) => {
         )}
       </div>
     ),
+    width: 40,
   };
 
   columns.status = {
@@ -937,7 +939,6 @@ const setupColumnTypes = (props, taskBaseRoute, manager, openComments) => {
     accessor: "commentID",
     Cell: ({ row }) => <ViewCommentsButton onClick={() => openComments(row.original.id)} />,
     width: 110,
-
     disableSortBy: true,
   };