@splunk/visualizations 24.5.3 → 25.0.0

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 = 265);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -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:
+/***/ 111:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -129,126 +129,37 @@ module.exports = require("@splunk/themes/variables");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.validTextOverflows = exports.validAlignments = exports.validHeaderVisibilities = exports.validSparklineTypes = exports.validCellRenderers = void 0;
+exports.validFontSizes = exports.validTextOverflows = exports.validAlignments = exports.validHeaderVisibilities = exports.validSparklineTypes = exports.validCellRenderers = void 0;
 exports.validCellRenderers = ['TextCell', 'ArrayCell', 'SparklineCell'];
 exports.validSparklineTypes = ['line', 'area'];
 exports.validHeaderVisibilities = ['none', 'fixed', 'inline'];
 exports.validAlignments = ['left', 'center', 'right'];
 exports.validTextOverflows = ['anywhere', 'break-word', 'ellipsis'];
+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.5.3 - 3129e19a7",
-      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:
+/***/ 138:
 /***/ (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 = {};
@@ -270,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__(266);
 
 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__(139);
 
 exports.PureTable = PureTable_1.default;
 
@@ -356,106 +267,37 @@ exports.default = Table;
 
 /***/ }),
 
-/***/ 14:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/style");
-
-/***/ }),
-
-/***/ 15:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/schemaUtils");
-
-/***/ }),
-
-/***/ 16:
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/createClass");
-
-/***/ }),
-
-/***/ 17:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
-
-/***/ }),
-
-/***/ 19:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualization-context/TimezoneContext");
-
-/***/ }),
-
-/***/ 2:
-/***/ (function(module, exports) {
-
-module.exports = require("lodash");
-
-/***/ }),
-
-/***/ 21:
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/typeof");
-
-/***/ }),
-
-/***/ 22:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/themes/pick");
-
-/***/ }),
-
-/***/ 24:
+/***/ 139:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.pickFieldFromJSONSchema = void 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);
-
-      if (!lodash_1.isEmpty(nestedSchema)) {
-        accum[k] = nestedSchema;
-      }
-    }
+var _slicedToArray = __webpack_require__(52);
 
-    return accum;
-  }, {});
-};
+var _defineProperty = __webpack_require__(7);
 
-exports.pickFieldFromJSONSchema = pickFieldFromJSONSchema;
+var _taggedTemplateLiteral = __webpack_require__(81);
 
-/***/ }),
+var _templateObject, _templateObject2;
 
-/***/ 25:
-/***/ (function(module, exports, __webpack_require__) {
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
 
-"use strict";
+  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.shouldShowIconPlaceholder = void 0;
+exports.MINIMUM_COLUMN_SIZE = void 0;
 
 var React = __webpack_require__(1);
 
@@ -463,1449 +305,1648 @@ var T = __webpack_require__(0);
 
 var lodash_1 = __webpack_require__(2);
 
+var styled_components_1 = __webpack_require__(4);
+
 var i18n_1 = __webpack_require__(3);
 
-var Message_1 = __webpack_require__(9);
+var Table_1 = __webpack_require__(89);
 
-var FixedSizeContainer_1 = __webpack_require__(13);
-/**
- * @method shouldShowIconPlaceholder
- * @param {object} dataSources
- * @param {boolean} loading
- * @returns {boolean}
- */
+var Paginator_1 = __webpack_require__(267);
 
+var Message_1 = __webpack_require__(268);
 
-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 colorUtils_1 = __webpack_require__(13);
 
-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 style_1 = __webpack_require__(15);
 
-var IconPlaceholder = function IconPlaceholder(props) {
-  var width = props.width,
-      height = props.height,
-      icon = props.icon,
-      iconColor = props.iconColor;
+var pick_1 = __webpack_require__(20);
 
-  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 variables_1 = __webpack_require__(10);
 
-  return React.createElement(Message_1.default, {
-    width: width,
-    height: height,
-    level: "warning",
-    message: i18n_1._('No DataSource Connected')
-  });
-};
+var hooks_1 = __webpack_require__(269);
 
-IconPlaceholder.propTypes = propTypes;
-IconPlaceholder.defaultProps = {
-  width: '100%',
-  height: 250
-};
-exports.default = FixedSizeContainer_1.default(IconPlaceholder);
+var consts_1 = __webpack_require__(111);
 
-/***/ }),
+var cells_1 = __webpack_require__(270);
 
