@splunk/visualizations 24.7.0 → 25.0.1

package/Table.js

@@ -87,7 +87,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 263);
+/******/ 	return __webpack_require__(__webpack_require__.s = 266);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -109,18 +109,18 @@ module.exports = require("react");
 /***/ 10:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/classCallCheck");
+module.exports = require("@splunk/themes/variables");
 
 /***/ }),
 
 /***/ 11:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/themes/variables");
+module.exports = require("@splunk/visualizations-shared/Message");
 
 /***/ }),
 
-/***/ 110:
+/***/ 112:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -142,114 +142,24 @@ exports.validFontSizes = ['extraSmall', 'small', 'default', 'large'];
 /***/ 12:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/colorUtils");
+module.exports = require("@babel/runtime/helpers/classCallCheck");
 
 /***/ }),
 
 /***/ 13:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var React = __webpack_require__(1);
-
-var styled_components_1 = __webpack_require__(4);
-
-var SizeAwareWrapper_1 = __webpack_require__(17);
-
-var style_1 = __webpack_require__(14);
-
-var colorUtils_1 = __webpack_require__(12);
-
-var Item = styled_components_1.default.div.attrs(function (_ref) {
-  var width = _ref.width;
-  return {
-    style: {
-      width: style_1.toPx(width)
-    }
-  };
-}).withConfig({
-  displayName: "FixedSizeContainer__Item",
-  componentId: "sc-1yhgpod-0"
-})(["position:relative;background-color:", "};"], function (props) {
-  return colorUtils_1.isColor(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
-}); // Use `.attrs()` for highly dynamic styles. Ref: https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291
-
-var FixSizeItem = styled_components_1.default.div.attrs(function (_ref2) {
-  var width = _ref2.width,
-      height = _ref2.height;
-  return {
-    style: Object.assign(Object.assign({}, width && {
-      width: style_1.toPx(width)
-    }), height && {
-      height: style_1.toPx(height)
-    })
-  };
-}).withConfig({
-  displayName: "FixedSizeContainer__FixSizeItem",
-  componentId: "sc-1yhgpod-1"
-})(["position:relative;flex-direction:column;flex:1;display:flex;background-color:", "};"], function (props) {
-  return colorUtils_1.isColor(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
-});
-var ItemContent = styled_components_1.default.div.withConfig({
-  displayName: "FixedSizeContainer__ItemContent",
-  componentId: "sc-1yhgpod-2"
-})(["position:relative;min-height:100px;width:100%;"]);
-var FixSizeItemContent = styled_components_1.default.div.withConfig({
-  displayName: "FixedSizeContainer__FixSizeItemContent",
-  componentId: "sc-1yhgpod-3"
-})(["min-height:0px;flex:1;position:relative;box-sizing:border-box;"]);
-
-var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
-  var FixedSizeContainer = function FixedSizeContainer(props) {
-    var width = props.width,
-        height = props.height,
-        backgroundColor = props.backgroundColor;
-
-    if (!height) {
-      return React.createElement(Item, {
-        "data-test": "item",
-        width: width,
-        backgroundColor: backgroundColor
-      }, React.createElement(ItemContent, null, React.createElement(Viz, Object.assign({}, props))));
-    }
-
-    return React.createElement(FixSizeItem, {
-      "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "24.7.0 - c7389a161",
-      width: width,
-      height: height,
-      backgroundColor: backgroundColor
-    }, React.createElement(FixSizeItemContent, null, React.createElement(SizeAwareWrapper_1.default, null, function (_ref3) {
-      var newWidth = _ref3.width,
-          newHeight = _ref3.height;
-      return React.createElement(Viz, Object.assign({}, props, {
-        width: newWidth,
-        height: newHeight
-      }));
-    })));
-  };
-
-  FixedSizeContainer.displayName = 'withFixedSizeContainer';
-  return FixedSizeContainer;
-};
+/***/ (function(module, exports) {
 
-exports.default = withFixedSizeContainer;
+module.exports = require("@splunk/visualizations-shared/colorUtils");
 
 /***/ }),
 
-/***/ 137:
+/***/ 139:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _slicedToArray = __webpack_require__(51);
+var _slicedToArray = __webpack_require__(52);
 
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
@@ -271,15 +181,15 @@ exports.config = exports.PureTable = exports.themes = exports.computeVizProps =
 
 var lodash_1 = __webpack_require__(2);
 
-var colorUtils_1 = __webpack_require__(12);
+var colorUtils_1 = __webpack_require__(13);
 
-var config_1 = __webpack_require__(264);
+var config_1 = __webpack_require__(267);
 
 exports.config = config_1.default;
 
-var withDashboardViz_1 = __webpack_require__(29);
+var withDashboardViz_1 = __webpack_require__(30);
 
-var PureTable_1 = __webpack_require__(265);
+var PureTable_1 = __webpack_require__(140);
 
 exports.PureTable = PureTable_1.default;
 
@@ -358,1638 +268,1756 @@ exports.default = Table;
 /***/ }),
 
 /***/ 14:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/style");
+/***/ (function(module, exports, __webpack_require__) {
 
-/***/ }),
+"use strict";
 
-/***/ 15:
-/***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/schemaUtils");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
-/***/ }),
+var React = __webpack_require__(1);
 
-/***/ 16:
-/***/ (function(module, exports) {
+var styled_components_1 = __webpack_require__(4);
 
-module.exports = require("@babel/runtime/helpers/createClass");
+var SizeAwareWrapper_1 = __webpack_require__(18);
 
-/***/ }),
+var style_1 = __webpack_require__(15);
 
-/***/ 17:
-/***/ (function(module, exports) {
+var colorUtils_1 = __webpack_require__(13);
 
-module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
+var Item = styled_components_1.default.div.attrs(function (_ref) {
+  var width = _ref.width;
+  return {
+    style: {
+      width: style_1.toPx(width)
+    }
+  };
+}).withConfig({
+  displayName: "FixedSizeContainer__Item",
+  componentId: "sc-1yhgpod-0"
+})(["position:relative;background-color:", "};"], function (props) {
+  return colorUtils_1.isColor(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
+}); // Use `.attrs()` for highly dynamic styles. Ref: https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291
 
-/***/ }),
+var FixSizeItem = styled_components_1.default.div.attrs(function (_ref2) {
+  var width = _ref2.width,
+      height = _ref2.height;
+  return {
+    style: Object.assign(Object.assign({}, width && {
+      width: style_1.toPx(width)
+    }), height && {
+      height: style_1.toPx(height)
+    })
+  };
+}).withConfig({
+  displayName: "FixedSizeContainer__FixSizeItem",
+  componentId: "sc-1yhgpod-1"
+})(["position:relative;flex-direction:column;flex:1;display:flex;background-color:", "};"], function (props) {
+  return colorUtils_1.isColor(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
+});
+var ItemContent = styled_components_1.default.div.withConfig({
+  displayName: "FixedSizeContainer__ItemContent",
+  componentId: "sc-1yhgpod-2"
+})(["position:relative;min-height:100px;width:100%;"]);
+var FixSizeItemContent = styled_components_1.default.div.withConfig({
+  displayName: "FixedSizeContainer__FixSizeItemContent",
+  componentId: "sc-1yhgpod-3"
+})(["min-height:0px;flex:1;position:relative;box-sizing:border-box;"]);
 
-/***/ 19:
-/***/ (function(module, exports) {
+var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
+  var FixedSizeContainer = function FixedSizeContainer(props) {
+    var width = props.width,
+        height = props.height,
+        backgroundColor = props.backgroundColor;
 
-module.exports = require("@splunk/visualization-context/TimezoneContext");
+    if (!height) {
+      return React.createElement(Item, {
+        "data-test": "item",
+        width: width,
+        backgroundColor: backgroundColor
+      }, React.createElement(ItemContent, null, React.createElement(Viz, Object.assign({}, props))));
+    }
 
-/***/ }),
+    return React.createElement(FixSizeItem, {
+      "data-test": "fix-size-item",
+      "data-splunk-visualization-version": "25.0.1 - de10ad954",
+      width: width,
+      height: height,
+      backgroundColor: backgroundColor
+    }, React.createElement(FixSizeItemContent, null, React.createElement(SizeAwareWrapper_1.default, null, function (_ref3) {
+      var newWidth = _ref3.width,
+          newHeight = _ref3.height;
+      return React.createElement(Viz, Object.assign({}, props, {
+        width: newWidth,
+        height: newHeight
+      }));
+    })));
+  };
 
-/***/ 2:
-/***/ (function(module, exports) {
+  FixedSizeContainer.displayName = 'withFixedSizeContainer';
+  return FixedSizeContainer;
+};
 
-module.exports = require("lodash");
+exports.default = withFixedSizeContainer;
 
 /***/ }),
 
-/***/ 21:
-/***/ (function(module, exports) {
+/***/ 140:
+/***/ (function(module, exports, __webpack_require__) {
 
-module.exports = require("@babel/runtime/helpers/typeof");
+"use strict";
 
-/***/ }),
 
-/***/ 22:
-/***/ (function(module, exports) {
+var _slicedToArray = __webpack_require__(52);
 
-module.exports = require("@splunk/themes/pick");
+var _defineProperty = __webpack_require__(7);
 
-/***/ }),
+var _taggedTemplateLiteral = __webpack_require__(81);
 
-/***/ 24:
-/***/ (function(module, exports, __webpack_require__) {
+var _templateObject, _templateObject2;
 
-"use strict";
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
 
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.pickFieldFromJSONSchema = void 0;
+exports.MINIMUM_COLUMN_SIZE = void 0;
+
+var React = __webpack_require__(1);
+
+var T = __webpack_require__(0);
 
 var lodash_1 = __webpack_require__(2);
 
-var pickFieldFromJSONSchema = function pickFieldFromJSONSchema(optionsSchema) {
-  var fieldName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'default';
-  return Object.keys(optionsSchema).reduce(function (accum, k) {
-    if (lodash_1.has(optionsSchema[k], fieldName)) {
-      accum[k] = optionsSchema[k][fieldName];
-    } else if (lodash_1.get(optionsSchema, [k, 'type']) === 'object' && lodash_1.has(optionsSchema[k], 'properties')) {
-      var nestedSchema = exports.pickFieldFromJSONSchema(optionsSchema[k].properties, fieldName);
+var styled_components_1 = __webpack_require__(4);
 
-      if (!lodash_1.isEmpty(nestedSchema)) {
-        accum[k] = nestedSchema;
-      }
-    }
+var i18n_1 = __webpack_require__(3);
 
-    return accum;
-  }, {});
-};
+var Table_1 = __webpack_require__(90);
 
-exports.pickFieldFromJSONSchema = pickFieldFromJSONSchema;
+var Paginator_1 = __webpack_require__(268);
 
-/***/ }),
+var Message_1 = __webpack_require__(269);
 
-/***/ 25:
-/***/ (function(module, exports, __webpack_require__) {
+var colorUtils_1 = __webpack_require__(13);
 
-"use strict";
+var style_1 = __webpack_require__(15);
 
+var pick_1 = __webpack_require__(20);
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.shouldShowIconPlaceholder = void 0;
+var variables_1 = __webpack_require__(10);
 
-var React = __webpack_require__(1);
+var hooks_1 = __webpack_require__(270);
 
-var T = __webpack_require__(0);
+var consts_1 = __webpack_require__(112);
 
-var lodash_1 = __webpack_require__(2);
+var cells_1 = __webpack_require__(271);
 
-var i18n_1 = __webpack_require__(3);
+var getPagination_1 = __webpack_require__(28);
 
-var Message_1 = __webpack_require__(9);
+var getSorting_1 = __webpack_require__(27);
 
-var FixedSizeContainer_1 = __webpack_require__(13);
-/**
- * @method shouldShowIconPlaceholder
- * @param {object} dataSources
- * @param {boolean} loading
- * @returns {boolean}
- */
-
-
-var shouldShowIconPlaceholder = function shouldShowIconPlaceholder(dataSources) {
-  var loading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var data = lodash_1.get(dataSources, 'primary.data.columns[0]', undefined);
-  var noData = data === undefined;
-  var fields = lodash_1.get(dataSources, 'primary.data.fields[0]', undefined);
-  var noFields = fields === undefined;
-  return loading || noData || noFields;
-};
+var FixedSizeContainer_1 = __webpack_require__(14);
 
-exports.shouldShowIconPlaceholder = shouldShowIconPlaceholder;
-var propTypes = {
-  icon: T.func,
-  width: T.oneOfType([T.string, T.number]),
-  height: T.oneOfType([T.string, T.number]),
-  // eslint-disable-next-line react/no-unused-prop-types
-  backgroundColor: T.string,
-  iconColor: T.string
-};
-/**
- * @method IconPlaceholder
- * @param {IconPlaceholderProps} props
- * @returns {React.ReactElement}
- */
+var utils_1 = __webpack_require__(276); // debounce was imported this way due to typing
+// eslint-disable-next-line import/order
 
-var IconPlaceholder = function IconPlaceholder(props) {
-  var width = props.width,
-      height = props.height,
-      icon = props.icon,
-      iconColor = props.iconColor;
 
-  if (icon) {
-    return React.createElement(icon, {
-      style: {
-        left: '50%',
-        top: '50%',
-        color: iconColor,
-        opacity: 0.15,
-        position: 'absolute',
-        transform: 'translate(-50%, -50%)'
-      },
-      width: '50%',
-      height: '50%'
-    });
-  }
+var debounce = __webpack_require__(277);
 
-  return React.createElement(Message_1.default, {
-    width: width,
-    height: height,
-    level: "warning",
-    message: i18n_1._('No DataSource Connected')
+exports.MINIMUM_COLUMN_SIZE = 30;
+var NonVisibleTableHead = styled_components_1.default(Table_1.default.Head).withConfig({
+  displayName: "PureTable__NonVisibleTableHead",
+  componentId: "tovzjg-0"
+})(["display:none;"]);
+var FixedTableHead = styled_components_1.default(Table_1.default.Head).withConfig({
+  displayName: "PureTable__FixedTableHead",
+  componentId: "tovzjg-1"
+})(["position:sticky;top:0;"]);
+var VizTableContainer = styled_components_1.default.div.withConfig({
+  displayName: "PureTable__VizTableContainer",
+  componentId: "tovzjg-2"
+})(["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
+}), function (props) {
+  return colorUtils_1.isColor(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
+});
+VizTableContainer.displayName = 'VizTableContainer';
+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) {
+  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;
+  var padding = pick_1.default({
+    enterprise: variables_1.default.spacingHalf({
+      theme: theme
+    }),
+    prisma: variables_1.default.spacingSmall({
+      theme: theme
+    })
+  })({
+    theme: theme
   });
-};
-
-IconPlaceholder.propTypes = propTypes;
-IconPlaceholder.defaultProps = {
-  width: '100%',
-  height: 250
-};
-exports.default = FixedSizeContainer_1.default(IconPlaceholder);
-
-/***/ }),
-
-/***/ 26:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var _defineProperty = __webpack_require__(7);
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+  var paddingOffset = parseInt(padding, 10) * 2;
+  return style_1.toDimension({
+    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);
+}, 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);
+}, function (_ref5) {
+  var widthSet = _ref5.widthSet;
+  return widthSet ? 'fixed' : 'auto';
+}, function (_ref6) {
+  var widthSet = _ref6.widthSet;
+  return widthSet ? '0' : '100%';
 });
-exports.getSortingParams = exports.SortParamsPropTypes = void 0;
-
-var T = __webpack_require__(0);
+SUITableContainer.displayName = 'SUITableContainer';
+var PaginatorContainer = styled_components_1.default.div.withConfig({
+  displayName: "PureTable__PaginatorContainer",
+  componentId: "tovzjg-4"
+})(["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
 
-var lodash_1 = __webpack_require__(2);
+var withEmptyTableMessage = function withEmptyTableMessage(Viz) {
+  // TODO(fkurniawan): add omit type to differentiate WrapperProps from PureTableProps
+  var Wrapper = function Wrapper(props) {
+    var headers = props.headers,
+        table = props.table,
+        headerVisibility = props.headerVisibility,
+        showRowNumbers = props.showRowNumbers,
+        showInternalFields = props.showInternalFields,
+        tableFormat = props.tableFormat,
+        columnFormat = props.columnFormat;
 
-var DataSource_1 = __webpack_require__(36);
+    var _hooks_1$useTable = hooks_1.useTable({
+      headers: headers,
+      table: table,
+      headerVisibility: headerVisibility,
+      showRowNumbers: showRowNumbers,
+      showInternalFields: showInternalFields,
+      tableFormat: Object.assign(Object.assign(Object.assign(Object.assign({}, tableFormat), (tableFormat === null || tableFormat === void 0 ? void 0 : tableFormat.align) && {
+        align: lodash_1.cloneDeep(tableFormat.align)
+      }), (tableFormat === null || tableFormat === void 0 ? void 0 : tableFormat.cellTypes) && {
+        cellTypes: lodash_1.cloneDeep(tableFormat.cellTypes)
+      }), (tableFormat === null || tableFormat === void 0 ? void 0 : tableFormat.data) && {
+        data: lodash_1.cloneDeep(tableFormat.data)
+      }),
+      columnFormat: columnFormat
+    }),
+        tableHeader = _hooks_1$useTable.tableHeader,
+        tableBody = _hooks_1$useTable.tableBody;
 
-exports.SortParamsPropTypes = T.shape({
-  currentSortKey: T.string,
-  currentSortDir: T.oneOf(DataSource_1.validSortDirs),
-  onSort: T.func
-});
+    if (tableBody.rows.length === 0) {
+      return React.createElement(Message_1.default, {
+        type: "warning"
+      }, i18n_1._('No data!'));
+    }
 
-var getSortingParams = function getSortingParams(_ref) {
-  var requestParams = _ref.requestParams,
-      onRequestParamsChange = _ref.onRequestParamsChange;
-  var currentSortKey;
-  var currentSortDir;
-  var nextSortDirMap = {
-    asc: 'desc',
-    desc: 'asc',
-    none: 'asc'
+    return React.createElement(Viz, Object.assign({}, props, {
+      tableHeader: tableHeader,
+      tableBody: tableBody
+    }));
   };
-  var onSort;
-
-  if (lodash_1.isFunction(onRequestParamsChange)) {
-    if (requestParams && lodash_1.has(requestParams, 'sort')) {
-      currentSortKey = Object.keys(requestParams.sort).shift();
-      currentSortDir = requestParams.sort[currentSortKey];
-    } // undid memoization since there is a dependency on requestParams, which is a deeply nested object
 
+  Wrapper.displayName = 'PureTableWrapper';
+  return Wrapper;
+};
 
-    onSort = function onSort(e, _ref2) {
-      var sortKey = _ref2.sortKey,
-          sortDir = _ref2.sortDir;
+var useTableHead = function useTableHead(visibility) {
+  if (visibility === 'none') {
+    return NonVisibleTableHead;
+  }
 
-      if (typeof sortKey === 'string') {
-        var nextSortDir = lodash_1.has(nextSortDirMap, sortDir) ? nextSortDirMap[sortDir] : 'none';
-        onRequestParamsChange(Object.assign(Object.assign({}, requestParams), {
-          offset: 0,
-          sort: _defineProperty({}, sortKey, nextSortDir)
-        }));
-      } else {
-        onRequestParamsChange(requestParams);
-      }
-    };
+  if (visibility === 'fixed') {
+    return FixedTableHead;
   }
 
-  return {
-    currentSortKey: currentSortKey,
-    currentSortDir: currentSortDir,
-    onSort: onSort
-  };
+  return Table_1.default.Head;
 };
 
-exports.getSortingParams = getSortingParams;
+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 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({
+    elementRef: cellRef
+  }, props), value);
+};
 
-/***/ 263:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
-  Object.defineProperty(o, k2, {
-    enumerable: true,
-    get: function get() {
-      return m[k];
-    }
-  });
-} : function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
-  o[k2] = m[k];
-});
-
-var __exportStar = this && this.__exportStar || function (m, exports) {
-  for (var p in m) {
-    if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-  }
+var fontMap = {
+  proportional: 'Splunk Platform Sans',
+  monospace: 'Splunk Platform Mono'
+};
+var fontSizeMap = {
+  extraSmall: '10px',
+  small: '12px',
+  default: '14px',
+  large: '16px'
+};
+var rowHeightMap = {
+  extraSmall: '12px',
+  small: '12px',
+  default: '20px',
+  large: '24px'
 };
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0; // NOTE: wildcard syntax only works for named exports
-// for some reason, omitting the default export worked before TS v4
-// see: https://stackoverflow.com/a/34445175
-
-__exportStar(__webpack_require__(137), exports);
-
-var Table_1 = __webpack_require__(137);
+var PureTable = function PureTable(props) {
+  var _a;
 
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return Table_1.default;
-  }
-});
+  var count = props.count,
+      width = props.width,
+      height = props.height,
+      backgroundColor = props.backgroundColor,
+      tableHeader = props.tableHeader,
+      tableBody = props.tableBody,
+      showRowNumbers = props.showRowNumbers,
+      _props$sortParams = props.sortParams,
+      currentSortKey = _props$sortParams.currentSortKey,
+      currentSortDir = _props$sortParams.currentSortDir,
+      onSort = _props$sortParams.onSort,
+      _b = props.paginatorParams,
+      isPaging = _b.isPaging,
+      paginatorOnChange = _b.onChange,
+      paginatorProps = __rest(_b, ["isPaging", "onChange"]),
+      onCellClick = props.onCellClick,
+      onColumnFormatChange = props.onColumnFormatChange,
+      columnFormat = props.columnFormat,
+      mode = props.mode,
+      headerVisibility = props.headerVisibility,
+      font = props.font,
+      fontSize = props.fontSize;
 
-/***/ }),
+  var _React$useState = React.useState(columnFormat),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      columns = _React$useState2[0],
+      setColumns = _React$useState2[1];
 
