@vizzly/dashboard 0.15.0-dev-4dcf5f3e42e92939920ea086ff4075b84ebf01f2 → 0.15.0-dev-265f9c3692c37bc38f3628648bf4eccc11e1034c

package/dist/dashboard.esm.js

@@ -55646,7 +55646,9 @@ var VisualFormatCell = function VisualFormatCell(_ref) {
     column = _ref.column,
     visualFormatColumns = _ref.visualFormatColumns,
     columnValues = _ref.columnValues,
-    conditionalFormattingColor = _ref.conditionalFormattingColor;
+    conditionalFormattingColor = _ref.conditionalFormattingColor,
+    labelWidthPx = _ref.labelWidthPx,
+    shouldTruncate = _ref.shouldTruncate;
   var shouldShowHorizontalBar = visualFormatColumns.some(function (vf) {
     return vf.field === column.fieldId && vf["function"] === column["function"];
   });
@@ -55659,6 +55661,7 @@ var VisualFormatCell = function VisualFormatCell(_ref) {
     });
   }
   if (isNumeric) {
+    var _ref2;
     var actualMax = Math.max.apply(Math, columnValues);
     var percentage = calculatePercentage(numericValue, actualMax);
     var barColor = getBarColor(conditionalFormattingColor, theme);
@@ -55666,18 +55669,22 @@ var VisualFormatCell = function VisualFormatCell(_ref) {
       style: {
         display: 'flex',
         alignItems: 'center',
-        gap: '0.75rem',
+        gap: '0.5rem',
         padding: '2px'
       },
       children: [jsx("span", {
         style: {
           fontSize: '0.8125rem',
-          minWidth: 'fit-content',
+          width: labelWidthPx + "px",
           whiteSpace: 'nowrap',
+          textAlign: 'left',
+          overflow: shouldTruncate ? 'hidden' : undefined,
+          textOverflow: shouldTruncate ? 'ellipsis' : undefined,
           fontWeight: 'normal',
           marginRight: 'auto',
           flexShrink: 0
         },
+        title: String((_ref2 = displayValue != null ? displayValue : value) != null ? _ref2 : ''),
         children: displayValue != null ? displayValue : value
       }), !!value && jsxs("svg", {
         width: "100%",
@@ -55706,7 +55713,7 @@ var VisualFormatCell = function VisualFormatCell(_ref) {
           } : {
             name: "1qyjf6m-VisualFormatCell",
             styles: "cursor:pointer;transition:width 0.3s ease;label:VisualFormatCell;",
-            map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlZpc3VhbEZvcm1hdENlbGwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlGeUIiLCJmaWxlIjoiVmlzdWFsRm9ybWF0Q2VsbC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jc3MnO1xuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IFRhYmxlQ29udGVudCB9IGZyb20gJ3NoYXJlZC1sb2dpYy9zcmMvRGF0YVRhYmxlL3R5cGVzJztcbmltcG9ydCAqIGFzIERhdHVtS2V5IGZyb20gJ3NoYXJlZC1sb2dpYy9zcmMvRGF0dW1LZXknO1xuaW1wb3J0IHsgUXVlcnlBdHRyaWJ1dGVzIH0gZnJvbSAnc2hhcmVkLWxvZ2ljL3NyYy9RdWVyeUF0dHJpYnV0ZXMvdHlwZXMnO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tICcuLi8uLi9jb250ZXh0cy9UaGVtZVByb3ZpZGVyJztcbmltcG9ydCB7IFZpenpseVRoZW1pbmcgfSBmcm9tICcuLi8uLi90eXBlcyc7XG5cbmludGVyZmFjZSBWaXN1YWxGb3JtYXRDZWxsUHJvcHMge1xuICB2YWx1ZTogVGFibGVDb250ZW50Wyd2YWx1ZSddO1xuICBkaXNwbGF5VmFsdWU6IFRhYmxlQ29udGVudFsnZGlzcGxheVZhbHVlJ107XG4gIGNvbHVtbjogRGF0dW1LZXkuUGFyc2VkRGF0dW1LZXk7XG4gIHZpc3VhbEZvcm1hdENvbHVtbnM6IFF1ZXJ5QXR0cmlidXRlcy5NZWFzdXJlW107XG4gIGNvbHVtblZhbHVlczogbnVtYmVyW107XG4gIGNvbmRpdGlvbmFsRm9ybWF0dGluZ0NvbG9yPzogc3RyaW5nO1xufVxuXG5jb25zdCBjYWxjdWxhdGVQZXJjZW50YWdlID0gKHZhbHVlOiBudW1iZXIsIG1heDogbnVtYmVyKTogbnVtYmVyID0+IHtcbiAgaWYgKG1heCA9PT0gMCkgcmV0dXJuIDA7XG4gIGlmICh2YWx1ZSA8IDApIHJldHVybiAwO1xuICByZXR1cm4gKHZhbHVlIC8gbWF4KSAqIDEwMDtcbn07XG5cbmV4cG9ydCBjb25zdCBWaXN1YWxGb3JtYXRDZWxsOiBSZWFjdC5GQzxWaXN1YWxGb3JtYXRDZWxsUHJvcHM+ID0gKHtcbiAgdmFsdWUsXG4gIGRpc3BsYXlWYWx1ZSxcbiAgY29sdW1uLFxuICB2aXN1YWxGb3JtYXRDb2x1bW5zLFxuICBjb2x1bW5WYWx1ZXMsXG4gIGNvbmRpdGlvbmFsRm9ybWF0dGluZ0NvbG9yLFxufSkgPT4ge1xuICBjb25zdCBzaG91bGRTaG93SG9yaXpvbnRhbEJhciA9IHZpc3VhbEZvcm1hdENvbHVtbnMuc29tZShcbiAgICAodmYpID0+IHZmLmZpZWxkID09PSBjb2x1bW4uZmllbGRJZCAmJiB2Zi5mdW5jdGlvbiA9PT0gY29sdW1uLmZ1bmN0aW9uLFxuICApO1xuXG4gIGNvbnN0IG51bWVyaWNWYWx1ZSA9IE51bWJlcih2YWx1ZSk7XG4gIGNvbnN0IGlzTnVtZXJpYyA9ICFpc05hTihudW1lcmljVmFsdWUpO1xuXG4gIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKTtcblxuICBpZiAoIXNob3VsZFNob3dIb3Jpem9udGFsQmFyICYmICFpc051bWVyaWMpIHtcbiAgICByZXR1cm4gPHNwYW4+e2Rpc3BsYXlWYWx1ZSB8fCB2YWx1ZX08L3NwYW4+O1xuICB9XG5cbiAgaWYgKGlzTnVtZXJpYykge1xuICAgIGNvbnN0IGFjdHVhbE1heCA9IE1hdGgubWF4KC4uLmNvbHVtblZhbHVlcyk7XG4gICAgY29uc3QgcGVyY2VudGFnZSA9IGNhbGN1bGF0ZVBlcmNlbnRhZ2UobnVtZXJpY1ZhbHVlLCBhY3R1YWxNYXgpO1xuICAgIGNvbnN0IGJhckNvbG9yID0gZ2V0QmFyQ29sb3IoY29uZGl0aW9uYWxGb3JtYXR0aW5nQ29sb3IsIHRoZW1lKTtcblxuICAgIHJldHVybiAoXG4gICAgICA8ZGl2XG4gICAgICAgIHN0eWxlPXt7XG4gICAgICAgICAgZGlzcGxheTogJ2ZsZXgnLFxuICAgICAgICAgIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICAgICAgICAgIGdhcDogJzAuNzVyZW0nLFxuICAgICAgICAgIHBhZGRpbmc6ICcycHgnLFxuICAgICAgICB9fVxuICAgICAgPlxuICAgICAgICA8c3BhblxuICAgICAgICAgIHN0eWxlPXt7XG4gICAgICAgICAgICBmb250U2l6ZTogJzAuODEyNXJlbScsXG4gICAgICAgICAgICBtaW5XaWR0aDogJ2ZpdC1jb250ZW50JyxcbiAgICAgICAgICAgIHdoaXRlU3BhY2U6ICdub3dyYXAnLFxuICAgICAgICAgICAgZm9udFdlaWdodDogJ25vcm1hbCcsXG4gICAgICAgICAgICBtYXJnaW5SaWdodDogJ2F1dG8nLFxuICAgICAgICAgICAgZmxleFNocmluazogMCxcbiAgICAgICAgICB9fVxuICAgICAgICA+XG4gICAgICAgICAge2Rpc3BsYXlWYWx1ZSA/PyB2YWx1ZX1cbiAgICAgICAgPC9zcGFuPlxuICAgICAgICB7ISF2YWx1ZSAmJiAoXG4gICAgICAgICAgPHN2ZyB3aWR0aD1cIjEwMCVcIiBoZWlnaHQ9XCIyMFwiIHN0eWxlPXt7IGZsZXg6IDEsIG1pbldpZHRoOiAwIH19PlxuICAgICAgICAgICAgPHJlY3QgeD17MH0geT17Mn0gd2lkdGg9XCIxMDAlXCIgaGVpZ2h0PVwiMTZcIiBmaWxsPVwiI2UwZTBlMFwiIHJ4PXsyfSAvPlxuICAgICAgICAgICAgPHJlY3RcbiAgICAgICAgICAgICAga2V5PXsnYmFyUmVjdEtleSd9XG4gICAgICAgICAgICAgIHg9ezB9XG4gICAgICAgICAgICAgIHk9ezJ9XG4gICAgICAgICAgICAgIHdpZHRoPXtgJHtNYXRoLm1heCg0LCAocGVyY2VudGFnZSAvIDEwMCkgKiAxMDApfSVgfVxuICAgICAgICAgICAgICBoZWlnaHQ9XCIxNlwiXG4gICAgICAgICAgICAgIGZpbGw9e2JhckNvbG9yfVxuICAgICAgICAgICAgICByeD17Mn1cbiAgICAgICAgICAgICAgY2xhc3NOYW1lPXtjc3Moe1xuICAgICAgICAgICAgICAgIGN1cnNvcjogJ3BvaW50ZXInLFxuICAgICAgICAgICAgICAgIHRyYW5zaXRpb246ICd3aWR0aCAwLjNzIGVhc2UnLFxuICAgICAgICAgICAgICB9KX1cbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgPC9zdmc+XG4gICAgICAgICl9XG4gICAgICA8L2Rpdj5cbiAgICApO1xuICB9XG5cbiAgcmV0dXJuIDxzcGFuPntkaXNwbGF5VmFsdWUgfHwgdmFsdWV9PC9zcGFuPjtcbn07XG5cbmZ1bmN0aW9uIGdldEJhckNvbG9yKGNvbmRpdGlvbmFsRm9ybWF0dGluZ0NvbG9yPzogc3RyaW5nLCB0aGVtZT86IFZpenpseVRoZW1pbmcuQmFzZSkge1xuICBpZiAoY29uZGl0aW9uYWxGb3JtYXR0aW5nQ29sb3IpIHtcbiAgICByZXR1cm4gY29uZGl0aW9uYWxGb3JtYXR0aW5nQ29sb3I7XG4gIH1cblxuICBpZiAodGhlbWU/LmNoYXJ0cz8uY29sb3JzICYmIHRoZW1lLmNoYXJ0cy5jb2xvcnMubGVuZ3RoID4gMCkge1xuICAgIHJldHVybiB0aGVtZS5jaGFydHMuY29sb3JzWzBdO1xuICB9XG5cbiAgcmV0dXJuICcjNGNhZjUwJztcbn1cbiJdfQ== */",
+            map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlZpc3VhbEZvcm1hdENlbGwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlGeUIiLCJmaWxlIjoiVmlzdWFsRm9ybWF0Q2VsbC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jc3MnO1xuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IFRhYmxlQ29udGVudCB9IGZyb20gJ3NoYXJlZC1sb2dpYy9zcmMvRGF0YVRhYmxlL3R5cGVzJztcbmltcG9ydCAqIGFzIERhdHVtS2V5IGZyb20gJ3NoYXJlZC1sb2dpYy9zcmMvRGF0dW1LZXknO1xuaW1wb3J0IHsgUXVlcnlBdHRyaWJ1dGVzIH0gZnJvbSAnc2hhcmVkLWxvZ2ljL3NyYy9RdWVyeUF0dHJpYnV0ZXMvdHlwZXMnO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tICcuLi8uLi9jb250ZXh0cy9UaGVtZVByb3ZpZGVyJztcbmltcG9ydCB7IFZpenpseVRoZW1pbmcgfSBmcm9tICcuLi8uLi90eXBlcyc7XG5cbmludGVyZmFjZSBWaXN1YWxGb3JtYXRDZWxsUHJvcHMge1xuICB2YWx1ZTogVGFibGVDb250ZW50Wyd2YWx1ZSddO1xuICBkaXNwbGF5VmFsdWU6IFRhYmxlQ29udGVudFsnZGlzcGxheVZhbHVlJ107XG4gIGNvbHVtbjogRGF0dW1LZXkuUGFyc2VkRGF0dW1LZXk7XG4gIHZpc3VhbEZvcm1hdENvbHVtbnM6IFF1ZXJ5QXR0cmlidXRlcy5NZWFzdXJlW107XG4gIGNvbHVtblZhbHVlczogbnVtYmVyW107XG4gIGNvbmRpdGlvbmFsRm9ybWF0dGluZ0NvbG9yPzogc3RyaW5nO1xuICBsYWJlbFdpZHRoUHg6IG51bWJlcjtcbiAgc2hvdWxkVHJ1bmNhdGU6IGJvb2xlYW47XG59XG5cbmNvbnN0IGNhbGN1bGF0ZVBlcmNlbnRhZ2UgPSAodmFsdWU6IG51bWJlciwgbWF4OiBudW1iZXIpOiBudW1iZXIgPT4ge1xuICBpZiAobWF4ID09PSAwKSByZXR1cm4gMDtcbiAgaWYgKHZhbHVlIDwgMCkgcmV0dXJuIDA7XG4gIHJldHVybiAodmFsdWUgLyBtYXgpICogMTAwO1xufTtcblxuZXhwb3J0IGNvbnN0IFZpc3VhbEZvcm1hdENlbGw6IFJlYWN0LkZDPFZpc3VhbEZvcm1hdENlbGxQcm9wcz4gPSAoe1xuICB2YWx1ZSxcbiAgZGlzcGxheVZhbHVlLFxuICBjb2x1bW4sXG4gIHZpc3VhbEZvcm1hdENvbHVtbnMsXG4gIGNvbHVtblZhbHVlcyxcbiAgY29uZGl0aW9uYWxGb3JtYXR0aW5nQ29sb3IsXG4gIGxhYmVsV2lkdGhQeCxcbiAgc2hvdWxkVHJ1bmNhdGUsXG59KSA9PiB7XG4gIGNvbnN0IHNob3VsZFNob3dIb3Jpem9udGFsQmFyID0gdmlzdWFsRm9ybWF0Q29sdW1ucy5zb21lKFxuICAgICh2ZikgPT4gdmYuZmllbGQgPT09IGNvbHVtbi5maWVsZElkICYmIHZmLmZ1bmN0aW9uID09PSBjb2x1bW4uZnVuY3Rpb24sXG4gICk7XG5cbiAgY29uc3QgbnVtZXJpY1ZhbHVlID0gTnVtYmVyKHZhbHVlKTtcbiAgY29uc3QgaXNOdW1lcmljID0gIWlzTmFOKG51bWVyaWNWYWx1ZSk7XG5cbiAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpO1xuXG4gIGlmICghc2hvdWxkU2hvd0hvcml6b250YWxCYXIgJiYgIWlzTnVtZXJpYykge1xuICAgIHJldHVybiA8c3Bhbj57ZGlzcGxheVZhbHVlIHx8IHZhbHVlfTwvc3Bhbj47XG4gIH1cblxuICBpZiAoaXNOdW1lcmljKSB7XG4gICAgY29uc3QgYWN0dWFsTWF4ID0gTWF0aC5tYXgoLi4uY29sdW1uVmFsdWVzKTtcbiAgICBjb25zdCBwZXJjZW50YWdlID0gY2FsY3VsYXRlUGVyY2VudGFnZShudW1lcmljVmFsdWUsIGFjdHVhbE1heCk7XG4gICAgY29uc3QgYmFyQ29sb3IgPSBnZXRCYXJDb2xvcihjb25kaXRpb25hbEZvcm1hdHRpbmdDb2xvciwgdGhlbWUpO1xuXG4gICAgcmV0dXJuIChcbiAgICAgIDxkaXZcbiAgICAgICAgc3R5bGU9e3tcbiAgICAgICAgICBkaXNwbGF5OiAnZmxleCcsXG4gICAgICAgICAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gICAgICAgICAgZ2FwOiAnMC41cmVtJyxcbiAgICAgICAgICBwYWRkaW5nOiAnMnB4JyxcbiAgICAgICAgfX1cbiAgICAgID5cbiAgICAgICAgPHNwYW5cbiAgICAgICAgICBzdHlsZT17e1xuICAgICAgICAgICAgZm9udFNpemU6ICcwLjgxMjVyZW0nLFxuICAgICAgICAgICAgd2lkdGg6IGAke2xhYmVsV2lkdGhQeH1weGAsXG4gICAgICAgICAgICB3aGl0ZVNwYWNlOiAnbm93cmFwJyxcbiAgICAgICAgICAgIHRleHRBbGlnbjogJ2xlZnQnLFxuICAgICAgICAgICAgb3ZlcmZsb3c6IHNob3VsZFRydW5jYXRlID8gJ2hpZGRlbicgOiB1bmRlZmluZWQsXG4gICAgICAgICAgICB0ZXh0T3ZlcmZsb3c6IHNob3VsZFRydW5jYXRlID8gJ2VsbGlwc2lzJyA6IHVuZGVmaW5lZCxcbiAgICAgICAgICAgIGZvbnRXZWlnaHQ6ICdub3JtYWwnLFxuICAgICAgICAgICAgbWFyZ2luUmlnaHQ6ICdhdXRvJyxcbiAgICAgICAgICAgIGZsZXhTaHJpbms6IDAsXG4gICAgICAgICAgfX1cbiAgICAgICAgICB0aXRsZT17U3RyaW5nKGRpc3BsYXlWYWx1ZSA/PyB2YWx1ZSA/PyAnJyl9XG4gICAgICAgID5cbiAgICAgICAgICB7ZGlzcGxheVZhbHVlID8/IHZhbHVlfVxuICAgICAgICA8L3NwYW4+XG4gICAgICAgIHshIXZhbHVlICYmIChcbiAgICAgICAgICA8c3ZnIHdpZHRoPVwiMTAwJVwiIGhlaWdodD1cIjIwXCIgc3R5bGU9e3sgZmxleDogMSwgbWluV2lkdGg6IDAgfX0+XG4gICAgICAgICAgICA8cmVjdCB4PXswfSB5PXsyfSB3aWR0aD1cIjEwMCVcIiBoZWlnaHQ9XCIxNlwiIGZpbGw9XCIjZTBlMGUwXCIgcng9ezJ9IC8+XG4gICAgICAgICAgICA8cmVjdFxuICAgICAgICAgICAgICBrZXk9eydiYXJSZWN0S2V5J31cbiAgICAgICAgICAgICAgeD17MH1cbiAgICAgICAgICAgICAgeT17Mn1cbiAgICAgICAgICAgICAgd2lkdGg9e2Ake01hdGgubWF4KDQsIChwZXJjZW50YWdlIC8gMTAwKSAqIDEwMCl9JWB9XG4gICAgICAgICAgICAgIGhlaWdodD1cIjE2XCJcbiAgICAgICAgICAgICAgZmlsbD17YmFyQ29sb3J9XG4gICAgICAgICAgICAgIHJ4PXsyfVxuICAgICAgICAgICAgICBjbGFzc05hbWU9e2Nzcyh7XG4gICAgICAgICAgICAgICAgY3Vyc29yOiAncG9pbnRlcicsXG4gICAgICAgICAgICAgICAgdHJhbnNpdGlvbjogJ3dpZHRoIDAuM3MgZWFzZScsXG4gICAgICAgICAgICAgIH0pfVxuICAgICAgICAgICAgLz5cbiAgICAgICAgICA8L3N2Zz5cbiAgICAgICAgKX1cbiAgICAgIDwvZGl2PlxuICAgICk7XG4gIH1cblxuICByZXR1cm4gPHNwYW4+e2Rpc3BsYXlWYWx1ZSB8fCB2YWx1ZX08L3NwYW4+O1xufTtcblxuZnVuY3Rpb24gZ2V0QmFyQ29sb3IoY29uZGl0aW9uYWxGb3JtYXR0aW5nQ29sb3I/OiBzdHJpbmcsIHRoZW1lPzogVml6emx5VGhlbWluZy5CYXNlKSB7XG4gIGlmIChjb25kaXRpb25hbEZvcm1hdHRpbmdDb2xvcikge1xuICAgIHJldHVybiBjb25kaXRpb25hbEZvcm1hdHRpbmdDb2xvcjtcbiAgfVxuXG4gIGlmICh0aGVtZT8uY2hhcnRzPy5jb2xvcnMgJiYgdGhlbWUuY2hhcnRzLmNvbG9ycy5sZW5ndGggPiAwKSB7XG4gICAgcmV0dXJuIHRoZW1lLmNoYXJ0cy5jb2xvcnNbMF07XG4gIH1cblxuICByZXR1cm4gJyM0Y2FmNTAnO1xufVxuIl19 */",
             toString: _EMOTION_STRINGIFIED_CSS_ERROR__$b
           })
         }, 'barRectKey')]
@@ -55728,6 +55735,9 @@ function getBarColor(conditionalFormattingColor, theme) {
   return '#4caf50';
 }
 
+var VISUAL_FORMAT_LABEL_PX_PER_CHAR = 8;
+var VISUAL_FORMAT_LABEL_MAX_PX = 180;
+var VISUAL_FORMAT_LABEL_PADDING_PX = 0;
 var DataTableTR = function DataTableTR(props) {
   var row = props.row,
     rowIndex = props.rowIndex,
@@ -55743,6 +55753,33 @@ var DataTableTR = function DataTableTR(props) {
     textOverride = _useDashboardBehaviou.textOverride;
   var _useDashboardContext = useDashboardContext(),
     generatingPDF = _useDashboardContext.generatingPDF;
+  var labelWidthByColumn = React__default.useMemo(function () {
+    if (!tableRepresentation) return {};
+    var widthMap = {};
+    tableRepresentation.fields.forEach(function (field, cellIndex) {
+      if (field.dataType !== 'number') return;
+      var maxWidth = tableRepresentation.content.reduce(function (currentMaxWidth, row) {
+        var _ref, _cellValue$displayVal;
+        var cellValue = row[cellIndex];
+        var displayValue = (_ref = (_cellValue$displayVal = cellValue == null ? void 0 : cellValue.displayValue) != null ? _cellValue$displayVal : cellValue == null ? void 0 : cellValue.value) != null ? _ref : '';
+        var charCount = String(displayValue).length;
+        var estimatedWidth = charCount * VISUAL_FORMAT_LABEL_PX_PER_CHAR + VISUAL_FORMAT_LABEL_PADDING_PX;
+        return Math.max(currentMaxWidth, estimatedWidth);
+      }, 0);
+      if (maxWidth > VISUAL_FORMAT_LABEL_MAX_PX) {
+        widthMap[cellIndex] = {
+          width: VISUAL_FORMAT_LABEL_MAX_PX,
+          shouldTruncate: true
+        };
+      } else {
+        widthMap[cellIndex] = {
+          width: maxWidth,
+          shouldTruncate: false
+        };
+      }
+    });
+    return widthMap;
+  }, [tableRepresentation]);
   return jsx(Fragment, {
     children: row.map(function (cell, cellIndex) {
       if (tableRepresentation != null && tableRepresentation.fields[cellIndex].hidden) return null;
@@ -55785,6 +55822,10 @@ var DataTableTR = function DataTableTR(props) {
       }).filter(function (val) {
         return !isNaN(val);
       }) : [];
+      var labelWidthData = labelWidthByColumn[cellIndex] || {
+        width: 0,
+        shouldTruncate: false
+      };
       var cellContent = component ? jsx(CustomCell, {
         component: component
       }) : cell.displayValue !== 'undefined' ? cell.displayValue : '';
@@ -55799,7 +55840,9 @@ var DataTableTR = function DataTableTR(props) {
           column: parse(field.datumKey),
           visualFormatColumns: props.visualFormatColumns || [],
           columnValues: columnValues,
-          conditionalFormattingColor: conditionalFormattingColor
+          conditionalFormattingColor: conditionalFormattingColor,
+          labelWidthPx: labelWidthData.width,
+          shouldTruncate: labelWidthData.shouldTruncate
         });
       }
       var isDimensionColumn = findDimension(dimension, field.id, {
@@ -55858,8 +55901,8 @@ var DataTableTR = function DataTableTR(props) {
     })
   });
 };
-var CustomCell = function CustomCell(_ref) {
-  var component = _ref.component;
+var CustomCell = function CustomCell(_ref2) {
+  var component = _ref2.component;
   if (typeof component === 'string') {
     return jsx("div", {
       dangerouslySetInnerHTML: {

package/dist/shared-ui/src/components/DataTable/VisualFormatCell.d.ts

@@ -9,6 +9,8 @@ interface VisualFormatCellProps {
     visualFormatColumns: QueryAttributes.Measure[];
     columnValues: number[];
     conditionalFormattingColor?: string;
+    labelWidthPx: number;
+    shouldTruncate: boolean;
 }
 export declare const VisualFormatCell: React.FC<VisualFormatCellProps>;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vizzly/dashboard",
   "author": "james@vizzly.co",
-  "version": "0.15.0-dev-4dcf5f3e42e92939920ea086ff4075b84ebf01f2",
+  "version": "0.15.0-dev-265f9c3692c37bc38f3628648bf4eccc11e1034c",
   "source": "src/index.tsx",
   "types": "./dist/dashboard/src/index.d.ts",
   "module": "./dist/dashboard.esm.js",