-/***/ 26:
-/***/ (function(module, exports, __webpack_require__) {
+var getPagination_1 = __webpack_require__(28);
 
-"use strict";
+var getSorting_1 = __webpack_require__(27);
 
+var FixedSizeContainer_1 = __webpack_require__(14);
 
-var _defineProperty = __webpack_require__(7);
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getSortingParams = exports.SortParamsPropTypes = void 0;
-
-var T = __webpack_require__(0);
+var utils_1 = __webpack_require__(275); // debounce was imported this way due to typing
+// eslint-disable-next-line import/order
 
-var lodash_1 = __webpack_require__(2);
 
-var DataSource_1 = __webpack_require__(36);
+var debounce = __webpack_require__(276);
 
-exports.SortParamsPropTypes = T.shape({
-  currentSortKey: T.string,
-  currentSortDir: T.oneOf(DataSource_1.validSortDirs),
-  onSort: T.func
+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
+  });
+  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%';
+});
+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 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
-
+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;
 
-    onSort = function onSort(e, _ref2) {
-      var sortKey = _ref2.sortKey,
-          sortDir = _ref2.sortDir;
+    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;
 
-      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 (tableBody.rows.length === 0) {
+      return React.createElement(Message_1.default, {
+        type: "warning"
+      }, i18n_1._('No data!'));
+    }
 
-  return {
-    currentSortKey: currentSortKey,
-    currentSortDir: currentSortDir,
-    onSort: onSort
+    return React.createElement(Viz, Object.assign({}, props, {
+      tableHeader: tableHeader,
+      tableBody: tableBody
+    }));
   };
-};
 
-exports.getSortingParams = getSortingParams;
+  Wrapper.displayName = 'PureTableWrapper';
+  return Wrapper;
+};
 
-/***/ }),
+var useTableHead = function useTableHead(visibility) {
+  if (visibility === 'none') {
+    return NonVisibleTableHead;
+  }
 
-/***/ 263:
-/***/ (function(module, exports, __webpack_require__) {
+  if (visibility === 'fixed') {
+    return FixedTableHead;
+  }
 
-"use strict";
+  return Table_1.default.Head;
+};
 
+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 __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];
+  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);
+      });
     }
   });
-} : 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);
-  }
+  return React.createElement(Table_1.default.HeadCell, Object.assign({
+    elementRef: cellRef
+  }, props), value);
 };
 
-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 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 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
-      };
-    }
-  }
-};
-var size = {
-  initialWidth: 300,
-  initialHeight: 300
+    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 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'
+
+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
   },
-  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 may use a dataSource 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 users to set column formatting for individual columns.',
-    type: 'object',
-    patternProperties: {
-      '.*': {
-        description: 'Customization for column property',
-        type: 'object',
-        properties: {
-          align: {
-            description: 'Alignment for each cell in the column. Valid alignments include "left", "center", and "right".',
-            type: 'array',
-            items: {
-              type: 'string',
-              enum: consts_1.validAlignments.concat()
-            }
-          },
-          cellTypes: {
-            description: 'Cell renderer for each cell in the column. Valid cell renders include "TextCell", "ArrayCell", "SparklineCell".',
-            type: 'array',
-            items: {
-              type: 'string',
-              enum: consts_1.validCellRenderers.concat()
-            }
-          },
-          data: {
-            description: 'Array of datapoint to be displayed in the column rows.',
-            type: 'array',
-            items: {
-              oneOf: [{
-                type: 'string'
-              }, {
-                type: 'number'
-              }, {
-                type: 'array',
-                items: {
-                  type: ['string', 'number']
-                }
-              }]
-            }
-          },
-          rowBackgroundColors: {
-            description: 'Array of colors for background color of each row of the column of the table.',
-            type: 'array',
-            items: {
-              type: 'string',
-              pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN
-            }
-          },
-          rowColors: {
-            description: 'Array of colors for text color of each row of the column of the table.',
-            type: 'array',
-            items: {
-              type: 'string',
-              pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN
-            }
-          },
-          sparklineAreaColors: {
-            description: 'Array of colors for sparkline area color of each row of the column of the table.',
-            type: 'array',
-            items: {
-              type: 'string',
-              pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN
-            }
-          },
-          sparklineColors: {
-            description: 'Array of colors for sparkline line color of each row of the column of the table.',
-            type: 'array',
-            items: {
-              type: 'string',
-              pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN
-            }
-          },
-          sparklineTypes: {
-            description: 'Area or Line Sparkline. Valid sparkline types include "line", "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 1px = 1/96th of 1in) the column should be displayed.',
-            type: 'number',
-            minimum: 30
-          }
-        }
-      }
+PureTable.displayName = 'VizTable';
+exports.default = withEmptyTableMessage(FixedSizeContainer_1.default(PureTable));
+
+/***/ }),
+
+/***/ 14:
+/***/ (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__(18);
+
+var style_1 = __webpack_require__(15);
+
+var colorUtils_1 = __webpack_require__(13);
+
+var Item = styled_components_1.default.div.attrs(function (_ref) {
+  var width = _ref.width;
+  return {
+    style: {
+      width: style_1.toPx(width)
     }
-  },
-  count: {
-    description: 'Specify the maximum number of rows to display.',
-    type: 'number',
-    default: 10
-  },
-  headers: {
-    default: '> table | getField()',
-    description: 'Array of headers to display on the table.',
-    type: 'array',
-    items: {
-      type: 'string'
+  };
+}).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))));
     }