-/***/ 264:
-/***/ (function(module, exports, __webpack_require__) {
+  var _React$useState3 = React.useState(columnFormat),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      tempColumns = _React$useState4[0],
+      setTempColumns = _React$useState4[1];
 
-"use strict";
+  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;
 
-var _toConsumableArray = __webpack_require__(41);
+    if ((_a = columns[key]) === null || _a === void 0 ? void 0 : _a.width) {
+      return acc;
+    }
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+    return acc + 1;
+  }, 0);
+  var containerRef = React.useRef(null);
+  var containerRefInner = React.useRef(null);
+  var containerRefInnerWidth = (_a = containerRefInner === null || containerRefInner === void 0 ? void 0 : containerRefInner.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
+  var widthRef = React.useRef(0);
+  var widthSet = tableHeader.cells.length === tableHeader.cells.filter(function (_ref7) {
+    var value = _ref7.value,
+        showCell = _ref7.showCell;
 
-var i18n_1 = __webpack_require__(3);
+    var _a, _b;
 
-var lodash_1 = __webpack_require__(2);
+    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) {
+      firstRenderCount.current = count;
+      paginatorOnChange(null, {
+        count: count
+      });
+    }
+  }, [count, paginatorProps]);
+  var stringifiedColumnFormat = JSON.stringify(columnFormat);
+  var columnFormatRef = React.useRef(stringifiedColumnFormat);
+  var modeRef = React.useRef(mode);
+  React.useEffect(function () {
+    if (modeRef.current !== mode || columnFormatRef.current !== stringifiedColumnFormat) {
+      columnFormatRef.current = stringifiedColumnFormat;
+      modeRef.current = mode;
+      setColumns(columnFormat);
+    }
+  }, [mode, stringifiedColumnFormat]);
+  var TableHead = useTableHead(headerVisibility);
+  var debouncedDrilldown = debounce(function (e, payload) {
+    if (window.getSelection().toString() === '') {
+      if (lodash_1.isFunction(onCellClick)) {
+        onCellClick({
+          e: e,
+          payload: payload
+        });
+      }
+    }
+  }, 200);
+  var drilldownHandler = React.useCallback(function (e) {
+    var element = e.target;
+    var row = element.getAttribute('data-row-index');
+    var col = element.getAttribute('data-col-index');
+    var arrayIndex = element.getAttribute('data-array-index') || -1;
 
-var schemaUtils_1 = __webpack_require__(15);
+    if (row && col) {
+      var cellRefIndex = +col;
+      var cellIndex = cellRefIndex;
+      var rowIndex = +row;
+      var fieldValue = tableHeader.cells[cellRefIndex].value;
+      var cellValue = tableBody.rows[rowIndex].cells[cellRefIndex].value;
+      var cellRawValue = tableBody.rows[rowIndex].cells[cellRefIndex].value;
+      var value = arrayIndex === -1 ? cellValue : cellRawValue[+arrayIndex]; // Wish we did not have these if statements for
+      // showRowNumbers
 
-var colorConstants_1 = __webpack_require__(42);
+      if (showRowNumbers === true) {
+        if (cellIndex === 0) {
+          // no click event for row numbers
+          return;
+        }
 
-var visualization_icons_1 = __webpack_require__(45);
+        cellIndex -= 1;
+      }
 
-var placeholders_1 = __webpack_require__(44);
+      var payload = {
+        cellIndex: cellIndex,
+        rowIndex: rowIndex,
+        fieldValue: fieldValue,
+        cellValue: cellValue,
+        cellRawValue: cellRawValue,
+        value: value,
+        name: fieldValue
+      };
+      tableBody.rows[rowIndex].cells.forEach(function (c, index) {
+        var rowToken = "row.".concat(tableHeader.cells[index].value, ".value");
+        payload[rowToken] = c.value;
+      });
+      debouncedDrilldown(e.nativeEvent, payload);
+    }
+  }, [onCellClick, showRowNumbers, tableHeader, tableBody]);
+  var debouncedOnColumnFormatChange = React.useMemo(function () {
+    return debounce(function (newFormat) {
+      onColumnFormatChange(newFormat);
+    }, 300);
+  }, [onColumnFormatChange]);
 
-var variables_1 = __webpack_require__(11);
+  var handleResizeColumn = function handleResizeColumn(_event, payload) {
+    var updatedCF = columns;
+    var field = payload.columnId;
+    var lastShowingTableHeaderWidth = utils_1.getLastColumnWidth(containerRefInnerWidth, lastShowingTableHeadersID, columns, tempColumns, firstShowingTableHeadersID);
+    updatedCF[lastShowingTableHeadersID] = Object.assign(Object.assign({}, updatedCF[lastShowingTableHeadersID]), {
+      width: Math.max(lastShowingTableHeaderWidth, exports.MINIMUM_COLUMN_SIZE)
+    });
+    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 pick_1 = __webpack_require__(22);
+    if (mode === 'edit') {
+      debouncedOnColumnFormatChange(updatedCF);
+    }
+  };
 
-var configUtils_1 = __webpack_require__(6);
+  var handleEventClick = function handleEventClick(e) {
+    e.stopPropagation();
+  };
 
-var VizBehavior_1 = __webpack_require__(5);
+  var recalculateTempColumnWidths = function recalculateTempColumnWidths() {
+    setTempColumns({});
+    setRemainingWidth(0);
+  };
 
-var consts_1 = __webpack_require__(110);
+  var withColumnResizing = function withColumnResizing(func) {
+    return function (e, additionalParams) {
+      recalculateTempColumnWidths();
+      func(e, additionalParams);
+    };
+  };
 
-var VizCategory_1 = __webpack_require__(28);
+  var fontMapped = fontMap[font] || fontMap.proportional;
+  var fontSizeMapped = fontSizeMap[fontSize] || fontSizeMap.default;
+  var rowHeightMapped = rowHeightMap[fontSize] || rowHeightMap.default;
+  var firstShowingTableHeadersID = tableHeader.cells.filter(function (c) {
+    return c.showCell;
+  }).map(function (c) {
+    return c.value;
+  })[0];
+  var lastShowingTableHeadersID = tableHeader.cells.filter(function (c) {
+    return c.showCell;
+  }).map(function (c) {
+    return c.value;
+  }).reverse()[0];
+  return React.createElement(VizTableContainer, {
+    backgroundColor: backgroundColor,
+    ref: containerRef
+  }, React.createElement(SUITableContainer, {
+    ref: containerRefInner,
+    width: width,
+    height: height,
+    isPaging: isPaging,
+    headerStyle: tableHeader.style,
+    widthSet: widthSet,
+    font: fontMapped,
+    fontSize: fontSizeMapped,
+    lineHeight: rowHeightMapped
+  }, React.createElement(Table_1.default, {
+    headType: headerVisibility !== 'none' ? 'inline' : undefined,
+    innerStyle: {
+      height: '100%'
+    },
+    outerStyle: {
+      height: '100%',
+      cursor: onCellClick ? 'pointer' : 'unset'
+    },
+    onClick: onCellClick ? drilldownHandler : lodash_1.noop,
+    onRequestResizeColumn: handleResizeColumn
+  }, React.createElement(TableHead, null, tableHeader.cells.filter(function (c) {
+    return c.showCell;
+  }).map(function (_a) {
+    var key = _a.key,
+        value = _a.value,
+        sortKey = _a.sortKey,
+        rest = __rest(_a, ["key", "value", "sortKey"]);
 
-var dataContract = {
-  requiredDataSources: [{
-    name: 'primary',
-    description: 'DataSource that powers the visualization'
-  }],
-  optionalDataSources: [],
-  initialRequestParams: {
-    primary: function primary() {
-      var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      return {
-        offset: 0,
-        count: options.count ? options.count : 10,
-        requestTotalCount: true
-      };
-    }
-  }
+    return React.createElement(HeadCell, Object.assign({
+      key: key,
+      columnId: value,
+      sortDir: sortKey === currentSortKey ? currentSortDir : 'none',
+      width: value === lastShowingTableHeadersID ? utils_1.getLastColumnWidth(containerRefInnerWidth, lastShowingTableHeadersID, columns, tempColumns, firstShowingTableHeadersID) : utils_1.getColumnWidth({
+        columns: columns,
+        tempColumns: tempColumns,
+        columnName: value,
+        remainingWidth: remainingWidth,
+        numColumnsWithoutWidth: numColumnsWithoutWidth
+      }),
+      onMouseDown: handleEventClick,
+      value: value,
+      setTempColumnWidth: setTempColumns,
+      widthSet: widthSet,
+      onSort: withColumnResizing(onSort),
+      headerVisibility: headerVisibility,
+      setRemainingWidth: setRemainingWidth
+    }, Object.assign({
+      sortKey: sortKey
+    }, rest)));
+  })), React.createElement(Table_1.default.Body, null, tableBody.rows.map(function (row) {
+    return React.createElement(Table_1.default.Row, {
+      key: row.key
+    }, row.cells.filter(function (c) {
+      return c.showCell;
+    }).map(function (cell) {
+      return React.createElement(cells_1.SwitchTableCell, {
+        key: cell.key,
+        type: cell.cellType
+      }, React.createElement(cells_1.TextCell, {
+        cell: cell,
+        useMouseOverEffect: !!onCellClick,
+        width: cell.header === lastShowingTableHeadersID ? utils_1.getLastColumnWidth(containerRefInnerWidth, lastShowingTableHeadersID, columns, tempColumns, firstShowingTableHeadersID) : utils_1.getColumnWidth({
+          columns: columns,
+          tempColumns: tempColumns,
+          columnName: cell.header,
+          remainingWidth: remainingWidth,
+          numColumnsWithoutWidth: numColumnsWithoutWidth
+        })
+      }), React.createElement(cells_1.SparklineCell, {
+        cell: cell,
+        useMouseOverEffect: !!onCellClick,
+        width: cell.header === lastShowingTableHeadersID ? utils_1.getLastColumnWidth(containerRefInnerWidth, lastShowingTableHeadersID, columns, tempColumns, firstShowingTableHeadersID) : utils_1.getColumnWidth({
+          columns: columns,
+          tempColumns: tempColumns,
+          columnName: cell.header,
+          remainingWidth: remainingWidth,
+          numColumnsWithoutWidth: numColumnsWithoutWidth
+        })
+      }), React.createElement(cells_1.ArrayCell, {
+        cell: cell,
+        useMouseOverEffect: !!onCellClick,
+        width: cell.header === lastShowingTableHeadersID ? utils_1.getLastColumnWidth(containerRefInnerWidth, lastShowingTableHeadersID, columns, tempColumns, firstShowingTableHeadersID) : utils_1.getColumnWidth({
+          columns: columns,
+          tempColumns: tempColumns,
+          columnName: cell.header,
+          remainingWidth: remainingWidth,
+          numColumnsWithoutWidth: numColumnsWithoutWidth
+        })
+      }));
+    }));
+  })))), isPaging ? React.createElement(PaginatorContainer, null, React.createElement(Paginator_1.default, Object.assign({
+    onChange: withColumnResizing(paginatorOnChange)
+  }, paginatorProps))) : null);
 };
