@splunk/visualizations 25.3.4 → 25.3.5

package/Table.js

@@ -221,7 +221,7 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
 
     return React.createElement(FixSizeItem, {
       "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "25.3.4 - 9a3837dad",
+      "data-splunk-visualization-version": "25.3.5 - 09e60e162",
       width: width,
       height: height,
       backgroundColor: backgroundColor
@@ -367,11 +367,20 @@ var computeVizProps = function computeVizProps(_a) {
 
   if (vizProps.onOptionsChange) {
     var handleColumnFormatChange = function handleColumnFormatChange(updatedColumnFormat) {
-      var cloneOfExistingColumnFormat = lodash_1.get(vizProps, 'options.columnFormat', {});
+      var _a, _b;
+
+      var cloneOfExistingColumnFormat = (_b = Object.assign({}, (_a = vizProps === null || vizProps === void 0 ? void 0 : vizProps.options) === null || _a === void 0 ? void 0 : _a.columnFormat)) !== null && _b !== void 0 ? _b : {};
       var keys = Object.keys(updatedColumnFormat);
       var values = Object.values(updatedColumnFormat);
       keys.forEach(function (key, index) {
-        lodash_1.set(cloneOfExistingColumnFormat, "".concat(key, ".width"), lodash_1.get(values[index], 'width'));
+        if (!cloneOfExistingColumnFormat[key]) {
+          cloneOfExistingColumnFormat[key] = {};
+        }
+
+        var newWidth = lodash_1.get(values[index], 'width');
+        cloneOfExistingColumnFormat[key] = Object.assign(Object.assign({}, cloneOfExistingColumnFormat[key]), {
+          width: newWidth
+        });
       });
       vizProps.onOptionsChange({
         columnFormat: cloneOfExistingColumnFormat
@@ -1587,7 +1596,7 @@ var Cover = styled_components_1.default.div.withConfig({
   componentId: "sc-1gsbnxb-0"
 })(["position:absolute;left:0;right:0;top:0;bottom:0;"]);
 var Blocker = styled_components_1.default.div.attrs({
-  'data-splunk-visualization-version': "25.3.4 - 9a3837dad"
+  'data-splunk-visualization-version': "25.3.5 - 09e60e162"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"
@@ -2009,13 +2018,13 @@ var optionsSchema = {
             }
           },
           textOverflow: {
-            description: 'Controls how the text should be truncated within a particular column. Valid types include "anywhere", "break-word", "ellipsis". Defaults width for ellipsis is 100px.',
+            description: 'Controls how the text should be truncated within a particular column. Valid types include "anywhere", "break-word", "ellipsis".  Columns are "break-word" styled by default when "textOverflow" is not configured.',
             type: 'string',
             pattern: schemaUtils_1.getPattern(consts_1.validTextOverflows),
             enum: consts_1.validTextOverflows.concat()
           },
           width: {
-            description: 'Controls how wide in pixels (where 1 px = 1/96th of 1 in) the column should be displayed.',
+            description: 'Controls how wide the column should be displayed.',
             type: 'number',
             minimum: 30
           }
@@ -2483,11 +2492,9 @@ exports.default = configUtils_1.enhanceConfig(config);
 
 var _slicedToArray = __webpack_require__(51);
 
-var _defineProperty = __webpack_require__(7);
-
 var _taggedTemplateLiteral = __webpack_require__(86);
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
@@ -2505,7 +2512,7 @@ var __rest = this && this.__rest || function (s, e) {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MINIMUM_COLUMN_SIZE = void 0;
+exports.INITIAL_UNSET_COLUMN_WIDTH = exports.MINIMUM_COLUMN_SIZE = void 0;
 
 var React = __webpack_require__(0);
 
@@ -2541,15 +2548,14 @@ var getPagination_1 = __webpack_require__(29);
 
 var getSorting_1 = __webpack_require__(28);
 
-var FixedSizeContainer_1 = __webpack_require__(13);
-
-var utils_1 = __webpack_require__(467); // debounce was imported this way due to typing
+var FixedSizeContainer_1 = __webpack_require__(13); // debounce was imported this way due to typing
 // eslint-disable-next-line import/order
 
 
-var debounce = __webpack_require__(468);
+var debounce = __webpack_require__(467);
 
 exports.MINIMUM_COLUMN_SIZE = 30;
+exports.INITIAL_UNSET_COLUMN_WIDTH = 90;
 var NonVisibleTableHead = styled_components_1.default(Table_1.default.Head).withConfig({
   displayName: "PureTable__NonVisibleTableHead",
   componentId: "tovzjg-0"
@@ -2558,9 +2564,16 @@ var FixedTableHead = styled_components_1.default(Table_1.default.Head).withConfi
   displayName: "PureTable__FixedTableHead",
   componentId: "tovzjg-1"
 })(["position:sticky;top:0;"]);
+var TableHeadCell = styled_components_1.default(Table_1.default.HeadCell).withConfig({
+  displayName: "PureTable__TableHeadCell",
+  componentId: "tovzjg-2"
+})(["div > span{word-break:inherit;word-wrap:inherit;white-space:", ";display:inline;}"], function (_ref) {
+  var textOverflowType = _ref.textOverflowType;
+  return textOverflowType === 'ellipsis' ? 'nowrap' : 'inherit';
+});
 var VizTableContainer = styled_components_1.default.div.withConfig({
   displayName: "PureTable__VizTableContainer",
-  componentId: "tovzjg-2"
+  componentId: "tovzjg-3"
 })(["box-sizing:border-box;padding:", ";background-color:", ";display:flex;flex-flow:column nowrap;overflow:hidden;"], pick_1.default({
   enterprise: variables_1.default.spacingHalf,
   prisma: variables_1.default.spacingSmall
@@ -2572,18 +2585,18 @@ var PAGINATOR_CONTAINER_HEIGHT = 38;
 var PAGINATOR_SPACING = 5;
 var SUITableContainer = styled_components_1.default.div.withConfig({
   displayName: "PureTable__SUITableContainer",
-  componentId: "tovzjg-3"
-})(["& *{font-family:", ";font-size:", ";line-height:", ";}box-sizing:border-box;flex-grow:1;overflow:hidden;", ";", ";", " ", " & [data-fixed-column='true']{table-layout:", ";width:", ";}"], function (props) {
+  componentId: "tovzjg-4"
+})(["& *{font-family:", ";font-size:", ";line-height:", ";}box-sizing:border-box;flex-grow:1;overflow:hidden;", ";", ";", " ", " [data-test=\"main-table\"]{", "}"], function (props) {
   return props.font;
 }, function (props) {
   return props.fontSize;
 }, function (props) {
   return props.lineHeight;
-}, function (_ref) {
-  var width = _ref.width,
-      height = _ref.height,
-      isPaging = _ref.isPaging,
-      theme = _ref.theme;
+}, function (_ref2) {
+  var width = _ref2.width,
+      height = _ref2.height,
+      isPaging = _ref2.isPaging,
+      theme = _ref2.theme;
   var padding = pick_1.default({
     enterprise: variables_1.default.spacingHalf({
       theme: theme
@@ -2599,26 +2612,23 @@ var SUITableContainer = styled_components_1.default.div.withConfig({
     width: width - paddingOffset,
     height: isPaging ? height - PAGINATOR_CONTAINER_HEIGHT - PAGINATOR_SPACING - paddingOffset : height - paddingOffset
   });
-}, function (_ref2) {
-  var isPaging = _ref2.isPaging;
-  return isPaging && "\n        margin-bottom: ".concat(PAGINATOR_SPACING, "px;\n    ");
 }, function (_ref3) {
-  var headerStyle = _ref3.headerStyle;
-  return headerStyle && headerStyle.backgroundColor && styled_components_1.css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n            & [data-test='head-cell'] {\n                background-color: ", ";\n            }\n        "])), headerStyle.backgroundColor);
+  var isPaging = _ref3.isPaging;
+  return isPaging && "\n        margin-bottom: ".concat(PAGINATOR_SPACING, "px;\n    ");
 }, function (_ref4) {
   var headerStyle = _ref4.headerStyle;
-  return headerStyle && headerStyle.color && styled_components_1.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            & [data-test='head-cell'] > div > span {\n                color: ", ";\n            }\n        "])), headerStyle.color);
+  return headerStyle && headerStyle.backgroundColor && styled_components_1.css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n            & [data-test='head-cell'] {\n                background-color: ", ";\n            }\n        "])), headerStyle.backgroundColor);
 }, function (_ref5) {
-  var widthSet = _ref5.widthSet;
-  return widthSet ? 'fixed' : 'auto';
+  var headerStyle = _ref5.headerStyle;
+  return headerStyle && headerStyle.color && styled_components_1.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            & [data-test='head-cell'] > div > span {\n                color: ", ";\n            }\n        "])), headerStyle.color);
 }, function (_ref6) {
-  var widthSet = _ref6.widthSet;
-  return widthSet ? '0' : '100%';
+  var isFullyFixed = _ref6.isFullyFixed;
+  return isFullyFixed && styled_components_1.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n                width: fit-content;\n                min-width: unset;\n            "])));
 });
 SUITableContainer.displayName = 'SUITableContainer';
 var PaginatorContainer = styled_components_1.default.div.withConfig({
   displayName: "PureTable__PaginatorContainer",
-  componentId: "tovzjg-4"
+  componentId: "tovzjg-5"
 })(["position:relative;text-align:right;height:", "px;"], PAGINATOR_CONTAINER_HEIGHT);
 PaginatorContainer.displayName = 'PaginatorContainer'; // allow for early return in case of empty tableBody while still following hook rules
 
@@ -2631,7 +2641,8 @@ var withEmptyTableMessage = function withEmptyTableMessage(Viz) {
         showRowNumbers = props.showRowNumbers,
         showInternalFields = props.showInternalFields,
         tableFormat = props.tableFormat,
-        columnFormat = props.columnFormat;
+        columnFormat = props.columnFormat,
+        paginatorParams = props.paginatorParams;
 
     var _hooks_1$useTable = hooks_1.useTable({
       headers: headers,
@@ -2646,7 +2657,8 @@ var withEmptyTableMessage = function withEmptyTableMessage(Viz) {
       }), (tableFormat === null || tableFormat === void 0 ? void 0 : tableFormat.data) && {
         data: lodash_1.cloneDeep(tableFormat.data)
       }),
-      columnFormat: columnFormat
+      columnFormat: columnFormat,
+      paginationOffset: paginatorParams === null || paginatorParams === void 0 ? void 0 : paginatorParams.current
     }),
         tableHeader = _hooks_1$useTable.tableHeader,
         tableBody = _hooks_1$useTable.tableBody;
@@ -2680,27 +2692,11 @@ var useTableHead = function useTableHead(visibility) {
 };
 
 var HeadCell = function HeadCell(_a) {
-  var setTempColumnWidth = _a.setTempColumnWidth,
-      setRemainingWidth = _a.setRemainingWidth,
-      value = _a.value,
-      widthSet = _a.widthSet,
-      headerVisibility = _a.headerVisibility,
-      props = __rest(_a, ["setTempColumnWidth", "setRemainingWidth", "value", "widthSet", "headerVisibility"]);
+  var value = _a.value,
+      props = __rest(_a, ["value"]);
 
   var cellRef = React.useRef(null);
-  React.useEffect(function () {
-    if (!widthSet && cellRef.current && cellRef.current.clientWidth >= 0 && headerVisibility !== 'none') {
-      setTempColumnWidth(function (columnWidth) {
-        return Object.assign(Object.assign({}, columnWidth), _defineProperty({}, value, {
-          width: cellRef.current.clientWidth
-        }));
-      });
-      setRemainingWidth(function (prevWidth) {
-        return prevWidth + Math.max(props.width ? cellRef.current.clientWidth - props.width : 0, 0);
-      });
-    }
-  });
-  return React.createElement(Table_1.default.HeadCell, Object.assign({
+  return React.createElement(TableHeadCell, Object.assign({
     elementRef: cellRef
   }, props), value);
 };
@@ -2721,6 +2717,9 @@ var rowHeightMap = {
   default: '20px',
   large: '24px'
 };
+var tableInnerStyle = {
+  height: '100%'
+};
 
 var PureTable = function PureTable(props) {
   var count = props.count,
@@ -2751,42 +2750,14 @@ var PureTable = function PureTable(props) {
       columns = _React$useState2[0],
       setColumns = _React$useState2[1];
 
-  var _React$useState3 = React.useState(columnFormat),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      tempColumns = _React$useState4[0],
-      setTempColumns = _React$useState4[1];
-
-  var _React$useState5 = React.useState(0),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      remainingWidth = _React$useState6[0],
-      setRemainingWidth = _React$useState6[1];
-
-  var numColumnsWithoutWidth = Object.keys(tempColumns).reduce(function (acc, key) {
-    var _a;
-
-    if ((_a = columns[key]) === null || _a === void 0 ? void 0 : _a.width) {
-      return acc;
-    }
-
-    return acc + 1;
-  }, 0);
   var containerRef = React.useRef(null);
-  var containerRefInner = React.useRef(null);
-  var widthRef = React.useRef(0);
-  var widthSet = tableHeader.cells.length === tableHeader.cells.filter(function (_ref7) {
-    var value = _ref7.value,
-        showCell = _ref7.showCell;
+  var containerRefInner = React.useRef(null); // this state avoids unncessary column sorting when column resize ends
 
-    var _a, _b;
+  var _React$useState3 = React.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      isResizing = _React$useState4[0],
+      setResizing = _React$useState4[1];
 
-    return ((_a = columns[value]) === null || _a === void 0 ? void 0 : _a.width) !== undefined || ((_b = tempColumns[value]) === null || _b === void 0 ? void 0 : _b.width) !== undefined || !showCell;
-  }).length;
-  React.useEffect(function () {
-    if (containerRef.current && containerRef.current.clientWidth !== widthRef.current) {
-      widthRef.current = containerRef.current.clientWidth;
-      recalculateTempColumnWidths();
-    }
-  });
   var firstRenderCount = React.useRef(count);
   React.useEffect(function () {
     if (firstRenderCount.current !== count) {
@@ -2807,9 +2778,14 @@ var PureTable = function PureTable(props) {
     }
   }, [mode, stringifiedColumnFormat]);
   var TableHead = useTableHead(headerVisibility);
+  var tableCellClickHandler = React.useCallback(function (e) {
+    setResizing(false); // The resizing state will be set back to false on any cell click
+
+    return onCellClick ? drilldownHandler(e) : lodash_1.noop;
+  }, [onCellClick, showRowNumbers, tableHeader, tableBody]);
   var debouncedDrilldown = debounce(function (e, payload) {
     if (window.getSelection().toString() === '') {
-      if (lodash_1.isFunction(onCellClick)) {
+      if (typeof onCellClick === 'function') {
         onCellClick({
           e: e,
           payload: payload
@@ -2817,7 +2793,8 @@ var PureTable = function PureTable(props) {
       }
     }
   }, 200);
-  var drilldownHandler = React.useCallback(function (e) {
+
+  var drilldownHandler = function drilldownHandler(e) {
     var element = e.target;
     var row = element.getAttribute('data-row-index');
     var col = element.getAttribute('data-col-index');
@@ -2857,27 +2834,14 @@ var PureTable = function PureTable(props) {
       });
       debouncedDrilldown(e.nativeEvent, payload);
     }
-  }, [onCellClick, showRowNumbers, tableHeader, tableBody]);
+  };
+
   var debouncedOnColumnFormatChange = React.useMemo(function () {
     return debounce(function (newFormat) {
       onColumnFormatChange(newFormat);
     }, 300);
   }, [onColumnFormatChange]);
 
-  var handleResizeColumn = function handleResizeColumn(_event, payload) {
-    var updatedCF = columns;
-    var field = payload.columnId;
-    updatedCF[field] = Object.assign(Object.assign({}, updatedCF[field]), {
-      width: Math.max(payload.width, exports.MINIMUM_COLUMN_SIZE)
-    });
-    setColumns(Object.assign({}, updatedCF));
-    recalculateTempColumnWidths(); // Updates column json in edit mode
-
-    if (mode === 'edit') {
-      debouncedOnColumnFormatChange(updatedCF);
-    }
-  };
-
   var handleEventClick = function handleEventClick(e) {
     // Hack to target the resize handlers, since the only button within a HeadCell is the resize handlers
     if (e.target.tagName.toLowerCase() === 'button') {
@@ -2893,21 +2857,42 @@ var PureTable = function PureTable(props) {
     drilldownHandler(e);
   };
 
-  var recalculateTempColumnWidths = function recalculateTempColumnWidths() {
-    setTempColumns({});
-    setRemainingWidth(0);
-  };
+  var handleResizeColumn = function handleResizeColumn(_event, payload) {
+    setResizing(true);
+    var updatedCF = columns;
+    var field = payload.columnId;
+    updatedCF[field] = Object.assign(Object.assign({}, updatedCF[field]), {
+      width: Math.max(payload.width, exports.MINIMUM_COLUMN_SIZE)
+    });
+    setColumns(Object.assign({}, updatedCF)); // Updates column json in edit mode
 
-  var withColumnResizing = function withColumnResizing(func) {
-    return function (e, additionalParams) {
-      recalculateTempColumnWidths();
-      func(e, additionalParams);
-    };
+    if (mode === 'edit') {
+      debouncedOnColumnFormatChange(updatedCF);
+    }
   };
 
   var fontMapped = fontMap[font] || fontMap.proportional;
   var fontSizeMapped = fontSizeMap[fontSize] || fontSizeMap.default;
   var rowHeightMapped = rowHeightMap[fontSize] || rowHeightMap.default;
+  var tableOuterStyle = React.useMemo(function () {
+    return {
+      height: '100%',
+      cursor: onCellClick ? 'pointer' : 'unset'
+    };
+  }, [onCellClick]);
+  var numberOfHeaders = tableHeader.cells.filter(function (c) {
+    return c.showCell;
+  }).length;
+  var numberOfFixedHeaders = tableHeader.cells.filter(function (c) {
+    return c.showCell;
+  }).filter(function (_ref7) {
+    var value = _ref7.value;
+
+    var _a, _b;
+
+    return ((_a = columns[value]) === null || _a === void 0 ? void 0 : _a.width) && ((_b = columns[value]) === null || _b === void 0 ? void 0 : _b.width) !== 'auto';
+  }).length;
+  var isFullyFixed = numberOfHeaders === numberOfFixedHeaders;
   return React.createElement(VizTableContainer, {
     backgroundColor: backgroundColor,
     ref: containerRef
@@ -2917,48 +2902,41 @@ var PureTable = function PureTable(props) {
     height: height,
     isPaging: isPaging,
     headerStyle: tableHeader.style,
-    widthSet: widthSet,
     font: fontMapped,
     fontSize: fontSizeMapped,
-    lineHeight: rowHeightMapped
+    lineHeight: rowHeightMapped,
+    isFullyFixed: isFullyFixed
   }, React.createElement(Table_1.default, {
+    resizableFillLayout: true,
     headType: headerVisibility !== 'none' ? 'inline' : undefined,
-    innerStyle: {
-      height: '100%'
-    },
-    outerStyle: {
-      height: '100%',
-      cursor: onCellClick ? 'pointer' : 'unset'
-    },
-    onClick: onCellClick ? drilldownHandler : lodash_1.noop,
+    innerStyle: tableInnerStyle,
+    outerStyle: tableOuterStyle,
+    onClick: tableCellClickHandler,
     onKeyDown: onCellClick ? handleKeyDown : lodash_1.noop,
     onRequestResizeColumn: handleResizeColumn
   }, React.createElement(TableHead, null, tableHeader.cells.filter(function (c) {
     return c.showCell;
   }).map(function (_a) {
+    var _b, _c;
+
     var key = _a.key,
         value = _a.value,
         sortKey = _a.sortKey,
-        rest = __rest(_a, ["key", "value", "sortKey"]);
+        style = _a.style,
+        rest = __rest(_a, ["key", "value", "sortKey", "style"]);
 
     return React.createElement(HeadCell, Object.assign({
       key: key,
       columnId: value,
       sortDir: sortKey === currentSortKey ? currentSortDir : 'none',
-      width: utils_1.getColumnWidth({
-        columns: columns,
-        tempColumns: tempColumns,
-        columnName: value,
-        remainingWidth: remainingWidth,
-        numColumnsWithoutWidth: numColumnsWithoutWidth
-      }),
+      width: (_c = (_b = columns[value]) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : exports.INITIAL_UNSET_COLUMN_WIDTH,
       onMouseDown: handleEventClick,
       value: value,
-      setTempColumnWidth: setTempColumns,
-      widthSet: widthSet,
-      onSort: withColumnResizing(onSort),
-      headerVisibility: headerVisibility,
-      setRemainingWidth: setRemainingWidth
+      onSort: isResizing || showRowNumbers && value === '#' ? null : onSort,
+      style: showRowNumbers && value === '#' ? Object.assign(Object.assign({}, style), {
+        cursor: 'auto'
+      }) : style,
+      headerVisibility: headerVisibility
     }, Object.assign({
       sortKey: sortKey
     }, rest)));
@@ -2968,43 +2946,25 @@ var PureTable = function PureTable(props) {
     }, row.cells.filter(function (c) {
       return c.showCell;
     }).map(function (cell) {
+      var _a, _b;
+
       return React.createElement(cells_1.SwitchTableCell, {
         key: cell.key,
         type: cell.cellType
       }, React.createElement(cells_1.TextCell, {
         cell: cell,
-        useMouseOverEffect: !!onCellClick,
-        width: utils_1.getColumnWidth({
-          columns: columns,
-          tempColumns: tempColumns,
-          columnName: cell.header,
-          remainingWidth: remainingWidth,
-          numColumnsWithoutWidth: numColumnsWithoutWidth
-        })
+        useMouseOverEffect: !!onCellClick
       }), React.createElement(cells_1.SparklineCell, {
         cell: cell,
         useMouseOverEffect: !!onCellClick,
-        width: utils_1.getColumnWidth({
-          columns: columns,
-          tempColumns: tempColumns,
-          columnName: cell.header,
-          remainingWidth: remainingWidth,
-          numColumnsWithoutWidth: numColumnsWithoutWidth
-        })
+        width: (_b = (_a = columns[cell.header]) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 'auto'
       }), React.createElement(cells_1.ArrayCell, {
         cell: cell,
-        useMouseOverEffect: !!onCellClick,
-        width: utils_1.getColumnWidth({
-          columns: columns,
-          tempColumns: tempColumns,
-          columnName: cell.header,
-          remainingWidth: remainingWidth,
-          numColumnsWithoutWidth: numColumnsWithoutWidth
-        })
+        useMouseOverEffect: !!onCellClick
       }));
     }));
   })))), isPaging ? React.createElement(PaginatorContainer, null, React.createElement(Paginator_1.default, Object.assign({
-    onChange: withColumnResizing(paginatorOnChange)
+    onChange: paginatorOnChange
   }, paginatorProps))) : null);
 };
 
@@ -3144,8 +3104,8 @@ var generateKey = function generateKey() {
   return "".concat(i, "-").concat(value);
 };
 
-var getTextOverflowType = function getTextOverflowType(columnFormat, currentColumn, defaultTextOverflow) {
-  return lodash_1.get(columnFormat, "".concat(currentColumn, ".textOverflow")) || defaultTextOverflow;
+var getTextOverflowType = function getTextOverflowType(columnFormat, currentColumn) {
+  return lodash_1.get(columnFormat, "".concat(currentColumn, ".textOverflow"));
 };
 
 exports.getTextOverflowType = getTextOverflowType;
@@ -3162,17 +3122,13 @@ var generateHeader = function generateHeader(value, i, columnFormat, showInterna
     ret.showCell = false;
   }
 
-  var columnWidth = lodash_1.get(columnFormat, "".concat(value, ".width"));
-
-  if (lodash_1.isNumber(columnWidth)) {
-    var textOverflowType = exports.getTextOverflowType({}, value, 'ellipsis');
-    var textOverflowStyle = exports.getOverflowStyles({
-      textOverflow: textOverflowType
-    });
-    ret.truncate = true;
-    ret.style = textOverflowStyle;
-  }
-
+  var textOverflowType = exports.getTextOverflowType(columnFormat, value);
+  var textOverflowStyle = exports.getOverflowStyles({
+    textOverflow: textOverflowType
+  });
+  ret.truncate = true;
+  ret.textOverflowType = textOverflowType;
+  ret.style = textOverflowStyle;
   return ret;
 };
 
@@ -3373,17 +3329,20 @@ var useTable = function useTable() {
       _tableArgs$tableForma = tableArgs.tableFormat,
       tableFormat = _tableArgs$tableForma === void 0 ? {} : _tableArgs$tableForma,
       _tableArgs$columnForm = tableArgs.columnFormat,
-      columnFormat = _tableArgs$columnForm === void 0 ? {} : _tableArgs$columnForm;
+      columnFormat = _tableArgs$columnForm === void 0 ? {} : _tableArgs$columnForm,
+      _tableArgs$pagination = tableArgs.paginationOffset,
+      paginationOffset = _tableArgs$pagination === void 0 ? 0 : _tableArgs$pagination;
   var longestColumnLength = Math.max.apply(Math, _toConsumableArray(table.map(function (column) {
     return column.length;
   })));
 
   if (showRowNumbers) {
+    var correctedPaginationOffset = Math.max(0, (paginationOffset - 1) * longestColumnLength);
     headers = ['#'].concat(_toConsumableArray(headers));
     table = [Array.from({
       length: longestColumnLength
     }, function (v, i) {
-      return i + 1;
+      return correctedPaginationOffset + i + 1;
     })].concat(_toConsumableArray(table));
 
     if (isArray(tableFormat.align)) {
@@ -3452,8 +3411,6 @@ var useTable = function useTable() {
       cells: []
     };
     table.forEach(function (column, i) {
-      var _a;
-
       var currentHeader = tableHeader.cells[i];
       var value = validValueSelector(getColumnFormatData(columnFormat, currentHeader, currentRow), getTableFormatData(tableFormat, i, currentRow), column[currentRow], '');
       var rawValue = column[currentRow];
@@ -3466,15 +3423,11 @@ var useTable = function useTable() {
       var sparklineType = getColumnFormatSparklineType(columnFormat, currentHeader, currentRow) || getTableFormatSparklineType(tableFormat, i, currentRow) || 'area';
       var key = generateKey(value, "".concat(currentRow, "-").concat(i));
       var additionalStyles = {};
-
-      if (lodash_1.isNumber((_a = columnFormat[currentHeader.value]) === null || _a === void 0 ? void 0 : _a.width)) {
-        var textOverflowType = exports.getTextOverflowType(columnFormat, currentHeader.value, 'ellipsis');
-        var textOverflowStyle = exports.getOverflowStyles({
-          textOverflow: textOverflowType
-        });
-        additionalStyles = Object.assign(Object.assign({}, additionalStyles), textOverflowStyle);
-      }
-
+      var textOverflowType = exports.getTextOverflowType(columnFormat, currentHeader.value);
+      var textOverflowStyle = exports.getOverflowStyles({
+        textOverflow: textOverflowType
+      });
+      additionalStyles = Object.assign(Object.assign({}, additionalStyles), textOverflowStyle);
       var showCell = true;
 
       if (!showInternalFields && currentHeader.value.charAt(0) === '_' && currentHeader.value !== '_time') {
@@ -3594,19 +3547,23 @@ var React = __webpack_require__(0);
 
 var Table_1 = __webpack_require__(97);
 
+var noop = function noop() {
+  return undefined;
+};
+
 var TextCell = function TextCell(_ref) {
   var cell = _ref.cell,
-      useMouseOverEffect = _ref.useMouseOverEffect,
-      width = _ref.width;
+      useMouseOverEffect = _ref.useMouseOverEffect;
+  var cellStyle = React.useMemo(function () {
+    return Object.assign({}, cell.style);
+  }, [cell.style]);
   return React.createElement(Table_1.default.Cell, {
-    style: Object.assign(Object.assign({}, cell.style), {
-      width: width
-    }),
+    style: cellStyle,
     align: cell.align,
     "data-test-cell-type": "TextCell",
     "data-row-index": cell.rowIndex,
     "data-col-index": cell.columnIndex,
-    onClick: useMouseOverEffect ? function () {} : undefined
+    onClick: useMouseOverEffect ? noop : undefined
   }, cell.value.toString());
 };
 
@@ -3630,18 +3587,24 @@ var React = __webpack_require__(0);
 
 var Table_1 = __webpack_require__(97);
 
+var noop = function noop() {
+  return undefined;
+};
+
 var ArrayCell = function ArrayCell(_ref) {
   var cell = _ref.cell,
-      useMouseOverEffect = _ref.useMouseOverEffect,
-      width = _ref.width;
-  var value = Array.isArray(cell.value) ? cell.value : [cell.value];
+      useMouseOverEffect = _ref.useMouseOverEffect;
+  var value = React.useMemo(function () {
+    return Array.isArray(cell.value) ? cell.value : [cell.value];
+  }, [cell.value]);
+  var cellStyle = React.useMemo(function () {
+    return Object.assign({}, cell.style);
+  }, [cell.style]);
   return React.createElement(Table_1.default.Cell, {
-    style: Object.assign(Object.assign({}, cell.style), {
-      width: width
-    }),
+    style: cellStyle,
     align: cell.align,
     "data-test-cell-type": "ArrayCell",
-    onClick: useMouseOverEffect ? function () {} : undefined
+    onClick: useMouseOverEffect ? noop : undefined
   }, value.map(function (v, i) {
     return React.createElement("div", {
       key: v.toString(),
@@ -3690,17 +3653,28 @@ var parseSparklineData = function parseSparklineData(data) {
 
 exports.validSparklineTypes = ['line', 'area'];
 
+var noop = function noop() {
+  return undefined;
+};
+
+var svgStyle = {
+  height: 0
+};
+var dummySVG = React.createElement("svg", {
+  style: svgStyle
+});
+
 var SparklineCell = function SparklineCell(_ref) {
   var cell = _ref.cell,
       useMouseOverEffect = _ref.useMouseOverEffect,
       width = _ref.width;
 
-  var _React$useState = React.useState(React.createRef()),
+  var _React$useState = React.useState(),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      cellRef = _React$useState2[0],
-      setCellRef = _React$useState2[1];
+      cellEl = _React$useState2[0],
+      setEl = _React$useState2[1];
 
-  var _React$useState3 = React.useState(null),
+  var _React$useState3 = React.useState(),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       height = _React$useState4[0],
       setHeight = _React$useState4[1];
@@ -3708,41 +3682,43 @@ var SparklineCell = function SparklineCell(_ref) {
   var data = React.useMemo(function () {
     return parseSparklineData(cell.value);
   }, [cell.value]);
-  React.useEffect(function () {
-    setHeight(cellRef.offsetHeight);
-  }, [cellRef]);
-  return React.createElement(Table_1.default.Cell, {
-    style: Object.assign(Object.assign({}, cell.style), {
+  React.useLayoutEffect(function () {
+    setHeight(cellEl === null || cellEl === void 0 ? void 0 : cellEl.offsetHeight);
+  }, [cellEl]);
+  var cellStyle = React.useMemo(function () {
+    return Object.assign(Object.assign({}, cell.style), {
       padding: 0,
       margin: 0,
       width: width,
       height: "".concat(height, "px")
-    }),
+    });
+  }, [cell.style, width, height]);
+  var lineStyle = React.useMemo(function () {
+    return {
+      paddingLeft: "".concat(paddingLeftRight, "px"),
+      paddingTop: "".concat(paddingTopBottom, "px"),
+      width: width === 'auto' ? "".concat((cellEl === null || cellEl === void 0 ? void 0 : cellEl.offsetWidth) - paddingLeftRight * 2, "px") : "".concat(width, "px"),
+      height: "".concat(height - paddingTopBottom * 2, "px")
+    };
+  }, [height, width, cellEl]);
+  return React.createElement(Table_1.default.Cell, {
+    style: cellStyle,
     align: cell.align,
-    elementRef: setCellRef,
+    elementRef: setEl,
     "data-test-cell-type": "SparklineCell",
     "data-row-index": cell.rowIndex,
     "data-col-index": cell.columnIndex,
-    onClick: useMouseOverEffect ? function () {} : undefined
+    onClick: useMouseOverEffect ? noop : undefined
   }, height ? React.createElement(Line_1.default, {
-    style: {
-      paddingLeft: "".concat(paddingLeftRight, "px"),
-      paddingTop: "".concat(paddingTopBottom, "px"),
-      width: "".concat(cellRef.offsetWidth - paddingLeftRight * 2, "px"),
-      height: "".concat(height - paddingTopBottom * 2, "px")
-    },
+    style: lineStyle,
     data: data,
-    width: cellRef.offsetWidth - paddingLeftRight * 2,
+    width: (cellEl === null || cellEl === void 0 ? void 0 : cellEl.offsetWidth) - paddingLeftRight * 2,
     height: height - paddingTopBottom * 2,
     isArea: cell.sparklineType === 'area',
     acceptNull: true,
     lineColor: cell.sparklineColor,
     fillColor: cell.sparklineAreaColor
-  }) : React.createElement("svg", {
-    style: {
-      height: 0
-    }
-  }));
+  }) : dummySVG);
 };
 
 exports.SparklineCell = SparklineCell;
@@ -3751,50 +3727,6 @@ exports.SparklineCell.displayName = 'SparklineCell';
 /***/ }),
 
 /***/ 467:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getColumnWidth = void 0;
-
-var getColumnWidth = function getColumnWidth(_ref) {
-  var columns = _ref.columns,
-      tempColumns = _ref.tempColumns,
-      columnName = _ref.columnName,
-      remainingWidth = _ref.remainingWidth,
-      numColumnsWithoutWidth = _ref.numColumnsWithoutWidth;
-
-  var _a, _b, _c, _d, _e, _f; // If both columnFormats are undefined return 0
-
-
-  if (((_a = columns[columnName]) === null || _a === void 0 ? void 0 : _a.width) === undefined && ((_b = tempColumns[columnName]) === null || _b === void 0 ? void 0 : _b.width) === undefined) {
-    return 0;
-  } // Column width is defined in the dashboard definition
-
-
-  if (((_c = columns[columnName]) === null || _c === void 0 ? void 0 : _c.width) !== undefined) {
-    return (_d = columns[columnName]) === null || _d === void 0 ? void 0 : _d.width;
-  } // Some columns in the table have a defined width; distribute remaining width to this column
-
-
-  if (numColumnsWithoutWidth !== 0) {
-    // Math.max() was needed because existing tests expected 0 as an outcome so if the calculation is -1 it puts it back up to 0
-    return Math.max(Math.ceil(((_e = tempColumns[columnName]) === null || _e === void 0 ? void 0 : _e.width) + remainingWidth / numColumnsWithoutWidth) - 1, 0);
-  } // No columns have a width in the dashboard definition
-
-
-  return (_f = tempColumns[columnName]) === null || _f === void 0 ? void 0 : _f.width;
-};
-
-exports.getColumnWidth = getColumnWidth;
-
-/***/ }),
-
-/***/ 468:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/debounce");