-  },
-  headerVisibility: {
-    default: 'inline',
-    description: 'Header visibility can be none, fixed (docked) or inline.',
-    pattern: schemaUtils_1.getPattern(consts_1.validHeaderVisibilities),
-    enum: consts_1.validHeaderVisibilities.concat(),
-    type: 'string'
-  },
-  paginateDataSourceKey: {
-    default: 'primary',
-    description: 'Use the specified datasource 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']
-          }
-        }]
+
+    return React.createElement(FixSizeItem, {
+      "data-test": "fix-size-item",
+      "data-splunk-visualization-version": "25.0.0 - 5e0f30e5a",
+      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;
+};
+
+exports.default = withFixedSizeContainer;
+
+/***/ }),
+
+/***/ 15:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/style");
+
+/***/ }),
+
+/***/ 16:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/schemaUtils");
+
+/***/ }),
+
+/***/ 17:
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/createClass");
+
+/***/ }),
+
+/***/ 18:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
+
+/***/ }),
+
+/***/ 2:
+/***/ (function(module, exports) {
+
+module.exports = require("lodash");
+
+/***/ }),
+
+/***/ 20:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/themes/pick");
+
+/***/ }),
+
+/***/ 21:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-context/TimezoneContext");
+
+/***/ }),
+
+/***/ 23:
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/typeof");
+
+/***/ }),
+
+/***/ 25:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pickFieldFromJSONSchema = void 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);
+
+      if (!lodash_1.isEmpty(nestedSchema)) {
+        accum[k] = nestedSchema;
       }
     }
-  },
-  tableFormat: {
-    description: 'Allows users to set table wide options.',
-    type: 'object',
-    properties: {
-      align: {
-        default: '> table | type() | matchValue(tableAlignByType)',
-        description: '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: 'Render the data in one of the supported cell type. 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: 'Background color of table header.',
-        pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN,
-        type: 'string'
-      },
-      headerColor: {
-        description: 'Text color of the table header.',
-        pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN,
-        type: 'string'
-      },
-      rowBackgroundColors: {
-        default: '> table | seriesByIndex(0) | pick(tableAltRowBackgroundColorsByTheme)',
-        description: 'Array of colors for background color of each row of the table.',
-        type: 'array',
-        items: {
-          type: 'array',
-          items: {
-            type: 'string',
-            pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN
-          }
-        }
-      },
-      rowColors: {
-        description: 'Array of colors for text color of each row of the table.',
-        type: 'array',
-        items: {
-          type: 'array',
-          items: {
-            type: 'string',
-            pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA
-          }
-        }
-      },
-      sparklineAreaColors: {
-        description: 'Array of colors for sparkline area of each row of the table.',
-        type: 'array',
-        items: {
-          type: 'array',
-          items: {
-            type: 'string',
-            pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN
-          }
-        }
-      },
-      sparklineColors: {
-        description: 'Array of colors for sparkline line of each row of the table.',
-        type: 'array',
-        items: {
-          type: 'array',
-          items: {
-            type: 'string',
-            pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN
-          }
-        }
+
+    return accum;
+  }, {});
+};
+
+exports.pickFieldFromJSONSchema = pickFieldFromJSONSchema;
+
+/***/ }),
+
+/***/ 26:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shouldShowIconPlaceholder = void 0;
+
+var React = __webpack_require__(1);
+
+var T = __webpack_require__(0);
+
+var lodash_1 = __webpack_require__(2);
+
+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;
+};
+
+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 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%)'
       },