-var size = {
-  initialWidth: 300,
-  initialHeight: 300
+
+var cellDataType = T.oneOfType([T.string, T.number, T.arrayOf(T.oneOfType([T.string, T.number]))]);
+PureTable.propTypes = {
+  backgroundColor: T.string,
+  count: T.number,
+  columnFormat: T.objectOf(T.shape({
+    align: T.arrayOf(T.oneOf(consts_1.validAlignments)),
+    cellTypes: T.arrayOf(T.oneOf(consts_1.validCellRenderers)),
+    data: T.arrayOf(cellDataType),
+    rowBackgroundColors: T.arrayOf(T.string),
+    rowColors: T.arrayOf(T.string),
+    sparklineAreaColors: T.arrayOf(T.string),
+    sparklineColors: T.arrayOf(T.string),
+    sparklineTypes: T.arrayOf(T.oneOf(consts_1.validSparklineTypes))
+  })),
+  headers: T.arrayOf(T.string),
+  headerVisibility: T.oneOf(consts_1.validHeaderVisibilities),
+  height: T.oneOfType([T.number]),
+  mode: T.string,
+  onCellClick: T.func,
+  paginatorParams: getPagination_1.PaginatorParamsPropTypes,
+  showRowNumbers: T.bool,
+  sortParams: getSorting_1.SortParamsPropTypes,
+  table: T.arrayOf(T.arrayOf(cellDataType)),
+  tableFormat: T.shape({
+    align: T.arrayOf(T.arrayOf(T.oneOf(consts_1.validAlignments))),
+    cellTypes: T.arrayOf(T.arrayOf(T.oneOf(consts_1.validCellRenderers))),
+    data: T.arrayOf(T.arrayOf(cellDataType)),
+    headerBackgroundColor: T.string,
+    headerColor: T.string,
+    rowBackgroundColors: T.oneOfType([T.arrayOf(T.string), T.arrayOf(T.arrayOf(T.string))]),
+    rowColors: T.oneOfType([T.arrayOf(T.string), T.arrayOf(T.arrayOf(T.string))]),
+    sparklineAreaColors: T.arrayOf(T.arrayOf(T.string)),
+    sparklineColors: T.arrayOf(T.arrayOf(T.string)),
+    sparklineTypes: T.arrayOf(T.arrayOf(T.oneOf(consts_1.validSparklineTypes)))
+  }),
+  theme: T.any,
+  width: T.oneOfType([T.number]),
+  onColumnFormatChange: T.func,
+  font: T.string,
+  fontSize: T.string
 };
-var defaultContext = {
-  tableAlignByType: [{
-    match: 'string',
-    value: 'left'
-  }, {
-    match: 'number',
-    value: 'right'
-  }, {
-    match: 'time',
-    value: 'left'
-  }, {
-    match: 'color',
-    value: 'left'
-  }, {
-    match: 'array',
-    value: 'left'
-  }, {
-    match: 'sparkline',
-    value: 'center'
-  }, {
-    match: 'unknown',
-    value: 'left'
-  }],
-  tableCellTypeByType: [{
-    match: 'string',
-    value: 'TextCell'
-  }, {
-    match: 'number',
-    value: 'TextCell'
-  }, {
-    match: 'time',
-    value: 'TextCell'
-  }, {
-    match: 'color',
-    value: 'TextCell'
-  }, {
-    match: 'array',
-    value: 'ArrayCell'
-  }, {
-    match: 'sparkline',
-    value: 'SparklineCell'
-  }, {
-    match: 'unknown',
-    value: 'TextCell'
-  }],
-  // NOTE: These contexts are used by the table background color editor.
-  // Please be careful removing/renaming/altering them.
-  // There are unit tests and visual test that will capture breakages.
-  tableRowColorMaxContrast: {
-    colors: ['> themes.textColor', '> themes.inverseTextColor'],
-    default: '> themes.textColor'
-  },
-  tableRowBackgroundColorEvenConfig: {
-    channel: 'hsv.v',
-    value: '*0.96'
+PureTable.defaultProps = {
+  columnFormat: {},
+  headers: [],
+  headerVisibility: 'inline',
+  height: 300,
+  mode: 'view',
+  onCellClick: null,
+  paginatorParams: {
+    isPaging: false,
+    onChange: lodash_1.noop
   },
-  tableHeaderBackgroundColorConfig: {
-    channel: 'hsv.v',
-    value: '*0.9'
+  showRowNumbers: false,
+  sortParams: {
+    onSort: lodash_1.noop
   },
-  tableRowBackgroundColorsByTheme: ['> themes.rowBackgroundColorOdd'],
-  tableAltRowBackgroundColorsByTheme: ['> themes.rowBackgroundColorOdd', '> themes.rowBackgroundColorEven'],
-  tableRowBackgroundColorsByBackgroundColor: ['> backgroundColor'],
-  tableAltRowBackgroundColorsByBackgroundColor: ['> backgroundColor', '> backgroundColor | setColorChannel(tableRowBackgroundColorEvenConfig)']
-};
-var unitPositionConfig = {
-  label: i18n_1._('Units Position'),
-  editor: 'editor.select',
-  option: 'unitPosition',
-  editorProps: {
-    values: [{
-      label: i18n_1._('Before'),
-      value: 'before'
-    }, {
-      label: i18n_1._('After'),
-      value: 'after'
-    }]
-  }
-};
-var unitLabelConfig = {
-  label: i18n_1._('Unit Label'),
-  option: 'unit',
-  editor: 'editor.text'
-};
-var timeFormattingConfig = {
-  label: i18n_1._('Date & Time Formatting'),
-  option: 'format',
-  editor: 'editor.text',
-  editorProps: {
-    tooltip: i18n_1._('For example: DD-MM-YYYY')
-  }
+  table: [],
+  tableFormat: {},
+  theme: {},
+  width: 300,
+  onColumnFormatChange: lodash_1.noop,
+  font: fontMap.proportional,
+  fontSize: fontSizeMap.default
 };
-var sequentialColorConfig = [{
-  to: 20,
-  value: '#D41F1F'
-}, {
-  from: 20,
-  to: 40,
-  value: '#D94E17'
-}, {
-  from: 40,
-  to: 60,
-  value: '#CBA700'
-}, {
-  from: 60,
-  to: 80,
-  value: '#669922'
-}, {
-  from: 80,
-  value: '#118832'
-}];
-var matchColorConfig = [{
-  match: '',
-  value: '#5C33FF'
-}];
-var optionsSchema = {
-  backgroundColor: {
-    default: '> themes.defaultBackgroundColor',
-    description: 'Specify the color for the background. You might use a data source to apply the color. The default for enterprise light is "#FFFFFF". The default for enterprise dark is "#000000". The default for prisma dark is "#0B0C0E".',
-    pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN,
-    type: 'string'
-  },
-  columnFormat: {
-    description: 'Allows column formatting for individual columns.',
-    type: 'object',
-    patternProperties: {
-      '.*': {
-        description: 'Customization for column property',
-        type: 'object',
-        properties: {
-          align: {
-            description: 'Specify the alignment for each cell in a column. Valid alignments include "left", "center", and "right".',
-            type: 'array',
-            items: {
-              type: 'string',
-              enum: consts_1.validAlignments.concat()
-            }
-          },
-          cellTypes: {
-            description: 'Specify how to render data in cells. Valid cell renders include "TextCell", "ArrayCell", "SparklineCell".',
-            type: 'array',
-            items: {
-              type: 'string',
-              enum: consts_1.validCellRenderers.concat()
-            }
-          },
-          data: {
-            description: 'Specify data points to be displayed in the cells of a column.',
-            type: 'array',
-            items: {
-              oneOf: [{
-                type: 'string'
-              }, {
-                type: 'number'
-              }, {
-                type: 'array',
-                items: {
-                  type: ['string', 'number']
-                }
-              }]
-            }
-          },
-          rowBackgroundColors: {
-            description: 'Specify a list of colors, in hexadecimal code, for the background color of each column of the table. For example, ["#2C333B", "32373D"].',
-            type: 'array',
-            items: {
-              type: 'string',
-              pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN
-            }
-          },
-          rowColors: {
-            description: 'Specify a list of colors, in hexadecimal code, for the text color of the cells of a column. For example, ["#2C333B", "32373D"].',
-            type: 'array',
-            items: {
-              type: 'string',
-              pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN
-            }
-          },
-          sparklineAreaColors: {
-            description: 'Specify a list of colors, in hexadecimal code, for the sparkline area of each column. For example, ["#2C333B", "32373D"].',
-            type: 'array',
-            items: {
-              type: 'string',
-              pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN
-            }
-          },
-          sparklineColors: {
-            description: 'Specify a list of colors, in hexadecimal code, for the sparkline stroke of each column. For example, ["#2C333B", "32373D"].',
-            type: 'array',
-            items: {
-              type: 'string',
-              pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN
-            }
-          },
-          sparklineTypes: {
-            description: 'Choose either area or line formatting for the Sparkline. Valid sparkline types include "line" and "area".',
-            type: 'array',
-            items: {
-              type: 'string',
-              enum: consts_1.validSparklineTypes.concat()
-            }
-          },
-          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.',
-            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.',
-            type: 'number',
-            minimum: 30
-          }
-        }
-      }
-    }
-  },
-  count: {
-    description: 'Specify the maximum number of rows to display.',
-    type: 'number',
-    default: 10
-  },
-  font: {
-    default: 'proportional',
-    description: 'Specify the font style to use for table content.',
-    type: 'string',
-    pattern: schemaUtils_1.getPattern(['proportional', 'monospace'])
-  },
-  fontSize: {
-    default: 'default',
-    description: 'Specify the font size to use for table content. Font sizes range from extra small (10px) to large (16px) with the default being 14px.',
-    type: 'string',
-    pattern: schemaUtils_1.getPattern(consts_1.validFontSizes)
-  },
-  headers: {
-    default: '> table | getField()',
-    description: "Specify an array of headers to display on the table. Though these can be statically listed, it's best to use the dynamic default, as it will return the fields of your search.",
-    type: 'array',
-    items: {
-      type: 'string'
-    }
-  },
-  headerVisibility: {
-    default: 'inline',
-    description: 'Specify how to display the table header row.',
-    pattern: schemaUtils_1.getPattern(consts_1.validHeaderVisibilities),
-    enum: consts_1.validHeaderVisibilities.concat(),
-    type: 'string'
-  },
-  paginateDataSourceKey: {
-    default: 'primary',
-    description: 'Specify the data source key for pagination and sorting.',
-    type: 'string'
-  },
-  showInternalFields: {
-    default: true,
-    description: 'Specify whether to show internal fields that start with an underscore. The _time field will still be shown if false.',
-    type: 'boolean'
-  },
-  showRowNumbers: {
-    default: false,
-    description: 'Show row numbers in the first column.',
-    type: 'boolean'
-  },
-  table: {
-    default: '> primary',
-    description: 'Two dimensional array of data to be displayed in the table.',
-    type: 'array',
-    items: {
-      type: 'array',
-      items: {
-        oneOf: [{
-          type: 'string'
-        }, {
-          type: 'number'
-        }, {
-          type: 'array',
-          items: {
-            type: ['string', 'number']
-          }
-        }]
-      }
-    }
-  },
-  tableFormat: {
-    description: 'Allows users to set table wide options.',
-    type: 'object',
-    properties: {
-      align: {
-        default: '> table | type() | matchValue(tableAlignByType)',
-        description: 'Specify alignment for each cell in the table. Valid alignments include "left", "center", and "right".',
-        type: 'array',
-        items: {
-          type: 'array',
-          items: {
-            type: 'string',
-            enum: consts_1.validAlignments.concat()
-          }
-        }
-      },
-      cellTypes: {
-        default: '> table | type() | matchValue(tableCellTypeByType)',
-        description: 'Specify how to render data in cells. Valid cell renders include "TextCell", "ArrayCell", "SparklineCell".',
-        type: 'array',
-        items: {
-          type: 'array',
-          items: {
-            type: 'string',
-            enum: consts_1.validCellRenderers.concat()
-          }
-        }
-      },
-      data: {
-        description: 'Two dimensional data to be displayed in the table. This is usually formatted data instead of raw data from search.',
-        type: 'array',
-        items: {
-          type: 'array',
-          items: {
-            oneOf: [{
-              type: 'string'
-            }, {
-              type: 'number'
-            }, {
-              type: 'array',
-              items: {
-                type: ['string', 'number']
-              }
-            }]
-          }
-        }
-      },
-      headerBackgroundColor: {
-        default: '> themes.defaultHeaderBackgroundColor',
-        description: 'Specify the table header background color using a hexadecimal code. For example, "#FFFFFF".',
-        pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN,
-        type: 'string'
-      },
-      headerColor: {
-        description: 'Specify the table header text color using a hexadecimal code. For example, "#FFFFFF".',
-        pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN,
-        type: 'string'
-      },
-      rowBackgroundColors: {
-        default: '> table | seriesByIndex(0) | pick(tableAltRowBackgroundColorsByTheme)',
-        description: 'Specify a list of colors, in hexadecimal code, for the background color of each row of the table. For example, ["#2C333B", "32373D"].',
-        type: 'array',
-        items: {
-          type: 'array',
-          items: {
-            type: 'string',
-            pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN
-          }
-        }
-      },
-      rowColors: {
-        description: 'Specify a list of colors, in hexadecimal code, for the text color of each row of the table. For example, ["#2C333B", "32373D"].',
-        type: 'array',
-        items: {
-          type: 'array',
-          items: {
-            type: 'string',
-            pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA
-          }
-        }
-      },
-      sparklineAreaColors: {
-        description: 'Specify a list of colors, in hexadecimal code, for the sparkline area of each row of the table. For example, ["#2C333B", "32373D"].',
-        type: 'array',
-        items: {
-          type: 'array',
-          items: {
-            type: 'string',
-            pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN
-          }
-        }
-      },
-      sparklineColors: {
-        description: 'Specify a list of colors, in hexadecimal code, for the sparkline stroke of each row of the table. For example, ["#2C333B", "32373D"].',
-        type: 'array',
-        items: {
-          type: 'array',
-          items: {
-            type: 'string',
-            pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN
-          }
-        }
-      },
-      sparklineTypes: {
-        description: 'Choose either area or line formatting for the Sparkline.',
-        type: 'array',
-        items: {
-          type: 'array',
-          items: {
-            type: 'string',
-            enum: consts_1.validSparklineTypes.concat()
-          }
-        }
-      }
-    }
-  }
-};
-var themes = {
-  defaultBackgroundColor: function defaultBackgroundColor(props) {
-    return pick_1.default({
-      enterprise: {
-        dark: variables_1.default.black(props),
-        light: variables_1.default.backgroundColor(props)
-      },
-      prisma: variables_1.default.backgroundColorSidebar(props)
-    })(props);
-  },
-  defaultHeaderBackgroundColor: function defaultHeaderBackgroundColor(props) {
-    return pick_1.default({
-      enterprise: {
-        dark: variables_1.default.gray20(props),
-        light: variables_1.default.gray92(props)
-      },
-      prisma: variables_1.default.backgroundColor(props)
-    })(props);
-  },
-  rowBackgroundColorEven: function rowBackgroundColorEven(props) {
-    return pick_1.default({
-      enterprise: {
-        dark: variables_1.default.black(props),
-        light: variables_1.default.gray96(props)
-      },
-      prisma: variables_1.default.backgroundColorPage(props)
-    })(props);
-  },
-  rowBackgroundColorOdd: function rowBackgroundColorOdd(props) {
-    return pick_1.default({
-      enterprise: {
-        dark: '#0D1012',
-        light: variables_1.default.backgroundColor(props)
-      },
-      prisma: variables_1.default.backgroundColorSidebar(props)
-    })(props);
-  },
-  textColor: function textColor(props) {
-    return pick_1.default({
-      enterprise: variables_1.default.textColor(props),
-      prisma: variables_1.default.contentColorDefault(props)
-    })(props);
-  },
-  inverseTextColor: function inverseTextColor(props) {
-    return pick_1.default({
-      enterprise: {
-        dark: variables_1.default.contentColorInverted(props),
-        light: variables_1.default.white(props) // equal to textColor in enterpriseDark
-
-      },
-      prisma: variables_1.default.contentColorInverted(props)
-    })(props);
-  }
-};
-var backgroundColorPaletteSet = new Set([].concat(_toConsumableArray(colorConstants_1.COLOR_EDITOR_PALETTE), _toConsumableArray(lodash_1.map(themes, function (t) {
-  return lodash_1.get(t, 'defaultBackgroundColor');
-}))));
-var EDITOR_LABEL_WIDTH = 100;
-var editorConfig = [{
-  label: i18n_1._('Global Formatting'),
-  layout: [[{
-    label: i18n_1._('Rows Displayed'),
-    option: 'count',
-    editor: 'editor.number',
-    editorProps: {
-      labelPosition: 'left',
-      min: 0,
-      labelWidth: EDITOR_LABEL_WIDTH
-    }
-  }], [{
-    label: i18n_1._('Row Numbers'),
-    option: 'showRowNumbers',
-    editor: 'editor.toggle',
-    editorProps: {
-      labelPosition: 'left',
-      labelWidth: EDITOR_LABEL_WIDTH
-    }
-  }], [{
-    label: i18n_1._('Internal Fields'),
-    option: 'showInternalFields',
-    editor: 'editor.toggle',
-    editorProps: {
-      labelPosition: 'left',
-      labelWidth: EDITOR_LABEL_WIDTH
-    }
-  }], [{
-    label: i18n_1._('Header Row'),
-    option: 'headerVisibility',
-    editor: 'editor.radioBar',
-    editorProps: {
-      values: [{
-        label: i18n_1._('Inline'),
-        value: 'inline'
-      }, {
-        label: i18n_1._('Fixed'),
-        value: 'fixed'
-      }, {
-        label: i18n_1._('Hidden'),
-        value: 'none'
-      }],
-      labelPosition: 'left',
-      labelWidth: EDITOR_LABEL_WIDTH
-    }
-  }], [{
-    key: 'backgroundColor',
-    editor: 'editor.tableBackgroundColor',
-    editorProps: {
-      themes: themes,
-      labelPosition: 'left',
-      labelWidth: EDITOR_LABEL_WIDTH,
-      palette: _toConsumableArray(backgroundColorPaletteSet)
-    }
-  }], [{
-    option: 'font',
-    label: i18n_1._('Font'),
-    editor: 'editor.select',
-    editorProps: {
-      values: [{
-        label: i18n_1._('Proportional (Default)'),
-        value: 'proportional'
-      }, {
-        label: i18n_1._('Monospace'),
-        value: 'monospace'
-      }],
-      labelPosition: 'top',
-      labelWidth: EDITOR_LABEL_WIDTH
-    }
-  }], [{
-    option: 'fontSize',
-    label: i18n_1._('Font Size'),
-    editor: 'editor.select',
-    editorProps: {
-      values: [{
-        label: i18n_1._('Extra Small (font 10px, row 24px)'),
-        value: 'extraSmall'
-      }, {
-        label: i18n_1._('Small (font 12px, row 24px)'),
-        value: 'small'
-      }, {
-        label: i18n_1._('Default (font 14px, row 32px)'),
-        value: 'default'
-      }, {
-        label: i18n_1._('Large (font 16px, row 36px)'),
-        value: 'large'
-      }],
-      labelPosition: 'top',
-      labelWidth: EDITOR_LABEL_WIDTH
-    }
-  }]]
-}, {
-  label: i18n_1._('Column Formatting'),
-  layout: [[{
-    label: i18n_1._(''),
-    editor: 'editor.tableColumnFormatter',
-    editorProps: {
-      // Table column coloring does not adhere to same DSL structure as other dynamically colored options
-      // we use the FormatterEditor directly and not the DynamicColorEditor's provided DSL builders
-      columnColoringConfig: {
-        coloringTypes: [{
-          label: i18n_1._('Text'),
-          value: 'rowColors'
-        }, {
-          label: i18n_1._('Background'),
-          value: 'rowBackgroundColors'
-        }],
-        formatters: [{
-          label: i18n_1._('Ranges'),
-          value: 'rangeValue',
-          defaults: {
-            rowBackgroundColors: sequentialColorConfig,
-            rowColors: sequentialColorConfig
-          }
-        }, {
-          label: i18n_1._('Matches'),
-          value: 'matchValue',
-          defaults: {
-            rowBackgroundColors: matchColorConfig,
-            rowColors: matchColorConfig
-          }
-        }],
-        themes: themes
-      },
-      defaultOptionsByType: {
-        number: {
-          thousandSeparated: false,
-          unitPosition: 'after'
-        },
-        string: {
-          unitPosition: 'after'
-        }
-      },
-      flyoutConfig: {
-        number: [[Object.assign({}, unitPositionConfig), Object.assign({}, unitLabelConfig)], [{
-          label: i18n_1._('Precision'),
-          option: 'precision',
-          editor: 'editor.select',
-          editorProps: {
-            values: configUtils_1.generatePrecisionValues(20)
-          }
-        }, {
-          label: i18n_1._('Thousand Separators'),
-          option: 'thousandSeparated',
-          editor: 'editor.radioBar',
-          editorProps: {
-            values: [{
-              label: i18n_1._('Off'),
-              value: false
-            }, {
-              label: i18n_1._('On'),
-              value: true
-            }]
-          }
-        }]],
-        // TODO(fkurniawan): fill in with proper editor components
-        sparkline: [],
-        string: [[Object.assign({}, unitPositionConfig), Object.assign({}, unitLabelConfig)]],
-        time: [[Object.assign({}, timeFormattingConfig)]]
-      },
-      value: function value(_ref) {
-        var context = _ref.context,
-            options = _ref.options;
-        return {
-          context: context,
-          columnFormat: options.columnFormat,
-          tableFormat: options.tableFormat
-        };
-      }
-    },
-    key: 'TableColumnFormatterEditor'
-  }]]
-}];
-/**
- * visualization configuration
- */
+PureTable.displayName = 'VizTable';
+exports.default = withEmptyTableMessage(FixedSizeContainer_1.default(PureTable));
 
-var config = {
-  /**
-   * unique viz key
-   */
-  key: 'splunk.table',
+/***/ }),
 
-  /**
-   * viz name
-   */
-  name: 'Table',
-  category: VizCategory_1.VizCategory.TABLE,
+/***/ 15:
+/***/ (function(module, exports) {
 
-  /**
-   * viz icon
-   */
-  icon: visualization_icons_1.Table,
-  placeholderIcon: placeholders_1.Table,
-  dataContract: dataContract,
-  size: size,
-  defaultContext: defaultContext,
-  optionsSchema: optionsSchema,
-  editorConfig: editorConfig,
-  events: {
-    'cell.click': {
-      description: 'triggered when user clicks a table cell'
-    }
-  },
-  supports: [VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS, VizBehavior_1.VizBehavior.EVENTS, VizBehavior_1.VizBehavior.PAGE_AND_SORT, VizBehavior_1.VizBehavior.PLACEHOLDER],
-  themes: themes
-};
-exports.default = configUtils_1.enhanceConfig(config);
+module.exports = require("@splunk/visualizations-shared/style");
 
 /***/ }),
 
-/***/ 265:
-/***/ (function(module, exports, __webpack_require__) {
+/***/ 16:
+/***/ (function(module, exports) {
 
-"use strict";
+module.exports = require("@splunk/visualizations-shared/schemaUtils");
 
+/***/ }),
 
-var _slicedToArray = __webpack_require__(51);
+/***/ 17:
+/***/ (function(module, exports) {
 
-var _defineProperty = __webpack_require__(7);
+module.exports = require("@babel/runtime/helpers/createClass");
 
-var _taggedTemplateLiteral = __webpack_require__(77);
+/***/ }),
 
-var _templateObject, _templateObject2;
+/***/ 18:
+/***/ (function(module, exports) {
 
-var __rest = this && this.__rest || function (s, e) {
-  var t = {};
+module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
 
-  for (var p in s) {
-    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  }
+/***/ }),
 
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
+/***/ 2:
+/***/ (function(module, exports) {
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+module.exports = require("lodash");
 
-var React = __webpack_require__(1);
+/***/ }),
 
-var T = __webpack_require__(0);
+/***/ 20:
+/***/ (function(module, exports) {
 
-var lodash_1 = __webpack_require__(2);
+module.exports = require("@splunk/themes/pick");
 
-var styled_components_1 = __webpack_require__(4);
+/***/ }),
 
-var i18n_1 = __webpack_require__(3);
+/***/ 21:
+/***/ (function(module, exports) {
 
-var Table_1 = __webpack_require__(85);
+module.exports = require("@splunk/visualization-context/TimezoneContext");
 
-var Paginator_1 = __webpack_require__(266);
+/***/ }),
 
-var Message_1 = __webpack_require__(267);
+/***/ 24:
+/***/ (function(module, exports, __webpack_require__) {
 
-var colorUtils_1 = __webpack_require__(12);
+"use strict";
 
-var style_1 = __webpack_require__(14);
 
-var pick_1 = __webpack_require__(22);
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pickFieldFromJSONSchema = void 0;
 
-var variables_1 = __webpack_require__(11);
+var lodash_1 = __webpack_require__(2);
 
-var hooks_1 = __webpack_require__(268);
+var pickFieldFromJSONSchema = function pickFieldFromJSONSchema(optionsSchema) {
+  var fieldName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'default';
+  return Object.keys(optionsSchema).reduce(function (accum, k) {
+    if (lodash_1.has(optionsSchema[k], fieldName)) {
+      accum[k] = optionsSchema[k][fieldName];
+    } else if (lodash_1.get(optionsSchema, [k, 'type']) === 'object' && lodash_1.has(optionsSchema[k], 'properties')) {
+      var nestedSchema = exports.pickFieldFromJSONSchema(optionsSchema[k].properties, fieldName);
 
-var consts_1 = __webpack_require__(110);
+      if (!lodash_1.isEmpty(nestedSchema)) {
+        accum[k] = nestedSchema;
+      }
+    }
 
-var cells_1 = __webpack_require__(269);
+    return accum;
+  }, {});
+};
 
-var getPagination_1 = __webpack_require__(27);
+exports.pickFieldFromJSONSchema = pickFieldFromJSONSchema;
 
-var getSorting_1 = __webpack_require__(26);
+/***/ }),
 
-var FixedSizeContainer_1 = __webpack_require__(13);
+/***/ 25:
+/***/ (function(module, exports) {
 
-var utils_1 = __webpack_require__(274); // debounce was imported this way due to typing
-// eslint-disable-next-line import/order
+module.exports = require("@babel/runtime/helpers/typeof");
 
+/***/ }),
 
-var debounce = __webpack_require__(275);
+/***/ 26:
+/***/ (function(module, exports, __webpack_require__) {
 
-var MINIMUM_COLUMN_SIZE = 30;
-var NonVisibleTableHead = styled_components_1.default(Table_1.default.Head).withConfig({
-  displayName: "PureTable__NonVisibleTableHead",
-  componentId: "tovzjg-0"
-})(["display:none;"]);
-var FixedTableHead = styled_components_1.default(Table_1.default.Head).withConfig({
-  displayName: "PureTable__FixedTableHead",
-  componentId: "tovzjg-1"
-})(["position:sticky;top:0;"]);
-var VizTableContainer = styled_components_1.default.div.withConfig({
-  displayName: "PureTable__VizTableContainer",
-  componentId: "tovzjg-2"
-})(["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
-}), function (props) {
-  return colorUtils_1.isColor(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
-});
-VizTableContainer.displayName = 'VizTableContainer';
-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) {
-  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;
-  var padding = pick_1.default({
-    enterprise: variables_1.default.spacingHalf({
-      theme: theme
-    }),
-    prisma: variables_1.default.spacingSmall({
-      theme: theme
-    })
-  })({
-    theme: theme
-  });
-  var paddingOffset = parseInt(padding, 10) * 2;
-  return style_1.toDimension({
-    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);
-}, 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);
-}, function (_ref5) {
-  var widthSet = _ref5.widthSet;
-  return widthSet ? 'fixed' : 'auto';
-}, function (_ref6) {
-  var widthSet = _ref6.widthSet;
-  return widthSet ? '0' : '100%';
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-SUITableContainer.displayName = 'SUITableContainer';
-var PaginatorContainer = styled_components_1.default.div.withConfig({
-  displayName: "PureTable__PaginatorContainer",
-  componentId: "tovzjg-4"
-})(["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
+exports.shouldShowIconPlaceholder = void 0;
 
-var withEmptyTableMessage = function withEmptyTableMessage(Viz) {
-  // TODO(fkurniawan): add omit type to differentiate WrapperProps from PureTableProps
-  var Wrapper = function Wrapper(props) {
-    var headers = props.headers,
-        table = props.table,
-        headerVisibility = props.headerVisibility,
-        showRowNumbers = props.showRowNumbers,
-        showInternalFields = props.showInternalFields,
-        tableFormat = props.tableFormat,
-        columnFormat = props.columnFormat;
+var React = __webpack_require__(1);
 
-    var _hooks_1$useTable = hooks_1.useTable({
-      headers: headers,
-      table: table,
-      headerVisibility: headerVisibility,
-      showRowNumbers: showRowNumbers,
-      showInternalFields: showInternalFields,
-      tableFormat: Object.assign(Object.assign(Object.assign(Object.assign({}, tableFormat), (tableFormat === null || tableFormat === void 0 ? void 0 : tableFormat.align) && {
-        align: lodash_1.cloneDeep(tableFormat.align)
-      }), (tableFormat === null || tableFormat === void 0 ? void 0 : tableFormat.cellTypes) && {
-        cellTypes: lodash_1.cloneDeep(tableFormat.cellTypes)
-      }), (tableFormat === null || tableFormat === void 0 ? void 0 : tableFormat.data) && {
-        data: lodash_1.cloneDeep(tableFormat.data)
-      }),
-      columnFormat: columnFormat
-    }),
-        tableHeader = _hooks_1$useTable.tableHeader,
-        tableBody = _hooks_1$useTable.tableBody;
+var T = __webpack_require__(0);
 
-    if (tableBody.rows.length === 0) {
-      return React.createElement(Message_1.default, {
-        type: "warning"
-      }, i18n_1._('No data!'));
-    }
+var lodash_1 = __webpack_require__(2);
 
-    return React.createElement(Viz, Object.assign({}, props, {
-      tableHeader: tableHeader,
-      tableBody: tableBody
-    }));
-  };
+var i18n_1 = __webpack_require__(3);
+
+var Message_1 = __webpack_require__(11);
+
+var FixedSizeContainer_1 = __webpack_require__(14);
+/**
+ * @method shouldShowIconPlaceholder
+ * @param {object} dataSources
+ * @param {boolean} loading
+ * @returns {boolean}
+ */
+
+
+var shouldShowIconPlaceholder = function shouldShowIconPlaceholder(dataSources) {
+  var loading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var data = lodash_1.get(dataSources, 'primary.data.columns[0]', undefined);
+  var noData = data === undefined;
+  var fields = lodash_1.get(dataSources, 'primary.data.fields[0]', undefined);
+  var noFields = fields === undefined;
+  return loading || noData || noFields;
+};
 
-  Wrapper.displayName = 'PureTableWrapper';
-  return Wrapper;
+exports.shouldShowIconPlaceholder = shouldShowIconPlaceholder;
+var propTypes = {
+  icon: T.func,
+  width: T.oneOfType([T.string, T.number]),
+  height: T.oneOfType([T.string, T.number]),
+  // eslint-disable-next-line react/no-unused-prop-types
+  backgroundColor: T.string,
+  iconColor: T.string
 };
+/**
+ * @method IconPlaceholder
+ * @param {IconPlaceholderProps} props
+ * @returns {React.ReactElement}
+ */
 
-var useTableHead = function useTableHead(visibility) {
-  if (visibility === 'none') {
-    return NonVisibleTableHead;
-  }
+var IconPlaceholder = function IconPlaceholder(props) {
+  var width = props.width,
+      height = props.height,
+      icon = props.icon,
+      iconColor = props.iconColor;
 
-  if (visibility === 'fixed') {
-    return FixedTableHead;
+  if (icon) {
+    return React.createElement(icon, {
+      style: {
+        left: '50%',
+        top: '50%',
+        color: iconColor,
+        opacity: 0.15,
+        position: 'absolute',
+        transform: 'translate(-50%, -50%)'
+      },
+      width: '50%',
+      height: '50%'
+    });
   }
 
-  return Table_1.default.Head;
+  return React.createElement(Message_1.default, {
+    width: width,
+    height: height,
+    level: "warning",
+    message: i18n_1._('No DataSource Connected')
+  });
 };
 
-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"]);
+IconPlaceholder.propTypes = propTypes;
+IconPlaceholder.defaultProps = {
+  width: '100%',
+  height: 250
+};
+exports.default = FixedSizeContainer_1.default(IconPlaceholder);
 
-  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);
-      });
+/***/ }),
+
+/***/ 266:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  Object.defineProperty(o, k2, {
+    enumerable: true,
+    get: function get() {
+      return m[k];
     }
   });
-  return React.createElement(Table_1.default.HeadCell, Object.assign({
-    elementRef: cellRef
-  }, props), value);
-};
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
 
-var fontMap = {
-  proportional: 'Splunk Platform Sans',
-  monospace: 'Splunk Platform Mono'
-};
-var fontSizeMap = {
-  extraSmall: '10px',
-  small: '12px',
-  default: '14px',
-  large: '16px'
-};
-var rowHeightMap = {
-  extraSmall: '12px',
-  small: '12px',
-  default: '20px',
-  large: '24px'
+var __exportStar = this && this.__exportStar || function (m, exports) {
+  for (var p in m) {
+    if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+  }
 };
 
-var PureTable = function PureTable(props) {
-  var count = props.count,
-      width = props.width,
-      height = props.height,
-      backgroundColor = props.backgroundColor,
-      tableHeader = props.tableHeader,
-      tableBody = props.tableBody,
-      showRowNumbers = props.showRowNumbers,
-      _props$sortParams = props.sortParams,
-      currentSortKey = _props$sortParams.currentSortKey,
-      currentSortDir = _props$sortParams.currentSortDir,
-      onSort = _props$sortParams.onSort,
-      _a = props.paginatorParams,
-      isPaging = _a.isPaging,
-      paginatorOnChange = _a.onChange,
-      paginatorProps = __rest(_a, ["isPaging", "onChange"]),
-      onCellClick = props.onCellClick,
-      onColumnFormatChange = props.onColumnFormatChange,
-      columnFormat = props.columnFormat,
-      mode = props.mode,
-      headerVisibility = props.headerVisibility,
-      font = props.font,
-      fontSize = props.fontSize;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0; // NOTE: wildcard syntax only works for named exports
+// for some reason, omitting the default export worked before TS v4
+// see: https://stackoverflow.com/a/34445175
 
-  var _React$useState = React.useState(columnFormat),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      columns = _React$useState2[0],
-      setColumns = _React$useState2[1];
+__exportStar(__webpack_require__(139), exports);
 
-  var _React$useState3 = React.useState(columnFormat),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      tempColumns = _React$useState4[0],
-      setTempColumns = _React$useState4[1];
+var Table_1 = __webpack_require__(139);
 
-  var _React$useState5 = React.useState(0),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      remainingWidth = _React$useState6[0],
-      setRemainingWidth = _React$useState6[1];
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return Table_1.default;
+  }
+});
 
-  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;
-    }
+/***/ 267:
+/***/ (function(module, exports, __webpack_require__) {
 
-    return acc + 1;
-  }, 0);
-  var containerRef = 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;
+"use strict";
 
-    var _a, _b;
 
-    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 _toConsumableArray = __webpack_require__(9);
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var i18n_1 = __webpack_require__(3);
+
+var lodash_1 = __webpack_require__(2);
+
+var schemaUtils_1 = __webpack_require__(16);
+
+var colorConstants_1 = __webpack_require__(43);
+
+var visualization_icons_1 = __webpack_require__(46);
+
+var placeholders_1 = __webpack_require__(45);
+
+var variables_1 = __webpack_require__(10);
+
+var pick_1 = __webpack_require__(20);
+
+var configUtils_1 = __webpack_require__(6);
+
+var VizBehavior_1 = __webpack_require__(5);
+
+var consts_1 = __webpack_require__(112);
+
+var VizCategory_1 = __webpack_require__(29);
+
+var dataContract = {
+  requiredDataSources: [{
+    name: 'primary',
+    description: 'DataSource that powers the visualization'
+  }],
+  optionalDataSources: [],
+  initialRequestParams: {
+    primary: function primary() {
+      var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      return {
+        offset: 0,
+        count: options.count ? options.count : 10,
+        requestTotalCount: true
+      };
     }
-  });
-  var firstRenderCount = React.useRef(count);
-  React.useEffect(function () {
-    if (firstRenderCount.current !== count) {
-      firstRenderCount.current = count;
-      paginatorOnChange(null, {
-        count: count
-      });
+  }
+};
+var size = {
+  initialWidth: 300,
+  initialHeight: 300
+};
+var defaultContext = {
+  tableAlignByType: [{
+    match: 'string',
+    value: 'left'
+  }, {
+    match: 'number',
+    value: 'right'
+  }, {
+    match: 'time',
+    value: 'left'
+  }, {
+    match: 'color',
+    value: 'left'
+  }, {
+    match: 'array',
+    value: 'left'
+  }, {
+    match: 'sparkline',
+    value: 'center'
+  }, {
+    match: 'unknown',
+    value: 'left'
+  }],
+  tableCellTypeByType: [{
+    match: 'string',
+    value: 'TextCell'
+  }, {
+    match: 'number',
+    value: 'TextCell'
+  }, {
+    match: 'time',
+    value: 'TextCell'
+  }, {
+    match: 'color',
+    value: 'TextCell'
+  }, {
+    match: 'array',
+    value: 'ArrayCell'
+  }, {
+    match: 'sparkline',
+    value: 'SparklineCell'
+  }, {
+    match: 'unknown',
+    value: 'TextCell'
+  }],
+  // NOTE: These contexts are used by the table background color editor.
+  // Please be careful removing/renaming/altering them.
+  // There are unit tests and visual test that will capture breakages.
+  tableRowColorMaxContrast: {
+    colors: ['> themes.textColor', '> themes.inverseTextColor'],
+    default: '> themes.textColor'
+  },
+  tableRowBackgroundColorEvenConfig: {
+    channel: 'hsv.v',
+    value: '*0.96'
+  },
+  tableHeaderBackgroundColorConfig: {
+    channel: 'hsv.v',
+    value: '*0.9'
+  },
+  tableRowBackgroundColorsByTheme: ['> themes.rowBackgroundColorOdd'],
+  tableAltRowBackgroundColorsByTheme: ['> themes.rowBackgroundColorOdd', '> themes.rowBackgroundColorEven'],
+  tableRowBackgroundColorsByBackgroundColor: ['> backgroundColor'],
+  tableAltRowBackgroundColorsByBackgroundColor: ['> backgroundColor', '> backgroundColor | setColorChannel(tableRowBackgroundColorEvenConfig)']
+};
+var unitPositionConfig = {
+  label: i18n_1._('Units Position'),
+  editor: 'editor.select',
+  option: 'unitPosition',
+  editorProps: {
+    values: [{
+      label: i18n_1._('Before'),
+      value: 'before'
+    }, {
+      label: i18n_1._('After'),
+      value: 'after'
+    }]
+  }
+};
+var unitLabelConfig = {
+  label: i18n_1._('Unit Label'),
+  option: 'unit',
+  editor: 'editor.text'
+};
+var timeFormattingConfig = {
+  label: i18n_1._('Date & Time Formatting'),
+  option: 'format',
+  editor: 'editor.text',
+  editorProps: {
+    tooltip: i18n_1._('For example: DD-MM-YYYY')
+  }
+};
+var sequentialColorConfig = [{
+  to: 20,
+  value: '#D41F1F'
+}, {
+  from: 20,
+  to: 40,
+  value: '#D94E17'
+}, {
+  from: 40,
+  to: 60,
+  value: '#CBA700'
+}, {
+  from: 60,
+  to: 80,
+  value: '#669922'
+}, {
+  from: 80,
+  value: '#118832'
+}];
+var matchColorConfig = [{
+  match: '',
+  value: '#5C33FF'
+}];
+var optionsSchema = {
+  backgroundColor: {
+    default: '> themes.defaultBackgroundColor',
+    description: 'Specify the color for the background. You might use a data source to apply the color. The default for enterprise light is "#FFFFFF". The default for enterprise dark is "#000000". The default for prisma dark is "#0B0C0E".',
+    pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN,
+    type: 'string'
+  },
+  columnFormat: {
+    description: 'Allows column formatting for individual columns.',
+    type: 'object',
+    patternProperties: {
+      '.*': {
+        description: 'Customization for column property',
+        type: 'object',
+        properties: {
+          align: {
+            description: 'Specify the alignment for each cell in a column. Valid alignments include "left", "center", and "right".',
+            type: 'array',
+            items: {
+              type: 'string',
+              enum: consts_1.validAlignments.concat()
+            }
+          },
+          cellTypes: {
+            description: 'Specify how to render data in cells. Valid cell renders include "TextCell", "ArrayCell", "SparklineCell".',
+            type: 'array',
+            items: {
+              type: 'string',
+              enum: consts_1.validCellRenderers.concat()
+            }
+          },
+          data: {
+            description: 'Specify data points to be displayed in the cells of a column.',
+            type: 'array',
+            items: {
+              oneOf: [{
+                type: 'string'
+              }, {
+                type: 'number'
+              }, {
+                type: 'array',
+                items: {
+                  type: ['string', 'number']
+                }
+              }]
+            }
+          },
+          rowBackgroundColors: {
+            description: 'Specify a list of colors, in hexadecimal code, for the background color of each column of the table. For example, ["#2C333B", "32373D"].',
+            type: 'array',
+            items: {
+              type: 'string',
+              pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN
+            }
+          },
+          rowColors: {
+            description: 'Specify a list of colors, in hexadecimal code, for the text color of the cells of a column. For example, ["#2C333B", "32373D"].',
+            type: 'array',
+            items: {
+              type: 'string',
+              pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN
+            }
+          },
+          sparklineAreaColors: {
+            description: 'Specify a list of colors, in hexadecimal code, for the sparkline area of each column. For example, ["#2C333B", "32373D"].',
+            type: 'array',
+            items: {
+              type: 'string',
+              pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN
+            }
+          },
+          sparklineColors: {
+            description: 'Specify a list of colors, in hexadecimal code, for the sparkline stroke of each column. For example, ["#2C333B", "32373D"].',
+            type: 'array',
+            items: {
+              type: 'string',
+              pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN
+            }
+          },
+          sparklineTypes: {
+            description: 'Choose either area or line formatting for the Sparkline. Valid sparkline types include "line" and "area".',
+            type: 'array',
+            items: {
+              type: 'string',
+              enum: consts_1.validSparklineTypes.concat()
+            }
+          },
+          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.',
+            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.',
+            type: 'number',
+            minimum: 30
+          }
+        }
+      }
     }
-  }, [count, paginatorProps]);
-  var stringifiedColumnFormat = JSON.stringify(columnFormat);
-  var columnFormatRef = React.useRef(stringifiedColumnFormat);
-  var modeRef = React.useRef(mode);
-  React.useEffect(function () {
-    if (modeRef.current !== mode || columnFormatRef.current !== stringifiedColumnFormat) {
-      columnFormatRef.current = stringifiedColumnFormat;
-      modeRef.current = mode;
-      setColumns(columnFormat);
+  },
+  count: {
+    description: 'Specify the maximum number of rows to display.',
+    type: 'number',
+    default: 10
+  },
+  font: {
+    default: 'proportional',
+    description: 'Specify the font style to use for table content.',
+    type: 'string',
+    pattern: schemaUtils_1.getPattern(['proportional', 'monospace'])
+  },
+  fontSize: {
+    default: 'default',
+    description: 'Specify the font size to use for table content. Font sizes range from extra small (10px) to large (16px) with the default being 14px.',
+    type: 'string',
+    pattern: schemaUtils_1.getPattern(consts_1.validFontSizes)
+  },
+  headers: {
+    default: '> table | getField()',
+    description: "Specify an array of headers to display on the table. Though these can be statically listed, it's best to use the dynamic default, as it will return the fields of your search.",
+    type: 'array',
+    items: {
+      type: 'string'
     }
-  }, [mode, stringifiedColumnFormat]);
-  var TableHead = useTableHead(headerVisibility);
-  var debouncedDrilldown = debounce(function (e, payload) {
-    if (window.getSelection().toString() === '') {
-      if (lodash_1.isFunction(onCellClick)) {
-        onCellClick({
-          e: e,
-          payload: payload
-        });
+  },
+  headerVisibility: {
+    default: 'inline',
+    description: 'Specify how to display the table header row.',
+    pattern: schemaUtils_1.getPattern(consts_1.validHeaderVisibilities),
+    enum: consts_1.validHeaderVisibilities.concat(),
+    type: 'string'
+  },
+  paginateDataSourceKey: {
+    default: 'primary',
+    description: 'Specify the data source key for pagination and sorting.',
+    type: 'string'
+  },
+  showInternalFields: {
+    default: true,
+    description: 'Specify whether to show internal fields that start with an underscore. The _time field will still be shown if false.',
+    type: 'boolean'
+  },
+  showRowNumbers: {
+    default: false,
+    description: 'Show row numbers in the first column.',
+    type: 'boolean'
+  },
+  table: {
+    default: '> primary',
+    description: 'Two dimensional array of data to be displayed in the table.',
+    type: 'array',
+    items: {
+      type: 'array',
+      items: {
+        oneOf: [{
+          type: 'string'
+        }, {
+          type: 'number'
+        }, {
+          type: 'array',
+          items: {
+            type: ['string', 'number']
+          }
+        }]
       }
     }
-  }, 200);
-  var drilldownHandler = React.useCallback(function (e) {
-    var element = e.target;
-    var row = element.getAttribute('data-row-index');
-    var col = element.getAttribute('data-col-index');
-    var arrayIndex = element.getAttribute('data-array-index') || -1;
-
-    if (row && col) {
-      var cellRefIndex = +col;
-      var cellIndex = cellRefIndex;
-      var rowIndex = +row;
-      var fieldValue = tableHeader.cells[cellRefIndex].value;
-      var cellValue = tableBody.rows[rowIndex].cells[cellRefIndex].value;
-      var cellRawValue = tableBody.rows[rowIndex].cells[cellRefIndex].value;
-      var value = arrayIndex === -1 ? cellValue : cellRawValue[+arrayIndex]; // Wish we did not have these if statements for
-      // showRowNumbers
-
-      if (showRowNumbers === true) {
-        if (cellIndex === 0) {
-          // no click event for row numbers
-          return;
+  },
+  tableFormat: {
+    description: 'Allows users to set table wide options.',
+    type: 'object',
+    properties: {
+      align: {
+        default: '> table | type() | matchValue(tableAlignByType)',
+        description: 'Specify alignment for each cell in the table. Valid alignments include "left", "center", and "right".',
+        type: 'array',
+        items: {
+          type: 'array',
+          items: {
+            type: 'string',
+            enum: consts_1.validAlignments.concat()
+          }
+        }
+      },
+      cellTypes: {
+        default: '> table | type() | matchValue(tableCellTypeByType)',
+        description: 'Specify how to render data in cells. Valid cell renders include "TextCell", "ArrayCell", "SparklineCell".',
+        type: 'array',
+        items: {
+          type: 'array',
+          items: {
+            type: 'string',
+            enum: consts_1.validCellRenderers.concat()
+          }
+        }
+      },
+      data: {
+        description: 'Two dimensional data to be displayed in the table. This is usually formatted data instead of raw data from search.',
+        type: 'array',
+        items: {
+          type: 'array',
+          items: {
+            oneOf: [{
+              type: 'string'
+            }, {
+              type: 'number'
+            }, {
+              type: 'array',
+              items: {
+                type: ['string', 'number']
+              }
+            }]
+          }
+        }
+      },
+      headerBackgroundColor: {
+        default: '> themes.defaultHeaderBackgroundColor',
+        description: 'Specify the table header background color using a hexadecimal code. For example, "#FFFFFF".',
+        pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN,
+        type: 'string'
+      },
+      headerColor: {
+        description: 'Specify the table header text color using a hexadecimal code. For example, "#FFFFFF".',
+        pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN,
+        type: 'string'
+      },
+      rowBackgroundColors: {
+        default: '> table | seriesByIndex(0) | pick(tableAltRowBackgroundColorsByTheme)',
+        description: 'Specify a list of colors, in hexadecimal code, for the background color of each row of the table. For example, ["#2C333B", "32373D"].',
+        type: 'array',
+        items: {
+          type: 'array',
+          items: {
+            type: 'string',
+            pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN
+          }
+        }
+      },
+      rowColors: {
+        description: 'Specify a list of colors, in hexadecimal code, for the text color of each row of the table. For example, ["#2C333B", "32373D"].',
+        type: 'array',
+        items: {
+          type: 'array',
+          items: {
+            type: 'string',
+            pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA
+          }
+        }
+      },
+      sparklineAreaColors: {
+        description: 'Specify a list of colors, in hexadecimal code, for the sparkline area of each row of the table. For example, ["#2C333B", "32373D"].',
+        type: 'array',
+        items: {
+          type: 'array',
+          items: {
+            type: 'string',
+            pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN
+          }
+        }
+      },
+      sparklineColors: {
+        description: 'Specify a list of colors, in hexadecimal code, for the sparkline stroke of each row of the table. For example, ["#2C333B", "32373D"].',
+        type: 'array',
+        items: {
+          type: 'array',
+          items: {
+            type: 'string',
+            pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN
+          }
+        }
+      },
+      sparklineTypes: {
+        description: 'Choose either area or line formatting for the Sparkline.',
+        type: 'array',
+        items: {
+          type: 'array',
+          items: {
+            type: 'string',
+            enum: consts_1.validSparklineTypes.concat()
+          }
         }
-
-        cellIndex -= 1;
       }
-
-      var payload = {
-        cellIndex: cellIndex,
-        rowIndex: rowIndex,
-        fieldValue: fieldValue,
-        cellValue: cellValue,
-        cellRawValue: cellRawValue,
-        value: value,
-        name: fieldValue
-      };
-      tableBody.rows[rowIndex].cells.forEach(function (c, index) {
-        var rowToken = "row.".concat(tableHeader.cells[index].value, ".value");
-        payload[rowToken] = c.value;
-      });
-      debouncedDrilldown(e.nativeEvent, payload);
-    }
-  }, [onCellClick, showRowNumbers, tableHeader, tableBody]);
-  var debouncedOnColumnFormatChange = React.useMemo(function () {
-    return debounce(function (newFormat) {
-      onColumnFormatChange(newFormat);
-    }, 300);
-  }, [onColumnFormatChange]);
-  var handleResizeColumn = React.useCallback(function (_event, payload) {
-    var updatedCF = lodash_1.cloneDeep(columns);
-    var field = payload.columnId;
-    updatedCF[field] = Object.assign(Object.assign({}, updatedCF[field]), {
-      width: Math.max(payload.width, MINIMUM_COLUMN_SIZE)
-    });
-    setColumns(updatedCF); // Updates column json in edit mode
-
-    if (mode === 'edit') {
-      debouncedOnColumnFormatChange(updatedCF);
     }
-  }, [mode, columns, debouncedOnColumnFormatChange]);
-
-  var handleEventClick = function handleEventClick(e) {
-    e.stopPropagation();
-  };
-
-  var recalculateTempColumnWidths = function recalculateTempColumnWidths() {
-    setTempColumns({});
-    setRemainingWidth(0);
-  };
-
-  var withColumnResizing = function withColumnResizing(func) {
-    return function (e, additionalParams) {
-      recalculateTempColumnWidths();
-      func(e, additionalParams);
-    };
-  };
-
-  var fontMapped = fontMap[font] || fontMap.proportional;
-  var fontSizeMapped = fontSizeMap[fontSize] || fontSizeMap.default;
-  var rowHeightMapped = rowHeightMap[fontSize] || rowHeightMap.default;
-  return React.createElement(VizTableContainer, {
-    backgroundColor: backgroundColor,
-    ref: containerRef
-  }, React.createElement(SUITableContainer, {
-    width: width,
-    height: height,
-    isPaging: isPaging,
-    headerStyle: tableHeader.style,
-    widthSet: widthSet,
-    font: fontMapped,
-    fontSize: fontSizeMapped,
-    lineHeight: rowHeightMapped
-  }, React.createElement(Table_1.default, {
-    headType: headerVisibility !== 'none' ? 'inline' : undefined,
-    innerStyle: {
-      height: '100%'
-    },
-    outerStyle: {
-      height: '100%',
-      cursor: onCellClick ? 'pointer' : 'unset'
-    },
-    onClick: onCellClick ? drilldownHandler : lodash_1.noop,
-    onRequestResizeColumn: handleResizeColumn
-  }, React.createElement(TableHead, null, tableHeader.cells.filter(function (c) {
-    return c.showCell;
-  }).map(function (_a) {
-    var key = _a.key,
-        value = _a.value,
-        sortKey = _a.sortKey,
-        rest = __rest(_a, ["key", "value", "sortKey"]);
+  }
+};
+var themes = {
+  defaultBackgroundColor: function defaultBackgroundColor(props) {
+    return pick_1.default({
+      enterprise: {
+        dark: variables_1.default.black(props),
+        light: variables_1.default.backgroundColor(props)
+      },
+      prisma: variables_1.default.backgroundColorSidebar(props)
+    })(props);
+  },
+  defaultHeaderBackgroundColor: function defaultHeaderBackgroundColor(props) {
+    return pick_1.default({
+      enterprise: {
+        dark: variables_1.default.gray20(props),
+        light: variables_1.default.gray92(props)
+      },
+      prisma: variables_1.default.backgroundColor(props)
+    })(props);
+  },
+  rowBackgroundColorEven: function rowBackgroundColorEven(props) {
+    return pick_1.default({
+      enterprise: {
+        dark: variables_1.default.black(props),
+        light: variables_1.default.gray96(props)
+      },
+      prisma: variables_1.default.backgroundColorPage(props)
+    })(props);
+  },
+  rowBackgroundColorOdd: function rowBackgroundColorOdd(props) {
+    return pick_1.default({
+      enterprise: {
+        dark: '#0D1012',
+        light: variables_1.default.backgroundColor(props)
+      },
+      prisma: variables_1.default.backgroundColorSidebar(props)
+    })(props);
+  },
+  textColor: function textColor(props) {
+    return pick_1.default({
+      enterprise: variables_1.default.textColor(props),
+      prisma: variables_1.default.contentColorDefault(props)
+    })(props);
+  },
+  inverseTextColor: function inverseTextColor(props) {
+    return pick_1.default({
+      enterprise: {
+        dark: variables_1.default.contentColorInverted(props),
+        light: variables_1.default.white(props) // equal to textColor in enterpriseDark
 
-    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
-      }),
-      onMouseDown: handleEventClick,
-      value: value,
-      setTempColumnWidth: setTempColumns,
-      widthSet: widthSet,
-      onSort: withColumnResizing(onSort),
-      headerVisibility: headerVisibility,
-      setRemainingWidth: setRemainingWidth
-    }, Object.assign({
-      sortKey: sortKey
-    }, rest)));
-  })), React.createElement(Table_1.default.Body, null, tableBody.rows.map(function (row) {
-    return React.createElement(Table_1.default.Row, {
-      key: row.key
-    }, row.cells.filter(function (c) {
-      return c.showCell;
-    }).map(function (cell) {
-      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
-        })
-      }), React.createElement(cells_1.SparklineCell, {
-        cell: cell,
-        useMouseOverEffect: !!onCellClick,
-        width: utils_1.getColumnWidth({
-          columns: columns,
-          tempColumns: tempColumns,
-          columnName: cell.header,
-          remainingWidth: remainingWidth,
-          numColumnsWithoutWidth: numColumnsWithoutWidth
-        })
-      }), React.createElement(cells_1.ArrayCell, {
-        cell: cell,
-        useMouseOverEffect: !!onCellClick,
-        width: utils_1.getColumnWidth({
-          columns: columns,
-          tempColumns: tempColumns,
-          columnName: cell.header,
-          remainingWidth: remainingWidth,
-          numColumnsWithoutWidth: numColumnsWithoutWidth
-        })
-      }));
-    }));
-  })))), isPaging ? React.createElement(PaginatorContainer, null, React.createElement(Paginator_1.default, Object.assign({
-    onChange: withColumnResizing(paginatorOnChange)
-  }, paginatorProps))) : null);
+      },
+      prisma: variables_1.default.contentColorInverted(props)
+    })(props);
+  }
 };
