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
apache · Jul 7, 2022 · 7e504ff · 7e504ff
1 parent ac01a1b
commit 7e504ff
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 1 deletion.
diff --git a/...perset-ui-chart-controls/src/shared-controls/components/ColumnConfigControl/constants.tsx b/...perset-ui-chart-controls/src/shared-controls/components/ColumnConfigControl/constants.tsx
@@ -40,6 +40,7 @@ export type SharedColumnConfigProp =
   | 'd3SmallNumberFormat'
   | 'd3TimeFormat'
   | 'horizontalAlign'
+  | 'truncateLongCells'
   | 'showCellBars';
 
 const emitTarget: ControlFormItemSpec<'Input'> = {
@@ -142,6 +143,14 @@ const colorPositiveNegative: ControlFormItemSpec<'Checkbox'> = {
   debounceDelay: 200,
 };
 
+const truncateLongCells: ControlFormItemSpec<'Checkbox'> = {
+  controlType: 'Checkbox',
+  label: t('Truncate Cells'),
+  description: t('Truncate long cells to the "min width" set above'),
+  defaultValue: false,
+  debounceDelay: 400,
+};
+
 /**
  * All configurable column formatting properties.
  */
@@ -159,6 +168,7 @@ export const SHARED_COLUMN_CONFIG_PROPS = {
   d3TimeFormat,
   fractionDigits,
   columnWidth,
+  truncateLongCells,
   horizontalAlign,
   showCellBars,
   alignPositiveNegative,
@@ -175,6 +185,7 @@ export const DEFAULT_CONFIG_FORM_LAYOUT: ColumnConfigFormLayout = {
       'columnWidth',
       { name: 'horizontalAlign', override: { defaultValue: 'left' } },
     ],
+    ['truncateLongCells'],
   ],
   [GenericDataType.NUMERIC]: [
     [

diff --git a/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx b/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 */

diff --git a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx b/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