-      sparklineTypes: {
-        description: 'Area or Line Sparkline. Valid sparkline types include "line", "area".',
-        type: 'array',
-        items: {
-          type: 'array',
-          items: {
-            type: 'string',
-            enum: consts_1.validSparklineTypes.concat()
-          }
-        }
-      }
+      width: '50%',
+      height: '50%'
+    });
+  }
+
+  return React.createElement(Message_1.default, {
+    width: width,
+    height: height,
+    level: "warning",
+    message: i18n_1._('No DataSource Connected')
+  });
+};
+
+IconPlaceholder.propTypes = propTypes;
+IconPlaceholder.defaultProps = {
+  width: '100%',
+  height: 250
+};
+exports.default = FixedSizeContainer_1.default(IconPlaceholder);
+
+/***/ }),
+
+/***/ 265:
+/***/ (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 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);
+
+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__(138), exports);
+
+var Table_1 = __webpack_require__(138);
+
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return Table_1.default;
+  }
+});
+
+/***/ }),
+
+/***/ 266:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+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__(111);
+
+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 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'
   },
-  rowBackgroundColorOdd: function rowBackgroundColorOdd(props) {
-    return pick_1.default({
-      enterprise: {
-        dark: '#0D1012',
-        light: variables_1.default.backgroundColor(props)
-      },
-      prisma: variables_1.default.backgroundColorSidebar(props)
-    })(props);
+  tableRowBackgroundColorEvenConfig: {
+    channel: 'hsv.v',
+    value: '*0.96'
   },
-  textColor: function textColor(props) {
-    return pick_1.default({
-      enterprise: variables_1.default.textColor(props),
-      prisma: variables_1.default.contentColorDefault(props)
-    })(props);
+  tableHeaderBackgroundColorConfig: {
+    channel: 'hsv.v',
+    value: '*0.9'
   },
-  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);
+  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 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)
-    }
-  }]]
+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'
 }, {
-  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
-            }]
+  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
           }
-        }]],
-        // 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 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'
     }
   },
-  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);
-
-/***/ }),
-
-/***/ 265:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var _slicedToArray = __webpack_require__(51);
-
-var _defineProperty = __webpack_require__(7);
-
-var _taggedTemplateLiteral = __webpack_require__(77);
-
-var _templateObject, _templateObject2;
-
-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
-});
-
-var React = __webpack_require__(1);
-
-var T = __webpack_require__(0);
-
-var lodash_1 = __webpack_require__(2);
-
-var styled_components_1 = __webpack_require__(4);
-
-var i18n_1 = __webpack_require__(3);
-
-var Table_1 = __webpack_require__(85);
-
-var Paginator_1 = __webpack_require__(266);
-
-var Message_1 = __webpack_require__(267);
-
-var colorUtils_1 = __webpack_require__(12);
-
-var style_1 = __webpack_require__(14);
-
-var pick_1 = __webpack_require__(22);
-
-var variables_1 = __webpack_require__(11);
-
-var hooks_1 = __webpack_require__(268);
-
-var consts_1 = __webpack_require__(110);
-
-var cells_1 = __webpack_require__(269);
-
-var getPagination_1 = __webpack_require__(27);
-
-var getSorting_1 = __webpack_require__(26);
-
-var FixedSizeContainer_1 = __webpack_require__(13);
-
-var utils_1 = __webpack_require__(274); // debounce was imported this way due to typing
-// eslint-disable-next-line import/order
-
-
-var debounce = __webpack_require__(275);
-
-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"
-})(["box-sizing:border-box;flex-grow:1;overflow:hidden;", ";", ";", " ", " & [data-fixed-column='true']{table-layout:", ";width:", ";}"], 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%';
-});
-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 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 _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;
-
-    if (tableBody.rows.length === 0) {
-      return React.createElement(Message_1.default, {
-        type: "warning"
-      }, i18n_1._('No data!'));
+  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']
+          }
+        }]
+      }
     }