+var backgroundColorPaletteSet = new Set([].concat(_toConsumableArray(colorConstants_1.COLOR_EDITOR_PALETTE), _toConsumableArray(lodash_1.map(themes, function (t) {
+  return lodash_1.get(t, 'defaultBackgroundColor');
+}))));
+var EDITOR_LABEL_WIDTH = 100;
+var editorConfig = [{
+  label: i18n_1._('Global Formatting'),
+  layout: [[{
+    label: i18n_1._('Rows Displayed'),
+    option: 'count',
+    editor: 'editor.number',
+    editorProps: {
+      labelPosition: 'left',
+      min: 0,
+      labelWidth: EDITOR_LABEL_WIDTH
+    }
+  }], [{
+    label: i18n_1._('Row Numbers'),
+    option: 'showRowNumbers',
+    editor: 'editor.toggle',
+    editorProps: {
+      labelPosition: 'left',
+      labelWidth: EDITOR_LABEL_WIDTH
+    }
+  }], [{
+    label: i18n_1._('Internal Fields'),
+    option: 'showInternalFields',
+    editor: 'editor.toggle',
+    editorProps: {
+      labelPosition: 'left',
+      labelWidth: EDITOR_LABEL_WIDTH
+    }
+  }], [{
+    label: i18n_1._('Header Row'),
+    option: 'headerVisibility',
+    editor: 'editor.radioBar',
+    editorProps: {
+      values: [{
+        label: i18n_1._('Inline'),
+        value: 'inline'
+      }, {
+        label: i18n_1._('Fixed'),
+        value: 'fixed'
+      }, {
+        label: i18n_1._('Hidden'),
+        value: 'none'
+      }],
+      labelPosition: 'left',
+      labelWidth: EDITOR_LABEL_WIDTH
+    }
+  }], [{
+    key: 'backgroundColor',
+    editor: 'editor.tableBackgroundColor',
+    editorProps: {
+      themes: themes,
+      labelPosition: 'left',
+      labelWidth: EDITOR_LABEL_WIDTH,
+      palette: _toConsumableArray(backgroundColorPaletteSet)
+    }
+  }], [{
+    option: 'font',
+    label: i18n_1._('Font'),
+    editor: 'editor.select',
+    editorProps: {
+      values: [{
+        label: i18n_1._('Proportional (Default)'),
+        value: 'proportional'
+      }, {
+        label: i18n_1._('Monospace'),
+        value: 'monospace'
+      }],
+      labelPosition: 'top',
+      labelWidth: EDITOR_LABEL_WIDTH
+    }
+  }], [{
+    option: 'fontSize',
+    label: i18n_1._('Font Size'),
+    editor: 'editor.select',
+    editorProps: {
+      values: [{
+        label: i18n_1._('Extra Small (font 10px, row 24px)'),
+        value: 'extraSmall'
+      }, {
+        label: i18n_1._('Small (font 12px, row 24px)'),
+        value: 'small'
+      }, {
+        label: i18n_1._('Default (font 14px, row 32px)'),
+        value: 'default'
+      }, {
+        label: i18n_1._('Large (font 16px, row 36px)'),
+        value: 'large'
+      }],
+      labelPosition: 'top',
+      labelWidth: EDITOR_LABEL_WIDTH
+    }
+  }]]
+}, {
+  label: i18n_1._('Column Formatting'),
+  layout: [[{
+    label: i18n_1._('Column-specific formatting'),
+    editor: 'editor.tableColumnFormatter',
+    editorProps: {
+      // Table column coloring does not adhere to same DSL structure as other dynamically colored options
+      // we use the FormatterEditor directly and not the DynamicColorEditor's provided DSL builders
+      columnColoringConfig: {
+        coloringTypes: [{
+          label: i18n_1._('Text'),
+          value: 'rowColors'
+        }, {
+          label: i18n_1._('Background'),
+          value: 'rowBackgroundColors'
+        }],
+        formatters: [{
+          label: i18n_1._('Ranges'),
+          value: 'rangeValue',
+          defaults: {
+            rowBackgroundColors: sequentialColorConfig,
+            rowColors: sequentialColorConfig
+          }
+        }, {
+          label: i18n_1._('Matches'),
+          value: 'matchValue',
+          defaults: {
+            rowBackgroundColors: matchColorConfig,
+            rowColors: matchColorConfig
+          }
+        }],
+        themes: themes
+      },
+      defaultOptionsByType: {
+        number: {
+          thousandSeparated: false,
+          unitPosition: 'after'
+        },
+        string: {
+          unitPosition: 'after'
+        }
+      },
+      flyoutConfig: {
+        number: [[Object.assign({}, unitPositionConfig), Object.assign({}, unitLabelConfig)], [{
+          label: i18n_1._('Precision'),
+          option: 'precision',
+          editor: 'editor.select',
+          editorProps: {
+            values: configUtils_1.generatePrecisionValues(20)
+          }
+        }, {
+          label: i18n_1._('Thousand Separators'),
+          option: 'thousandSeparated',
+          editor: 'editor.radioBar',
+          editorProps: {
+            values: [{
+              label: i18n_1._('Off'),
+              value: false
+            }, {
+              label: i18n_1._('On'),
+              value: true
+            }]
+          }
+        }]],
+        // TODO(fkurniawan): fill in with proper editor components
+        sparkline: [],
+        string: [[Object.assign({}, unitPositionConfig), Object.assign({}, unitLabelConfig)]],
+        time: [[Object.assign({}, timeFormattingConfig)]]
+      },
+      value: function value(_ref) {
+        var context = _ref.context,
+            options = _ref.options;
+        return {
+          context: context,
+          columnFormat: options.columnFormat,
+          tableFormat: options.tableFormat
+        };
+      }
+    },
+    key: 'TableColumnFormatterEditor'
+  }]]
+}];
+/**
+ * visualization configuration
+ */
 
