feat: truncate long values in table viz, a per-column setting (#19383)

* feat: truncate long values, a per-column setting

* fix: lint

* fix: removed width for column control

* fix: removed truncate option for time, bool, and numeric columns

* prevent extra div if not truncating

superset-frontend/plugins/plugin-chart-table/src/Styles.tsx

@@ -82,6 +82,17 @@ export default styled.div`
       float: right;
     }
 
+    .dt-truncate-cell {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .dt-truncate-cell:hover {
+      overflow: visible;
+      white-space: normal;
+      height: auto;
+    }
+
     .dt-pagination {
       text-align: right;
       /* use padding instead of margin so clientHeight can capture it */

superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx

@@ -341,6 +341,8 @@ export default function TableChart<D extends DataRecord = DataRecord>(
           ? defaultColorPN
           : config.colorPositiveNegative;
 
+      const { truncateLongCells } = config;
+
       const hasColumnColorFormatters =
         isNumeric &&
         Array.isArray(columnColorFormatters) &&
@@ -411,12 +413,37 @@ export default function TableChart<D extends DataRecord = DataRecord>(
             ].join(' '),
           };
           if (html) {
+            if (truncateLongCells) {
+              // eslint-disable-next-line react/no-danger
+              return (
+                <StyledCell {...cellProps}>
+                  <div
+                    className="dt-truncate-cell"
+                    style={columnWidth ? { width: columnWidth } : undefined}
+                    dangerouslySetInnerHTML={html}
+                  />
+                </StyledCell>
+              );
+            }
             // eslint-disable-next-line react/no-danger
             return <StyledCell {...cellProps} dangerouslySetInnerHTML={html} />;
           }
           // If cellProps renderes textContent already, then we don't have to
           // render `Cell`. This saves some time for large tables.
-          return <StyledCell {...cellProps}>{text}</StyledCell>;
+          return (
+            <StyledCell {...cellProps}>
+              {truncateLongCells ? (
+                <div
+                  className="dt-truncate-cell"
+                  style={columnWidth ? { width: columnWidth } : undefined}
+                >
+                  {text}
+                </div>
+              ) : (
+                text
+              )}
+            </StyledCell>
+          );
         },
         Header: ({ column: col, onClick, style, onDragStart, onDrop }) => (
           <th