-
-    return React.createElement(Viz, Object.assign({}, props, {
-      tableHeader: tableHeader,
-      tableBody: tableBody
-    }));
-  };
-
-  Wrapper.displayName = 'PureTableWrapper';
-  return Wrapper;
-};
-
-var useTableHead = function useTableHead(visibility) {
-  if (visibility === 'none') {
-    return NonVisibleTableHead;
-  }
-
-  if (visibility === 'fixed') {
-    return FixedTableHead;
-  }
-
-  return Table_1.default.Head;
-};
-
-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);
-      });
+  },
+  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()
+          }
+        }
+      }
     }
-  });
-  return React.createElement(Table_1.default.HeadCell, Object.assign({
-    elementRef: cellRef
-  }, props), value);
+  }
 };
+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
 
-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;
-
-  var _React$useState = React.useState(columnFormat),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      columns = _React$useState2[0],
-      setColumns = _React$useState2[1];
-
-  var _React$useState3 = React.useState(columnFormat),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      tempColumns = _React$useState4[0],
-      setTempColumns = _React$useState4[1];
-
-  var _React$useState5 = React.useState(0),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      remainingWidth = _React$useState6[0],
-      setRemainingWidth = _React$useState6[1];
-
-  var numColumnsWithoutWidth = Object.keys(tempColumns).reduce(function (acc, key) {
-    var _a;
-
-    if ((_a = columns[key]) === null || _a === void 0 ? void 0 : _a.width) {
-      return acc;
-    }
-
-    return acc + 1;
-  }, 0);
-  var containerRef = React.useRef(null);
-  var widthRef = React.useRef(0);
-  var widthSet = tableHeader.cells.length === tableHeader.cells.filter(function (_ref7) {
-    var value = _ref7.value,
-        showCell = _ref7.showCell;
-
-    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();
+      },
+      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
     }
-  });
-  var firstRenderCount = React.useRef(count);
-  React.useEffect(function () {
-    if (firstRenderCount.current !== count) {
-      firstRenderCount.current = count;
-      paginatorOnChange(null, {
-        count: count
-      });
+  }], [{
+    label: i18n_1._('Row Numbers'),
+    option: 'showRowNumbers',
+    editor: 'editor.toggle',
+    editorProps: {
+      labelPosition: 'left',
+      labelWidth: EDITOR_LABEL_WIDTH
     }
-  }, [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);
+  }], [{
+    label: i18n_1._('Internal Fields'),
+    option: 'showInternalFields',
+    editor: 'editor.toggle',
+    editorProps: {
+      labelPosition: 'left',
+      labelWidth: EDITOR_LABEL_WIDTH
     }
-  }, [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
-        });
-      }
+  }], [{
+    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
     }
-  }, 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;
-        }
-
-        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);
+  }], [{
+    key: 'backgroundColor',
+    editor: 'editor.tableBackgroundColor',
+    editorProps: {
+      themes: themes,
+      labelPosition: 'left',
+      labelWidth: EDITOR_LABEL_WIDTH,
+      palette: _toConsumableArray(backgroundColorPaletteSet)
     }
-  }, [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);
+  }], [{
+    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
     }
-  }, [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);
-    };
-  };
-
-  return React.createElement(VizTableContainer, {
-    backgroundColor: backgroundColor,
-    ref: containerRef
-  }, React.createElement(SUITableContainer, {
-    width: width,
-    height: height,
-    isPaging: isPaging,
-    headerStyle: tableHeader.style,
-    widthSet: widthSet
-  }, React.createElement(Table_1.default, {
-    headType: headerVisibility !== 'none' ? 'inline' : undefined,
-    innerStyle: {
-      height: '100%'
-    },
-    outerStyle: {
-      height: '100%',
-      cursor: onCellClick ? 'pointer' : 'unset'
+  }], [{
+    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
+        };
+      }
     },
-    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"]);
+    key: 'TableColumnFormatterEditor'
+  }]]
+}];
+/**
+ * visualization configuration
+ */
 
-    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);
-};
+var config = {
+  /**
+   * unique viz key
+   */
+  key: 'splunk.table',
 
-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
-};
-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
+  /**
+   * 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
+  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:
+/***/ 267:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Paginator");
 
 /***/ }),
 
-/***/ 267:
+/***/ 268:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Message");
 
 /***/ }),
 