-var cellDataType = T.oneOfType([T.string, T.number, T.arrayOf(T.oneOfType([T.string, T.number]))]);
-PureTable.propTypes = {
-  backgroundColor: T.string,
-  count: T.number,
-  columnFormat: T.objectOf(T.shape({
-    align: T.arrayOf(T.oneOf(consts_1.validAlignments)),
-    cellTypes: T.arrayOf(T.oneOf(consts_1.validCellRenderers)),
-    data: T.arrayOf(cellDataType),
-    rowBackgroundColors: T.arrayOf(T.string),
-    rowColors: T.arrayOf(T.string),
-    sparklineAreaColors: T.arrayOf(T.string),
-    sparklineColors: T.arrayOf(T.string),
-    sparklineTypes: T.arrayOf(T.oneOf(consts_1.validSparklineTypes))
-  })),
-  headers: T.arrayOf(T.string),
-  headerVisibility: T.oneOf(consts_1.validHeaderVisibilities),
-  height: T.oneOfType([T.number]),
-  mode: T.string,
-  onCellClick: T.func,
-  paginatorParams: getPagination_1.PaginatorParamsPropTypes,
-  showRowNumbers: T.bool,
-  sortParams: getSorting_1.SortParamsPropTypes,
-  table: T.arrayOf(T.arrayOf(cellDataType)),
-  tableFormat: T.shape({
-    align: T.arrayOf(T.arrayOf(T.oneOf(consts_1.validAlignments))),
-    cellTypes: T.arrayOf(T.arrayOf(T.oneOf(consts_1.validCellRenderers))),
-    data: T.arrayOf(T.arrayOf(cellDataType)),
-    headerBackgroundColor: T.string,
-    headerColor: T.string,
-    rowBackgroundColors: T.oneOfType([T.arrayOf(T.string), T.arrayOf(T.arrayOf(T.string))]),
-    rowColors: T.oneOfType([T.arrayOf(T.string), T.arrayOf(T.arrayOf(T.string))]),
-    sparklineAreaColors: T.arrayOf(T.arrayOf(T.string)),
-    sparklineColors: T.arrayOf(T.arrayOf(T.string)),
-    sparklineTypes: T.arrayOf(T.arrayOf(T.oneOf(consts_1.validSparklineTypes)))
-  }),
-  theme: T.any,
-  width: T.oneOfType([T.number]),
-  onColumnFormatChange: T.func,
-  font: T.string,
-  fontSize: T.string
-};
-PureTable.defaultProps = {
-  columnFormat: {},
-  headers: [],
-  headerVisibility: 'inline',
-  height: 300,
-  mode: 'view',
-  onCellClick: null,
-  paginatorParams: {
-    isPaging: false,
-    onChange: lodash_1.noop
-  },
-  showRowNumbers: false,
-  sortParams: {
-    onSort: lodash_1.noop
+var config = {
+  /**
+   * unique viz key
+   */
+  key: 'splunk.table',
+
+  /**
+   * viz name
+   */
+  name: 'Table',
+  category: VizCategory_1.VizCategory.TABLE,
+
+  /**
+   * viz icon
+   */
+  icon: visualization_icons_1.Table,
+  placeholderIcon: placeholders_1.Table,
+  dataContract: dataContract,
+  size: size,
+  defaultContext: defaultContext,
+  optionsSchema: optionsSchema,
+  editorConfig: editorConfig,
+  events: {
+    'cell.click': {
+      description: 'triggered when user clicks a table cell'
+    }
   },
-  table: [],
-  tableFormat: {},
-  theme: {},
-  width: 300,
-  onColumnFormatChange: lodash_1.noop,
-  font: fontMap.proportional,
-  fontSize: fontSizeMap.default
+  supports: [VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS, VizBehavior_1.VizBehavior.EVENTS, VizBehavior_1.VizBehavior.PAGE_AND_SORT, VizBehavior_1.VizBehavior.PLACEHOLDER],
+  themes: themes
 };
-PureTable.displayName = 'VizTable';
-exports.default = withEmptyTableMessage(FixedSizeContainer_1.default(PureTable));
+exports.default = configUtils_1.enhanceConfig(config);
 
 /***/ }),
 
