CEC-3348: truncate table cell (#467)

* CEC-3348: truncate ecu list

* calc string once

* remove unused dep

src/components/Suppliers/Table/index.jsx

@@ -8,6 +8,7 @@ import {
   TableFooter,
   TablePagination,
   TableRow,
+  Tooltip,
 } from "@material-ui/core";
 import clsx from "clsx";
 
@@ -128,6 +129,7 @@ const SupplierTable = (props) => {
         />
         <TableBody>
           {suppliers.map((row, index) => {
+            const ecuList = row.ecus.join(", ");
             return (
               <TableRow key={index}>
                 <TableCell align="center">
@@ -138,7 +140,13 @@ const SupplierTable = (props) => {
                   <a href={`mailto:${row.email}`}>{row.email}</a>
                 </TableCell>
                 <TableCell align="center">{row.program}</TableCell>
-                <TableCell align="center">{row.ecus.join(", ")}</TableCell>
+                <TableCell align="center">
+                  <Tooltip title={ecuList}>
+                    <span className={classes.truncateCell}>
+                      {ecuList}
+                    </span>
+                  </Tooltip>
+                </TableCell>
                 <TableCell align="center">
                   {LocalDateTimeString(row.created)}
                 </TableCell>
@@ -159,7 +167,7 @@ const SupplierTable = (props) => {
           <TableRow>
             <TablePagination
               rowsPerPageOptions={[5, 10, 25, 100]}
-              colSpan={7}
+              colSpan={9}
               count={totalSuppliers}
               rowsPerPage={pageSize}
               page={pageIndex}