-/***/ 268:
+/***/ 269:
 /***/ (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__(23);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -1914,9 +1955,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__(111);
 
 var isArray = function isArray(v) {
   return Array.isArray(v);
@@ -2323,7 +2364,78 @@ exports.useTable = useTable;
 
 /***/ }),
 
-/***/ 269:
+/***/ 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";
@@ -2352,82 +2464,17 @@ 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);
-
-    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;
+__exportStar(__webpack_require__(274), exports);
 
 /***/ }),
 
-/***/ 270:
+/***/ 271:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2450,7 +2497,7 @@ exports.SwitchTableCell = SwitchTableCell;
 
 /***/ }),
 
-/***/ 271:
+/***/ 272:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2463,7 +2510,7 @@ exports.TextCell = void 0;
 
 var React = __webpack_require__(1);
 
-var Table_1 = __webpack_require__(85);
+var Table_1 = __webpack_require__(89);
 
 var TextCell = function TextCell(_ref) {
   var cell = _ref.cell,
@@ -2486,7 +2533,7 @@ exports.TextCell.displayName = 'TextCell';
 
 /***/ }),
 
-/***/ 272:
+/***/ 273:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2499,7 +2546,7 @@ exports.ArrayCell = void 0;
 
 var React = __webpack_require__(1);
 
-var Table_1 = __webpack_require__(85);
+var Table_1 = __webpack_require__(89);
 
 var ArrayCell = function ArrayCell(_ref) {
   var cell = _ref.cell,
@@ -2528,13 +2575,13 @@ exports.ArrayCell.displayName = 'ArrayCell';
 
 /***/ }),
 
-/***/ 273:
+/***/ 274:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _slicedToArray = __webpack_require__(51);
+var _slicedToArray = __webpack_require__(52);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -2543,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__(89);
 
-var Line_1 = __webpack_require__(86);
+var Line_1 = __webpack_require__(90);
 
 var paddingLeftRight = 5;
 var paddingTopBottom = 3;
@@ -2621,7 +2668,7 @@ exports.SparklineCell.displayName = 'SparklineCell';
 
 /***/ }),
 
-/***/ 274:
+/***/ 275:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2630,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__(139);
 
 var getColumnWidth = function getColumnWidth(_ref) {
   var columns = _ref.columns,
@@ -2661,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:
+/***/ 276:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/debounce");
@@ -2677,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
 });
@@ -2700,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";
@@ -2714,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 JSONSchemaUtils_1 = __webpack_require__(25);
 
-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);
 /**
@@ -2946,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
@@ -2999,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;
@@ -3133,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
@@ -3171,7 +3334,7 @@ exports.DefaultVizActionHandler = DefaultVizActionHandler;
 
 /***/ }),
 
-/***/ 36:
+/***/ 37:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3185,7 +3348,7 @@ exports.validSortDirs = ['asc', 'desc', 'none'];
 
 /***/ }),
 
-/***/ 37:
+/***/ 38:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3231,7 +3394,7 @@ exports.useDeepMemo = useDeepMemo;
 
 /***/ }),
 
-/***/ 38:
+/***/ 39:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3248,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
@@ -3312,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";
@@ -3333,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.5.3 - 3129e19a7"
+  'data-splunk-visualization-version': "25.0.0 - 5e0f30e5a"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"
@@ -3365,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";
@@ -3384,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);
 
@@ -3437,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");
@@ -3503,7 +3666,7 @@ var VizBehavior;
 
 /***/ }),
 
-/***/ 51:
+/***/ 52:
 /***/ (function(module, exports) {
 
 module.exports = require("@babel/runtime/helpers/slicedToArray");
@@ -3516,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) {
@@ -3534,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.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);
 
@@ -3699,20 +3864,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");
 
 /***/ }),
 
@@ -3722,14 +3898,16 @@ module.exports = require("@babel/runtime/helpers/taggedTemplateLiteral");
 "use strict";
 
 
-var _typeof = __webpack_require__(21);
+var _typeof = __webpack_require__(23);
 
 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
@@ -3784,7 +3962,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]);
@@ -3798,71 +3976,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:
+/***/ 89:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Table");
 
 /***/ }),
 
-/***/ 86:
+/***/ 9:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-sparkline/Line");
+module.exports = require("@babel/runtime/helpers/toConsumableArray");
 
 /***/ }),
 
-/***/ 9:
+/***/ 90:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/Message");
+module.exports = require("@splunk/react-sparkline/Line");
 
 /***/ })