-/***/ 266:
+/***/ 268:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Paginator");
 
 /***/ }),
 
-/***/ 267:
+/***/ 269:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Message");
 
 /***/ }),
 
-/***/ 268:
+/***/ 27:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _defineProperty = __webpack_require__(7);
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSortingParams = exports.SortParamsPropTypes = void 0;
+
+var T = __webpack_require__(0);
+
+var lodash_1 = __webpack_require__(2);
+
+var DataSource_1 = __webpack_require__(37);
+
+exports.SortParamsPropTypes = T.shape({
+  currentSortKey: T.string,
+  currentSortDir: T.oneOf(DataSource_1.validSortDirs),
+  onSort: T.func
+});
+
+var getSortingParams = function getSortingParams(_ref) {
+  var requestParams = _ref.requestParams,
+      onRequestParamsChange = _ref.onRequestParamsChange;
+  var currentSortKey;
+  var currentSortDir;
+  var nextSortDirMap = {
+    asc: 'desc',
+    desc: 'asc',
+    none: 'asc'
+  };
+  var onSort;
+
+  if (lodash_1.isFunction(onRequestParamsChange)) {
+    if (requestParams && lodash_1.has(requestParams, 'sort')) {
+      currentSortKey = Object.keys(requestParams.sort).shift();
+      currentSortDir = requestParams.sort[currentSortKey];
+    } // undid memoization since there is a dependency on requestParams, which is a deeply nested object
+
+
+    onSort = function onSort(e, _ref2) {
+      var sortKey = _ref2.sortKey,
+          sortDir = _ref2.sortDir;
+
+      if (typeof sortKey === 'string') {
+        var nextSortDir = lodash_1.has(nextSortDirMap, sortDir) ? nextSortDirMap[sortDir] : 'none';
+        onRequestParamsChange(Object.assign(Object.assign({}, requestParams), {
+          offset: 0,
+          sort: _defineProperty({}, sortKey, nextSortDir)
+        }));
+      } else {
+        onRequestParamsChange(requestParams);
+      }
+    };
+  }
+
+  return {
+    currentSortKey: currentSortKey,
+    currentSortDir: currentSortDir,
+    onSort: onSort
+  };
+};
+
+exports.getSortingParams = getSortingParams;
+
+/***/ }),
+
+/***/ 270:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _toConsumableArray = __webpack_require__(41);
+var _toConsumableArray = __webpack_require__(9);
 
-var _typeof = __webpack_require__(21);
+var _typeof = __webpack_require__(25);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -1998,9 +2026,9 @@ exports.useTable = exports.getTextOverflowType = exports.getOverflowStyles = voi
 
 var lodash_1 = __webpack_require__(2);
 
-var colorUtils_1 = __webpack_require__(12);
+var colorUtils_1 = __webpack_require__(13);
 
-var consts_1 = __webpack_require__(110);
+var consts_1 = __webpack_require__(112);
 
 var isArray = function isArray(v) {
   return Array.isArray(v);
@@ -2401,117 +2429,52 @@ var useTable = function useTable() {
     tableHeader: tableHeader,
     tableBody: tableBody
   };
-};
-
-exports.useTable = useTable;
-
-/***/ }),
-
-/***/ 269:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
-  Object.defineProperty(o, k2, {
-    enumerable: true,
-    get: function get() {
-      return m[k];
-    }
-  });
-} : function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
-  o[k2] = m[k];
-});
-
-var __exportStar = this && this.__exportStar || function (m, exports) {
-  for (var p in m) {
-    if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-  }
-};
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-__exportStar(__webpack_require__(270), exports);
-
-__exportStar(__webpack_require__(271), exports);
-
-__exportStar(__webpack_require__(272), exports);
-
-__exportStar(__webpack_require__(273), exports);
-
-/***/ }),
-
-/***/ 27:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getPaginationParams = exports.PaginatorParamsPropTypes = void 0;
-
-var T = __webpack_require__(0);
-
-var lodash_1 = __webpack_require__(2);
-
-exports.PaginatorParamsPropTypes = T.shape({
-  isPaging: T.bool,
-  current: T.number,
-  totalPages: T.number,
-  onChange: T.func
-});
-
-var getPaginationParams = function getPaginationParams(_ref) {
-  var requestParams = _ref.requestParams,
-      meta = _ref.meta,
-      onRequestParamsChange = _ref.onRequestParamsChange;
-  var totalCount = meta && meta.totalCount || 0;
-  var offset = requestParams && requestParams.offset || 0;
-  var count = requestParams && requestParams.count;
-  var totalPages = typeof count === 'number' && count > 0 ? Math.ceil(totalCount / count) : 0;
-  var current = typeof count === 'number' && count > 0 ? Math.floor(offset / count) + 1 : 0;
-  var isPaging = totalPages > 1 && lodash_1.isFunction(onRequestParamsChange);
+};
 
-  var onChangeHandler = function onChangeHandler(e, _ref2) {
-    var page = _ref2.page,
-        countArg = _ref2.count;
-    var newParams = lodash_1.cloneDeep(requestParams);
+exports.useTable = useTable;
 
-    if (typeof countArg === 'number') {
-      newParams.count = countArg;
-      newParams.offset = 0;
-    }
+/***/ }),
 
-    var pageCount = typeof newParams.count === 'number' ? newParams.count : 10;
+/***/ 271:
+/***/ (function(module, exports, __webpack_require__) {
 
-    if (typeof page === 'number' && page > 0) {
-      newParams.count = pageCount;
-      newParams.offset = (page - 1) * pageCount;
-    }
+"use strict";
 
-    onRequestParamsChange(newParams);
-  };
 
-  return {
-    isPaging: isPaging,
-    current: current,
-    totalPages: totalPages,
-    onChange: lodash_1.isFunction(onRequestParamsChange) ? onChangeHandler : lodash_1.noop
-  };
+var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  Object.defineProperty(o, k2, {
+    enumerable: true,
+    get: function get() {
+      return m[k];
+    }
+  });
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+
+var __exportStar = this && this.__exportStar || function (m, exports) {
+  for (var p in m) {
+    if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+  }
 };
 
-exports.getPaginationParams = getPaginationParams;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+__exportStar(__webpack_require__(272), exports);
+
+__exportStar(__webpack_require__(273), exports);
+
+__exportStar(__webpack_require__(274), exports);
+
+__exportStar(__webpack_require__(275), exports);
 
 /***/ }),
 
-/***/ 270:
+/***/ 272:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2534,7 +2497,7 @@ exports.SwitchTableCell = SwitchTableCell;
 
 /***/ }),
 
-/***/ 271:
+/***/ 273:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2547,7 +2510,7 @@ exports.TextCell = void 0;
 
 var React = __webpack_require__(1);
 
-var Table_1 = __webpack_require__(85);
+var Table_1 = __webpack_require__(90);
 
 var TextCell = function TextCell(_ref) {
   var cell = _ref.cell,
@@ -2570,7 +2533,7 @@ exports.TextCell.displayName = 'TextCell';
 
 /***/ }),
 
-/***/ 272:
+/***/ 274:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2583,7 +2546,7 @@ exports.ArrayCell = void 0;
 
 var React = __webpack_require__(1);
 
-var Table_1 = __webpack_require__(85);
+var Table_1 = __webpack_require__(90);
 
 var ArrayCell = function ArrayCell(_ref) {
   var cell = _ref.cell,
@@ -2612,13 +2575,13 @@ exports.ArrayCell.displayName = 'ArrayCell';
 
 /***/ }),
 
-/***/ 273:
+/***/ 275:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _slicedToArray = __webpack_require__(51);
+var _slicedToArray = __webpack_require__(52);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -2627,9 +2590,9 @@ exports.SparklineCell = exports.validSparklineTypes = void 0;
 
 var React = __webpack_require__(1);
 
-var Table_1 = __webpack_require__(85);
+var Table_1 = __webpack_require__(90);
 
-var Line_1 = __webpack_require__(86);
+var Line_1 = __webpack_require__(91);
 
 var paddingLeftRight = 5;
 var paddingTopBottom = 3;
@@ -2705,7 +2668,7 @@ exports.SparklineCell.displayName = 'SparklineCell';
 
 /***/ }),
 
-/***/ 274:
+/***/ 276:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2714,7 +2677,9 @@ exports.SparklineCell.displayName = 'SparklineCell';
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getColumnWidth = void 0;
+exports.getLastColumnWidth = exports.getColumnWidth = void 0;
+
+var PureTable_1 = __webpack_require__(140);
 
 var getColumnWidth = function getColumnWidth(_ref) {
   var columns = _ref.columns,
@@ -2745,10 +2710,59 @@ var getColumnWidth = function getColumnWidth(_ref) {
 };
 
 exports.getColumnWidth = getColumnWidth;
+/**
+ * * Gets the width of the right most column
+ * @param containerRefInnerWidth width of the table
+ * @param lastShowingTableHeadersID id of the last table header
+ * @param columns columns
+ * @param tempColumns tempColumns runtime calculation of columns
+ * @param firstShowingTableHeadersID id of the first table header
+ * @returns number width of the last column
+ */
+
+var getLastColumnWidth = function getLastColumnWidth(containerRefInnerWidth, lastShowingTableHeadersID, columns, tempColumns, firstShowingTableHeadersID) {
+  var _a, _b, _c, _d; // save the width of the last column from either columns ( first as thats user defined ) then tempColumns ( created at runtime )
+
+
+  var knownWidthOfLastColumn = ((_a = columns[lastShowingTableHeadersID]) === null || _a === void 0 ? void 0 : _a.width) || ((_b = tempColumns[lastShowingTableHeadersID]) === null || _b === void 0 ? void 0 : _b.width) || 0;
+  var currentWidthSansLastColumn = 0; // calculate the width of all the column except the last column
+
+  Object.keys(tempColumns).forEach(function (key) {
+    var _a;
+
+    if (key !== lastShowingTableHeadersID) {
+      currentWidthSansLastColumn += ((_a = tempColumns[key]) === null || _a === void 0 ? void 0 : _a.width) || 0;
+    }
+  });
+  Object.keys(columns).forEach(function (key) {
+    var _a, _b, _c;
+
+    if (key !== lastShowingTableHeadersID) {
+      if (((_a = tempColumns[key]) === null || _a === void 0 ? void 0 : _a.width) && ((_b = columns[key]) === null || _b === void 0 ? void 0 : _b.width)) {
+        currentWidthSansLastColumn -= tempColumns[key].width;
+        currentWidthSansLastColumn += ((_c = columns[key]) === null || _c === void 0 ? void 0 : _c.width) || 0;
+      }
+    }
+  }); // if the first column is not defined and the last is keep the last as the first will expand
+
+  if (!((_c = columns[firstShowingTableHeadersID]) === null || _c === void 0 ? void 0 : _c.width) && ((_d = columns[lastShowingTableHeadersID]) === null || _d === void 0 ? void 0 : _d.width)) {
+    return columns[lastShowingTableHeadersID].width;
+  } // if the width of the columns plus the last column is smaller than the table return the difference
+  // so as to expand the last column
+
+
+  if (currentWidthSansLastColumn + knownWidthOfLastColumn < containerRefInnerWidth && knownWidthOfLastColumn) {
+    return Math.max(PureTable_1.MINIMUM_COLUMN_SIZE, containerRefInnerWidth - currentWidthSansLastColumn);
+  }
+
+  return knownWidthOfLastColumn;
+};
+
+exports.getLastColumnWidth = getLastColumnWidth;
 
 /***/ }),
 
-/***/ 275:
+/***/ 277:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/debounce");
@@ -2761,6 +2775,71 @@ module.exports = require("lodash/debounce");
 "use strict";
 
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPaginationParams = exports.PaginatorParamsPropTypes = void 0;
+
+var T = __webpack_require__(0);
+
+var lodash_1 = __webpack_require__(2);
+
+exports.PaginatorParamsPropTypes = T.shape({
+  isPaging: T.bool,
+  current: T.number,
+  totalPages: T.number,
+  onChange: T.func
+});
+
+var getPaginationParams = function getPaginationParams(_ref) {
+  var requestParams = _ref.requestParams,
+      meta = _ref.meta,
+      onRequestParamsChange = _ref.onRequestParamsChange;
+  var totalCount = meta && meta.totalCount || 0;
+  var offset = requestParams && requestParams.offset || 0;
+  var count = requestParams && requestParams.count;
+  var totalPages = typeof count === 'number' && count > 0 ? Math.ceil(totalCount / count) : 0;
+  var current = typeof count === 'number' && count > 0 ? Math.floor(offset / count) + 1 : 0;
+  var isPaging = totalPages > 1 && lodash_1.isFunction(onRequestParamsChange);
+
+  var onChangeHandler = function onChangeHandler(e, _ref2) {
+    var page = _ref2.page,
+        countArg = _ref2.count;
+    var newParams = lodash_1.cloneDeep(requestParams);
+
+    if (typeof countArg === 'number') {
+      newParams.count = countArg;
+      newParams.offset = 0;
+    }
+
+    var pageCount = typeof newParams.count === 'number' ? newParams.count : 10;
+
+    if (typeof page === 'number' && page > 0) {
+      newParams.count = pageCount;
+      newParams.offset = (page - 1) * pageCount;
+    }
+
+    onRequestParamsChange(newParams);
+  };
+
+  return {
+    isPaging: isPaging,
+    current: current,
+    totalPages: totalPages,
+    onChange: lodash_1.isFunction(onRequestParamsChange) ? onChangeHandler : lodash_1.noop
+  };
+};
+
+exports.getPaginationParams = getPaginationParams;
+
+/***/ }),
+
+/***/ 29:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -2784,7 +2863,14 @@ var VizCategory;
 
 /***/ }),
 
-/***/ 29:
+/***/ 3:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/i18n");
+
+/***/ }),
+
+/***/ 30:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2798,35 +2884,35 @@ var React = __webpack_require__(1);
 
 var lodash_1 = __webpack_require__(2);
 
-var getSettingsFromThemedProps_1 = __webpack_require__(30);
+var getSettingsFromThemedProps_1 = __webpack_require__(31);
 
-var Options_1 = __webpack_require__(31);
+var Options_1 = __webpack_require__(32);
 
-var SanitizeProps_1 = __webpack_require__(32);
+var SanitizeProps_1 = __webpack_require__(33);
 
-var TimezoneContext_1 = __webpack_require__(19);
+var TimezoneContext_1 = __webpack_require__(21);
 
-var moment_1 = __webpack_require__(33);
+var moment_1 = __webpack_require__(34);
 
 var styled_components_1 = __webpack_require__(4);
 
-var SplunkVisualization_1 = __webpack_require__(34);
+var SplunkVisualization_1 = __webpack_require__(35);
 
 var VizBehavior_1 = __webpack_require__(5);
 
-var getSorting_1 = __webpack_require__(26);
+var getSorting_1 = __webpack_require__(27);
 
-var getPagination_1 = __webpack_require__(27);
+var getPagination_1 = __webpack_require__(28);
 
-var useDeepMemo_1 = __webpack_require__(37);
+var useDeepMemo_1 = __webpack_require__(38);
 
 var JSONSchemaUtils_1 = __webpack_require__(24);
 
-var MissingPropsMessage_1 = __webpack_require__(38);
+var MissingPropsMessage_1 = __webpack_require__(39);
 
-var withEditModeCover_1 = __webpack_require__(39);
+var withEditModeCover_1 = __webpack_require__(40);
 
-var withPlaceholder_1 = __webpack_require__(40);
+var withPlaceholder_1 = __webpack_require__(42);
 
 var hocUtils_1 = __webpack_require__(8);
 /**
@@ -3030,48 +3116,41 @@ exports.default = withDashboardViz;
 
 /***/ }),
 
-/***/ 3:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/ui-utils/i18n");
-
-/***/ }),
-
-/***/ 30:
+/***/ 31:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/themes/getSettingsFromThemedProps");
 
 /***/ }),
 
-/***/ 31:
+/***/ 32:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-encoding/Options");
 
 /***/ }),
 
-/***/ 32:
+/***/ 33:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/SanitizeProps");
 
 /***/ }),
 
-/***/ 33:
+/***/ 34:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/moment");
 
 /***/ }),
 
-/***/ 34:
+/***/ 35:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _classCallCheck = __webpack_require__(10);
+var _classCallCheck = __webpack_require__(12);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -3083,7 +3162,7 @@ var T = __webpack_require__(0);
 
 var lodash_1 = __webpack_require__(2);
 
-var VizActionHandler_1 = __webpack_require__(35); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
+var VizActionHandler_1 = __webpack_require__(36); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
 
 
 exports.INITIAL_WIDTH = 250;
@@ -3217,15 +3296,15 @@ exports.default = SplunkVisualization;
 
 /***/ }),
 
-/***/ 35:
+/***/ 36:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _classCallCheck = __webpack_require__(10);
+var _classCallCheck = __webpack_require__(12);
 
-var _createClass = __webpack_require__(16);
+var _createClass = __webpack_require__(17);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -3255,7 +3334,7 @@ exports.DefaultVizActionHandler = DefaultVizActionHandler;
 
 /***/ }),
 
-/***/ 36:
+/***/ 37:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3269,7 +3348,7 @@ exports.validSortDirs = ['asc', 'desc', 'none'];
 
 /***/ }),
 
-/***/ 37:
+/***/ 38:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3315,7 +3394,7 @@ exports.useDeepMemo = useDeepMemo;
 
 /***/ }),
 
-/***/ 38:
+/***/ 39:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3332,9 +3411,9 @@ var T = __webpack_require__(0);
 
 var i18n_1 = __webpack_require__(3);
 
-var Message_1 = __webpack_require__(9);
+var Message_1 = __webpack_require__(11);
 
-var FixedSizeContainer_1 = __webpack_require__(13);
+var FixedSizeContainer_1 = __webpack_require__(14);
 /**
  * @method isMissing
  * @param {any} v
@@ -3396,7 +3475,14 @@ exports.default = FixedSizeContainer_1.default(exports.MissingPropsMessage);
 
 /***/ }),
 
-/***/ 39:
+/***/ 4:
+/***/ (function(module, exports) {
+
+module.exports = require("styled-components");
+
+/***/ }),
+
+/***/ 40:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3417,7 +3503,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': "24.7.0 - c7389a161"
+  'data-splunk-visualization-version': "25.0.1 - de10ad954"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"
@@ -3449,14 +3535,14 @@ exports.default = withEditModeCover;
 
 /***/ }),
 
-/***/ 4:
+/***/ 41:
 /***/ (function(module, exports) {
 
-module.exports = require("styled-components");
+module.exports = require("@splunk/visualizations-shared/mapUtils");
 
 /***/ }),
 
-/***/ 40:
+/***/ 42:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3468,11 +3554,11 @@ Object.defineProperty(exports, "__esModule", {
 
 var React = __webpack_require__(1);
 
-var colorUtils_1 = __webpack_require__(12);
+var colorUtils_1 = __webpack_require__(13);
 
-var variables_1 = __webpack_require__(11);
+var variables_1 = __webpack_require__(10);
 
-var IconPlaceholder_1 = __webpack_require__(25);
+var IconPlaceholder_1 = __webpack_require__(26);
 
 var VizBehavior_1 = __webpack_require__(5);
 
@@ -3521,28 +3607,21 @@ exports.default = withPlaceholder;
 
 /***/ }),
 
-/***/ 41:
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/toConsumableArray");
-
-/***/ }),
-
-/***/ 42:
+/***/ 43:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/colorConstants");
 
 /***/ }),
 
-/***/ 44:
+/***/ 45:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-icons/placeholders");
 
 /***/ }),
 
-/***/ 45:
+/***/ 46:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-icons");
@@ -3587,7 +3666,7 @@ var VizBehavior;
 
 /***/ }),
 
-/***/ 51:
+/***/ 52:
 /***/ (function(module, exports) {
 
 module.exports = require("@babel/runtime/helpers/slicedToArray");
@@ -3600,6 +3679,8 @@ module.exports = require("@babel/runtime/helpers/slicedToArray");
 "use strict";
 
 
+var _toConsumableArray = __webpack_require__(9);
+
 var _defineProperty = __webpack_require__(7);
 
 var __rest = this && this.__rest || function (s, e) {
@@ -3618,11 +3699,11 @@ var __rest = this && this.__rest || function (s, e) {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.generatePrecisionValues = exports.getInitialPreset = exports.isDynamicOption = exports.enhanceOptionsSchemaWithDynamicOptions = exports.enhanceConfig = void 0;
+exports.insertLayout = exports.uncollapseEditorConfig = exports.generatePrecisionValues = exports.getInitialPreset = exports.isDynamicOption = exports.enhanceOptionsSchemaWithDynamicOptions = exports.enhanceConfig = void 0;
 
 var lodash_1 = __webpack_require__(2);
 
-var schemaUtils_1 = __webpack_require__(15);
+var schemaUtils_1 = __webpack_require__(16);
 
 var VizBehavior_1 = __webpack_require__(5);
 
@@ -3693,8 +3774,10 @@ function enhanceOptionsSchemaWithDynamicOptions(optionsSchema) {
 exports.enhanceOptionsSchemaWithDynamicOptions = enhanceOptionsSchemaWithDynamicOptions;
 /**
  * Helper function to enhance a Visualization Config as needed based on behaviors specified in supports block
+ * this function also collapse all editor panels
  * @param vizConfig a Visualization Config
  * @returns an enhanced Visualization Config containing updated config entries based on behaviors it supports
+ * and containing `open: false` for all editor panels in editorConfig
  */
 
 function enhanceConfig(vizConfig) {
@@ -3704,10 +3787,33 @@ function enhanceConfig(vizConfig) {
     enhancedConfig.optionsSchema = enhanceOptionsSchemaWithDynamicOptions(vizConfig.optionsSchema);
   }
 
+  enhancedConfig.editorConfig = vizConfig.editorConfig.map(function (config) {
+    return Object.assign(Object.assign({}, config), {
+      open: false
+    });
+  });
   return enhancedConfig;
 }
 
 exports.enhanceConfig = enhanceConfig;
+/**
+ * Helper function to uncollapse all editor panels by adding `open: true` to the editorConfig
+ * Created for editor unit tests
+ * @param vizConfig a Visualization Config
+ * @returns a Visualization Config containing `open: true` for all editor panels in editorConfig
+ */
+
+function uncollapseEditorConfig(vizConfig) {
+  var editorPanelUncollapsedConfig = vizConfig;
+  editorPanelUncollapsedConfig.editorConfig = vizConfig.editorConfig.map(function (config) {
+    return Object.assign(Object.assign({}, config), {
+      open: true
+    });
+  });
+  return editorPanelUncollapsedConfig;
+}
+
+exports.uncollapseEditorConfig = uncollapseEditorConfig;
 
 function isDynamicOption(option) {
   return option && typeof option === 'string' && option.trim().startsWith('>') || false;
@@ -3783,20 +3889,31 @@ function generatePrecisionValues(numPrecisionValues) {
 }
 
 exports.generatePrecisionValues = generatePrecisionValues;
+/**
+ * insert layout in layout array, return a new layout array instead of updating the original
+ *
+ * @param {EditorLayoutConfig[][]} layout - editor layout
+ * @param {Number} index - the index to insert layout item(s)
+ * @param {EditorLayoutConfig[][]} layoutItems - the item(s) to insert
+ * @returns {EditorLayoutConfig[][]} new editor layout with insertion
+ */
 
-/***/ }),
+var insertLayout = function insertLayout(layout, index) {
+  for (var _len = arguments.length, layoutItems = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+    layoutItems[_key - 2] = arguments[_key];
+  }
 
-/***/ 7:
-/***/ (function(module, exports) {
+  return [].concat(_toConsumableArray(layout.slice(0, index)), layoutItems, _toConsumableArray(layout.slice(index)));
+};
 
-module.exports = require("@babel/runtime/helpers/defineProperty");
+exports.insertLayout = insertLayout;
 
 /***/ }),
 
-/***/ 77:
+/***/ 7:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/taggedTemplateLiteral");
+module.exports = require("@babel/runtime/helpers/defineProperty");
 
 /***/ }),
 
@@ -3806,14 +3923,16 @@ module.exports = require("@babel/runtime/helpers/taggedTemplateLiteral");
 "use strict";
 
 
-var _typeof = __webpack_require__(21);
+var _typeof = __webpack_require__(25);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.findClosestMatchFromDefaultList = exports.deepMergeWithArrayPrimitiveOverrides = exports.extendStaticWrapperProps = void 0;
+exports.deepMergeWithArrayPrimitiveOverrides = exports.extendStaticWrapperProps = void 0;
 
 var lodash_1 = __webpack_require__(2);
+
+var mapUtils_1 = __webpack_require__(41);
 /**
  * @method extendStaticWrapperProps
  * @param {Object} props
@@ -3868,7 +3987,7 @@ var deepMergeWithArrayPrimitiveOverrides = function deepMergeWithArrayPrimitiveO
         // If option is an array of objects
         for (var i = 0; i < clone[sourceKey].length; i += 1) {
           if (_typeof(clone[sourceKey][i]) === 'object') {
-            var closestMatchIdx = exports.findClosestMatchFromDefaultList(sourceToApply[sourceKey], clone[sourceKey][i]);
+            var closestMatchIdx = mapUtils_1.findClosestMatchFromDefaultList(sourceToApply[sourceKey], clone[sourceKey][i]);
 
             if (closestMatchIdx > -1) {
               clone[sourceKey][i] = exports.deepMergeWithArrayPrimitiveOverrides(clone[sourceKey][i], sourceToApply[sourceKey][closestMatchIdx]);
@@ -3882,71 +4001,34 @@ var deepMergeWithArrayPrimitiveOverrides = function deepMergeWithArrayPrimitiveO
 };
 
 exports.deepMergeWithArrayPrimitiveOverrides = deepMergeWithArrayPrimitiveOverrides;
-/**
- *  Finds the closest matching object from the list, which has the max same key value pairs.
- *  Returns the index of match if found, or -1
- *  For eg :-
-   const list = [{
-        type: "marker",
-        lat: "value1"
-    }, {
-        type: "bubble",
-        size: "value2"
-    }];
-
-    const obj = {
-        type: 'bubble'
-    };
-
-    findClosestMatch(list, obj) -> returns index 1.
- */
-
-var findClosestMatchFromDefaultList = function findClosestMatchFromDefaultList(searchList, inputObj) {
-  if (!Array.isArray(searchList) || searchList.length === 0) {
-    return -1;
-  }
 
-  var keys = Object.keys(inputObj);
-  var maxMatchCnt = 0;
-  var maxMatchIdx = 0;
-  searchList.forEach(function (item, idx) {
-    var matchCnt = 0;
-    keys.forEach(function (key) {
-      if (item[key] === inputObj[key]) {
-        matchCnt += 1;
-      }
-    });
+/***/ }),
 
-    if (Math.max(maxMatchCnt, matchCnt) > maxMatchCnt) {
-      maxMatchCnt = matchCnt;
-      maxMatchIdx = idx;
-    }
-  });
-  return maxMatchIdx;
-};
+/***/ 81:
+/***/ (function(module, exports) {
 
-exports.findClosestMatchFromDefaultList = findClosestMatchFromDefaultList;
+module.exports = require("@babel/runtime/helpers/taggedTemplateLiteral");
 
 /***/ }),
 
-/***/ 85:
+/***/ 9:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-ui/Table");
+module.exports = require("@babel/runtime/helpers/toConsumableArray");
 
 /***/ }),
 
-/***/ 86:
+/***/ 90:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-sparkline/Line");
+module.exports = require("@splunk/react-ui/Table");
 
 /***/ }),
 
-/***/ 9:
+/***/ 91:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/Message");
+module.exports = require("@splunk/react-sparkline/Line");
 
 /***/ })