@splunk/visualizations 27.5.0 → 28.1.0

package/Table.js

@@ -1,6 +1,7 @@
 /* Copyright © 2020 Splunk Inc.
 SPLUNK CONFIDENTIAL – Use or disclosure of this material in whole or
 in part without a valid written license from Splunk Inc. is PROHIBITED. */
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -71,131 +72,138 @@ __export(Table_exports2, {
 });
 module.exports = __toCommonJS(Table_exports2);
 
+// esm-externals:react
+var react_exports = {};
+__export(react_exports, {
+  default: () => react_default
+});
+var defaultImport = __toESM(require("react"));
+__reExport(react_exports, require("react"));
+var react_default = "default" in defaultImport ? defaultImport.default : defaultImport;
+
 // esm-externals:lodash
 var lodash_exports = {};
 __export(lodash_exports, {
   default: () => lodash_default
 });
-var defaultImport = __toESM(require("lodash"));
+var defaultImport2 = __toESM(require("lodash"));
 __reExport(lodash_exports, require("lodash"));
-var lodash_default = "default" in defaultImport ? defaultImport.default : defaultImport;
+var lodash_default = "default" in defaultImport2 ? defaultImport2.default : defaultImport2;
 
 // esm-externals:@splunk/visualizations-shared/colorUtils
 var colorUtils_exports = {};
 __export(colorUtils_exports, {
   default: () => colorUtils_default
 });
-var defaultImport2 = __toESM(require("@splunk/visualizations-shared/colorUtils"));
+var defaultImport3 = __toESM(require("@splunk/visualizations-shared/colorUtils"));
 __reExport(colorUtils_exports, require("@splunk/visualizations-shared/colorUtils"));
-var colorUtils_default = "default" in defaultImport2 ? defaultImport2.default : defaultImport2;
+var colorUtils_default = "default" in defaultImport3 ? defaultImport3.default : defaultImport3;
 
 // esm-externals:@splunk/ui-utils/i18n
 var i18n_exports = {};
 __export(i18n_exports, {
   default: () => i18n_default
 });
-var defaultImport3 = __toESM(require("@splunk/ui-utils/i18n"));
+var defaultImport4 = __toESM(require("@splunk/ui-utils/i18n"));
 __reExport(i18n_exports, require("@splunk/ui-utils/i18n"));
-var i18n_default = "default" in defaultImport3 ? defaultImport3.default : defaultImport3;
+var i18n_default = "default" in defaultImport4 ? defaultImport4.default : defaultImport4;
 
 // esm-externals:@splunk/visualization-schemas
 var visualization_schemas_exports = {};
 __export(visualization_schemas_exports, {
   default: () => visualization_schemas_default
 });
-var defaultImport4 = __toESM(require("@splunk/visualization-schemas"));
+var defaultImport5 = __toESM(require("@splunk/visualization-schemas"));
 __reExport(visualization_schemas_exports, require("@splunk/visualization-schemas"));
-var visualization_schemas_default = "default" in defaultImport4 ? defaultImport4.default : defaultImport4;
+var visualization_schemas_default = "default" in defaultImport5 ? defaultImport5.default : defaultImport5;
 
 // esm-externals:@splunk/visualizations-shared/colorConstants
 var colorConstants_exports = {};
 __export(colorConstants_exports, {
   default: () => colorConstants_default
 });
-var defaultImport5 = __toESM(require("@splunk/visualizations-shared/colorConstants"));
+var defaultImport6 = __toESM(require("@splunk/visualizations-shared/colorConstants"));
 __reExport(colorConstants_exports, require("@splunk/visualizations-shared/colorConstants"));
-var colorConstants_default = "default" in defaultImport5 ? defaultImport5.default : defaultImport5;
+var colorConstants_default = "default" in defaultImport6 ? defaultImport6.default : defaultImport6;
 
 // esm-externals:@splunk/visualization-icons
 var visualization_icons_exports = {};
 __export(visualization_icons_exports, {
   default: () => visualization_icons_default
 });
-var defaultImport6 = __toESM(require("@splunk/visualization-icons"));
+var defaultImport7 = __toESM(require("@splunk/visualization-icons"));
 __reExport(visualization_icons_exports, require("@splunk/visualization-icons"));
-var visualization_icons_default = "default" in defaultImport6 ? defaultImport6.default : defaultImport6;
+var visualization_icons_default = "default" in defaultImport7 ? defaultImport7.default : defaultImport7;
 
 // esm-externals:@splunk/visualization-icons/placeholders
 var placeholders_exports = {};
 __export(placeholders_exports, {
   default: () => placeholders_default
 });
-var defaultImport7 = __toESM(require("@splunk/visualization-icons/placeholders"));
+var defaultImport8 = __toESM(require("@splunk/visualization-icons/placeholders"));
 __reExport(placeholders_exports, require("@splunk/visualization-icons/placeholders"));
-var placeholders_default = "default" in defaultImport7 ? defaultImport7.default : defaultImport7;
+var placeholders_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
 
 // esm-externals:@splunk/themes/variables
 var variables_exports = {};
 __export(variables_exports, {
   default: () => variables_default
 });
-var defaultImport8 = __toESM(require("@splunk/themes/variables"));
+var defaultImport9 = __toESM(require("@splunk/themes/variables"));
 __reExport(variables_exports, require("@splunk/themes/variables"));
-var variables_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
+var variables_default = "default" in defaultImport9 ? defaultImport9.default : defaultImport9;
 
 // esm-externals:@splunk/themes/pick
 var pick_exports = {};
 __export(pick_exports, {
   default: () => pick_default
 });
-var defaultImport9 = __toESM(require("@splunk/themes/pick"));
+var defaultImport10 = __toESM(require("@splunk/themes/pick"));
 __reExport(pick_exports, require("@splunk/themes/pick"));
-var pick_default = "default" in defaultImport9 ? defaultImport9.default : defaultImport9;
+var pick_default = "default" in defaultImport10 ? defaultImport10.default : defaultImport10;
 
 // esm-externals:@splunk/react-icons/TextAlignCenter
 var TextAlignCenter_exports = {};
 __export(TextAlignCenter_exports, {
   default: () => TextAlignCenter_default
 });
-var defaultImport10 = __toESM(require("@splunk/react-icons/TextAlignCenter"));
+var defaultImport11 = __toESM(require("@splunk/react-icons/TextAlignCenter"));
 __reExport(TextAlignCenter_exports, require("@splunk/react-icons/TextAlignCenter"));
-var TextAlignCenter_default = "default" in defaultImport10 ? defaultImport10.default : defaultImport10;
+var TextAlignCenter_default = "default" in defaultImport11 ? defaultImport11.default : defaultImport11;
 
 // esm-externals:@splunk/react-icons/TextAlignLeft
 var TextAlignLeft_exports = {};
 __export(TextAlignLeft_exports, {
   default: () => TextAlignLeft_default
 });
-var defaultImport11 = __toESM(require("@splunk/react-icons/TextAlignLeft"));
+var defaultImport12 = __toESM(require("@splunk/react-icons/TextAlignLeft"));
 __reExport(TextAlignLeft_exports, require("@splunk/react-icons/TextAlignLeft"));
-var TextAlignLeft_default = "default" in defaultImport11 ? defaultImport11.default : defaultImport11;
+var TextAlignLeft_default = "default" in defaultImport12 ? defaultImport12.default : defaultImport12;
 
 // esm-externals:@splunk/react-icons/TextAlignRight
 var TextAlignRight_exports = {};
 __export(TextAlignRight_exports, {
   default: () => TextAlignRight_default
 });
-var defaultImport12 = __toESM(require("@splunk/react-icons/TextAlignRight"));
+var defaultImport13 = __toESM(require("@splunk/react-icons/TextAlignRight"));
 __reExport(TextAlignRight_exports, require("@splunk/react-icons/TextAlignRight"));
-var TextAlignRight_default = "default" in defaultImport12 ? defaultImport12.default : defaultImport12;
+var TextAlignRight_default = "default" in defaultImport13 ? defaultImport13.default : defaultImport13;
 
 // esm-externals:@splunk/visualizations-shared/configUtils
 var configUtils_exports = {};
 __export(configUtils_exports, {
   default: () => configUtils_default
 });
-var defaultImport13 = __toESM(require("@splunk/visualizations-shared/configUtils"));
+var defaultImport14 = __toESM(require("@splunk/visualizations-shared/configUtils"));
 __reExport(configUtils_exports, require("@splunk/visualizations-shared/configUtils"));
-var configUtils_default = "default" in defaultImport13 ? defaultImport13.default : defaultImport13;
+var configUtils_default = "default" in defaultImport14 ? defaultImport14.default : defaultImport14;
 
 // src/common/utils/configUtils.ts
 function enhanceConfig(vizConfig) {
   const enhancedConfig = __spreadValues({}, vizConfig);
-  enhancedConfig.editorConfig = vizConfig.editorConfig.map(
-    (config2) => {
-      return __spreadProps(__spreadValues({}, config2), { open: config2.open || false });
-    }
-  );
+  enhancedConfig.editorConfig = vizConfig.editorConfig.map((config2) => {
+    return __spreadProps(__spreadValues({}, config2), { open: config2.open || false });
+  });
   return enhancedConfig;
 }
 function generatePrecisionValues(numPrecisionValues) {
@@ -208,6 +216,15 @@ function generatePrecisionValues(numPrecisionValues) {
   );
 }
 
+// src/common/ThemedDefaults.tsx
+var defaultBackgroundColor = (props) => pick_default({
+  enterprise: {
+    dark: variables_default.black(props),
+    light: variables_default.white(props)
+  },
+  prisma: variables_default.backgroundColorSection(props)
+})(props);
+
 // src/Table/config.ts
 var dataContract = {
   requiredDataSources: [
@@ -221,7 +238,8 @@ var dataContract = {
     primary: (options = {}) => ({
       offset: 0,
       count: options.count ? options.count : 10,
-      requestTotalCount: true
+      requestTotalCount: true,
+      add_summary_to_metadata: true
     })
   }
 };
@@ -314,7 +332,10 @@ var textAlignConfigTable = {
   option: "tableFormat.align",
   editorProps: {
     values: [
-      { label: (0, i18n_exports._)("Auto"), value: "> table | type() | matchValue(tableAlignByType)" },
+      {
+        label: (0, i18n_exports._)("Auto"),
+        value: "> table | type() | matchValue(tableAlignByType)"
+      },
       { label: (0, i18n_exports._)("Left"), value: "left", icon: TextAlignLeft_default },
       { label: (0, i18n_exports._)("Center"), value: "center", icon: TextAlignCenter_default },
       { label: (0, i18n_exports._)("Right"), value: "right", icon: TextAlignRight_default }
@@ -365,13 +386,7 @@ var sequentialColorConfig = [
 ];
 var matchColorConfig = [{ match: "", value: "#5C33FF" }];
 var themes = {
-  defaultBackgroundColor: (props) => pick_default({
-    enterprise: {
-      dark: variables_default.black(props),
-      light: variables_default.backgroundColor(props)
-    },
-    prisma: variables_default.backgroundColorSidebar(props)
-  })(props),
+  defaultBackgroundColor,
   defaultHeaderBackgroundColor: (props) => pick_default({
     enterprise: {
       dark: variables_default.gray20(props),
@@ -391,7 +406,7 @@ var themes = {
       dark: "#0D1012",
       light: variables_default.backgroundColor(props)
     },
-    prisma: variables_default.backgroundColorSidebar(props)
+    prisma: { dark: variables_default.backgroundColorSidebar(props), light: variables_default.white(props) }
   })(props),
   textColor: (props) => pick_default({
     enterprise: variables_default.textColor(props),
@@ -407,10 +422,7 @@ var themes = {
     prisma: variables_default.contentColorInverted(props)
   })(props)
 };
-var backgroundColorPaletteSet = /* @__PURE__ */ new Set([
-  ...colorConstants_exports.COLOR_EDITOR_PALETTE,
-  ...(0, lodash_exports.map)(themes, (t) => (0, lodash_exports.get)(t, "defaultBackgroundColor"))
-]);
+var backgroundColorPaletteSet = /* @__PURE__ */ new Set([...colorConstants_exports.COLOR_EDITOR_PALETTE]);
 var EDITOR_LABEL_WIDTH = 100;
 var editorConfig = [
   {
@@ -461,6 +473,26 @@ var editorConfig = [
             labelWidth: EDITOR_LABEL_WIDTH
           }
         }
+      ],
+      [
+        {
+          label: (0, i18n_exports._)("Footer totals row"),
+          option: "showFooterTotals",
+          editor: "editor.checkbox",
+          editorProps: {
+            labelWidth: EDITOR_LABEL_WIDTH
+          }
+        }
+      ],
+      [
+        {
+          label: (0, i18n_exports._)("Footer percentages row"),
+          option: "showFooterPercentages",
+          editor: "editor.checkbox",
+          editorProps: {
+            labelWidth: EDITOR_LABEL_WIDTH
+          }
+        }
       ]
     ]
   },
@@ -486,7 +518,10 @@ var editorConfig = [
           editor: "editor.select",
           editorProps: {
             values: [
-              { label: (0, i18n_exports._)("Proportional (Default)"), value: "proportional" },
+              {
+                label: (0, i18n_exports._)("Proportional (Default)"),
+                value: "proportional"
+              },
               { label: (0, i18n_exports._)("Monospace"), value: "monospace" }
             ],
             labelPosition: "top",
@@ -501,10 +536,22 @@ var editorConfig = [
           editor: "editor.select",
           editorProps: {
             values: [
-              { label: (0, i18n_exports._)("Extra Small (font 10px, row 24px)"), value: "extraSmall" },
-              { label: (0, i18n_exports._)("Small (font 12px, row 24px)"), value: "small" },
-              { label: (0, i18n_exports._)("Default (font 14px, row 32px)"), value: "default" },
-              { label: (0, i18n_exports._)("Large (font 16px, row 36px)"), value: "large" }
+              {
+                label: (0, i18n_exports._)("Extra Small (font 10px, row 24px)"),
+                value: "extraSmall"
+              },
+              {
+                label: (0, i18n_exports._)("Small (font 12px, row 24px)"),
+                value: "small"
+              },
+              {
+                label: (0, i18n_exports._)("Default (font 14px, row 32px)"),
+                value: "default"
+              },
+              {
+                label: (0, i18n_exports._)("Large (font 16px, row 36px)"),
+                value: "large"
+              }
             ],
             labelPosition: "top",
             labelWidth: EDITOR_LABEL_WIDTH
@@ -602,7 +649,10 @@ var editorConfig = [
                     editor: "editor.radioBar",
                     editorProps: {
                       values: [
-                        { label: (0, i18n_exports._)("Off"), value: false },
+                        {
+                          label: (0, i18n_exports._)("Off"),
+                          value: false
+                        },
                         { label: (0, i18n_exports._)("On"), value: true }
                       ]
                     }
@@ -672,15 +722,6 @@ var config = {
 };
 var config_default = enhanceConfig(config);
 
-// esm-externals:react
-var react_exports = {};
-__export(react_exports, {
-  default: () => react_default
-});
-var defaultImport14 = __toESM(require("react"));
-__reExport(react_exports, require("react"));
-var react_default = "default" in defaultImport14 ? defaultImport14.default : defaultImport14;
-
 // esm-externals:@splunk/themes/getSettingsFromThemedProps
 var getSettingsFromThemedProps_exports = {};
 __export(getSettingsFromThemedProps_exports, {
@@ -1026,9 +1067,14 @@ var Item = styled_components_default.div.attrs(({ width }) => ({
     position: relative;
     background-color: ${(props) => (0, colorUtils_exports.isColor)(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor}};
 `;
-var FixSizeItem = styled_components_default.div.attrs(({ width, height }) => ({
-  style: __spreadValues(__spreadValues({}, width && { width: (0, style_exports.toPx)(width) }), height && { height: (0, style_exports.toPx)(height) })
-}))`
+var FixSizeItem = styled_components_default.div.attrs(
+  ({
+    width,
+    height
+  }) => ({
+    style: __spreadValues(__spreadValues({}, width && { width: (0, style_exports.toPx)(width) }), height && { height: (0, style_exports.toPx)(height) })
+  })
+)`
     position: relative;
     flex-direction: column;
     flex: 1;
@@ -1062,7 +1108,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "27.5.0 - 5cfbc7064",
+        "data-splunk-visualization-version": "28.1.0 - 4a1bff08b",
         width,
         height,
         backgroundColor
@@ -1128,7 +1174,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "27.5.0 - 5cfbc7064"
+  "data-splunk-visualization-version": "28.1.0 - 4a1bff08b"
 })`
     position: relative;
     width: 100%;
@@ -1497,7 +1543,12 @@ var useGetXAndYFields = ({
         y2Fields: options.y2 ? "> y2 | getField()" : void 0,
         fieldTypes: "> primary | getType()"
       };
-      const { xField = "", yFields = [], y2Fields = [], fieldTypes } = Options_exports.Options.evaluate(
+      const {
+        xField = "",
+        yFields = [],
+        y2Fields = [],
+        fieldTypes
+      } = Options_exports.Options.evaluate(
         { options: optionsToEvaluate, context },
         dataSourcesWithOnlyOnePoint,
         () => {
@@ -1778,7 +1829,9 @@ var withDashboardViz = (opts) => {
           return result;
         }
       } catch (e) {
-        console.error(`unexpected error evaluating options: ${e.message}`);
+        if (e instanceof Error) {
+          console.error(`unexpected error evaluating options: ${e.message}`);
+        }
         return {};
       }
       return {};
@@ -1835,9 +1888,13 @@ var withDashboardViz = (opts) => {
         }
         eventCallbackProps[eventCallbackPropName] = (ev) => {
           if (ev && ev.payload) {
-            payload = ev.payload;
+            payload = __spreadValues({}, ev.payload);
           }
-          return onEventTrigger({ originalEvent: ev, payload, type: eventName });
+          return onEventTrigger({
+            originalEvent: ev,
+            payload,
+            type: eventName
+          });
         };
         if (parentKeys) {
           for (let i = parentKeys.length - 1; i >= 0; i -= 1) {
@@ -1934,6 +1991,36 @@ var defaultImport36 = __toESM(require("@splunk/react-ui/Message"));
 __reExport(Message_exports2, require("@splunk/react-ui/Message"));
 var Message_default2 = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
 
+// src/common/utils/tableUtils.ts
+var hasSummarySum = (fields) => {
+  return fields.some((field) => typeof field === "object" && field["summary.sum"] !== void 0);
+};
+var updateSumTotalValues = (primaryDataSource) => {
+  const { data } = primaryDataSource;
+  const { columns, fields } = data;
+  if (!data || !columns || !fields) {
+    return primaryDataSource;
+  }
+  if (hasSummarySum(fields)) {
+    fields.forEach((field, idx) => {
+      let footerTotal = "";
+      if (typeof field === "object" && field["summary.sum"] !== void 0) {
+        footerTotal = field["summary.sum"];
+      }
+      if (columns[idx]) {
+        columns[idx] = [...columns[idx], footerTotal];
+      }
+    });
+  }
+  return primaryDataSource;
+};
+var findFooterTotal = (headersMetadata) => {
+  return headersMetadata.reduce((total, field) => {
+    const value = field["summary.sum"] ? +field["summary.sum"] : 0;
+    return total + value;
+  }, 0);
+};
+
 // src/Table/hooks.tsx
 var isArray = (v) => Array.isArray(v);
 var textOverflowStyles = {
@@ -1955,11 +2042,11 @@ var empty = {};
 var getOverflowStyles = ({ textOverflow }) => {
   return textOverflowStyles[textOverflow] || empty;
 };
-var generateKey = (value = "", i) => `${i}-${value}`;
+var generateKey = (i = "", value = "") => `${value}-${i}`;
 var getTextOverflowType = (columnFormat, columnId, currentColumn) => getAttributeFromColumnFormat("textOverflow", columnFormat, columnId, currentColumn);
 var generateHeader = (value, columnId, i, columnFormat, tableFormat, showInternalFields) => {
   const ret = {
-    key: generateKey(value, i),
+    key: generateKey(value, String(i)),
     value,
     align: "left",
     columnId,
@@ -2218,6 +2305,7 @@ var validValueSelector = (v1, v2, v3, defaultValue) => {
 };
 var useTable = (tableArgs = {}) => {
   let { table = [], headers = [], columnIds = [] } = tableArgs;
+  const { headersMetadata = [] } = tableArgs;
   const {
     headerVisibility = "inline",
     showRowNumbers = false,
@@ -2288,21 +2376,19 @@ var useTable = (tableArgs = {}) => {
   }
   const tableHeader = {
     visibility: visualization_schemas_exports.validHeaderVisibilities.indexOf(headerVisibility) >= 0 ? headerVisibility : "inline",
-    cells: table.map(
-      (f, i) => {
-        if (i < headers.length) {
-          return generateHeader(
-            headers[i],
-            columnIds[i],
-            i,
-            columnFormat,
-            tableFormat,
-            showInternalFields
-          );
-        }
-        return generateHeader("", "", i, columnFormat, tableFormat, showInternalFields);
+    cells: table.map((f, i) => {
+      if (i < headers.length) {
+        return generateHeader(
+          headers[i],
+          columnIds[i],
+          i,
+          columnFormat,
+          tableFormat,
+          showInternalFields
+        );
       }
-    ),
+      return generateHeader("", "", i, columnFormat, tableFormat, showInternalFields);
+    }),
     style: {
       backgroundColor: (0, lodash_exports.has)(tableFormat, "headerBackgroundColor") && (0, colorUtils_exports.isColor)(tableFormat.headerBackgroundColor) && tableFormat.headerBackgroundColor || void 0,
       color: (0, lodash_exports.has)(tableFormat, "headerColor") && (0, colorUtils_exports.isColor)(tableFormat.headerColor) && tableFormat.headerColor || void 0
@@ -2311,6 +2397,9 @@ var useTable = (tableArgs = {}) => {
   const tableBody = {
     rows: []
   };
+  const tableFooter = {
+    rows: []
+  };
   for (let currentRow = 0; currentRow < longestColumnLength; currentRow += 1) {
     const row = {
       key: `row-${currentRow}`,
@@ -2363,11 +2452,53 @@ var useTable = (tableArgs = {}) => {
         showCell
       });
     });
-    tableBody.rows.push(row);
+    if (hasSummarySum(headersMetadata) && currentRow === longestColumnLength - 1) {
+      row.key = "footer-totals";
+      tableFooter.rows.push(row);
+      row.cells = row.cells.map((cell, i) => {
+        const headerCell = tableHeader.cells[i];
+        let newCell = __spreadValues({}, cell);
+        if (headerCell) {
+          newCell = __spreadProps(__spreadValues({}, newCell), {
+            style: __spreadProps(__spreadValues({}, newCell.style), {
+              backgroundColor: tableFormat.headerBackgroundColor
+            })
+          });
+        }
+        if (i === 0 && showRowNumbers) {
+          newCell = __spreadProps(__spreadValues({}, newCell), {
+            value: "",
+            rawValue: ""
+          });
+        }
+        return newCell;
+      });
+    } else {
+      tableBody.rows.push(row);
+    }
+  }
+  if (tableFooter.rows.length === 1 && hasSummarySum(headersMetadata)) {
+    const totalRowIndex = tableFooter.rows[0].index;
+    const footerTotal = findFooterTotal(headersMetadata);
+    const percentageRow = {
+      key: "footer-percentage",
+      index: totalRowIndex + 1,
+      cells: tableFooter.rows[0].cells.map((cell) => {
+        let percentageValue = "";
+        if (cell.rawValue !== "") {
+          percentageValue = footerTotal ? `${(0, numberUtils_exports.formatNumber)(+cell.rawValue / footerTotal * 100, 2)}%` : "";
+        }
+        return __spreadProps(__spreadValues({}, cell), {
+          value: percentageValue
+        });
+      })
+    };
+    tableFooter.rows.push(percentageRow);
   }
   return {
     tableHeader,
-    tableBody
+    tableBody,
+    tableFooter
   };
 };
 
@@ -2442,6 +2573,7 @@ var StyledTooltip = styled_components_default.div`
     padding: 3px 8px;
     font-size: 12px;
 `;
+var preventDefault = (e) => e.preventDefault();
 var _SparkLine = class _SparkLine extends react_exports.Component {
   constructor(props, ...rest) {
     super(props, ...rest);
@@ -2452,21 +2584,99 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
     });
     this.state = {
       anchor: null,
-      currentPointX: null,
-      open: false,
-      rectArea: null,
-      tooltip: null
+      activeIndex: 0,
+      hoveredIndex: null,
+      componentIsFocused: false
     };
-    this.titleId = (0, id_exports.createDOMID)();
+    this.titleId = (0, id_exports.createDOMID)("sparkline-title");
+    this.pointRefs = [];
+    this.containerRef = react_default.createRef();
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleMouseOver = this.handleMouseOver.bind(this);
+    this.handleMouseLeave = this.handleMouseLeave.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+  }
+  handleFocus(event) {
+    const { target } = event;
+    const { pointIndex: pointIndexStr } = target.dataset || {};
+    const { activeIndex, componentIsFocused, hoveredIndex } = this.state;
+    if (pointIndexStr !== void 0) {
+      const pointIndex = parseInt(pointIndexStr, 10);
+      if (activeIndex !== pointIndex || !componentIsFocused || hoveredIndex !== null) {
+        this.setState({
+          activeIndex: pointIndex,
+          hoveredIndex: null,
+          componentIsFocused: true
+        });
+      }
+    } else if (this.pointRefs.length > 0) {
+      const indexToFocus = activeIndex ? Math.min(this.pointRefs.length - 1, activeIndex) : 0;
+      this.pointRefs[indexToFocus].focus();
+    }
+  }
+  handleBlur(event) {
+    if (this.containerRef.current && !this.containerRef.current.contains(event.relatedTarget)) {
+      this.setState({ componentIsFocused: false });
+    }
+  }
+  handleKeyDown(event) {
+    const { data } = this.props;
+    const { activeIndex } = this.state;
+    const numPoints = data.length;
+    if (numPoints === 0) {
+      return;
+    }
+    const allowedKeys = ["ArrowLeft", "ArrowRight", "Home", "End"];
+    if (!allowedKeys.includes(event.key)) {
+      return;
+    }
+    let newIndex = activeIndex;
+    switch (event.key) {
+      case "Home":
+        newIndex = 0;
+        break;
+      case "End":
+        newIndex = numPoints - 1;
+        break;
+      case "ArrowLeft":
+        newIndex = Math.max(0, activeIndex - 1);
+        break;
+      case "ArrowRight":
+        newIndex = Math.min(numPoints - 1, activeIndex + 1);
+        break;
+      default:
+        return;
+    }
+    if (newIndex !== activeIndex) {
+      event.preventDefault();
+      if (this.pointRefs[newIndex]) {
+        this.pointRefs[newIndex].focus();
+      }
+    }
+  }
+  handleMouseOver(event) {
+    const pointIndexStr = event.target.dataset && event.target.dataset.pointIndex;
+    if (pointIndexStr !== void 0) {
+      const pointIndex = parseInt(pointIndexStr, 10);
+      if (this.state.hoveredIndex !== pointIndex) {
+        this.setState({ hoveredIndex: pointIndex });
+      }
+    }
+  }
+  handleMouseLeave() {
+    if (this.state.hoveredIndex !== null) {
+      this.setState({ hoveredIndex: null });
+    }
   }
   getMax() {
     const { data, acceptNull, yMax } = this.props;
-    const dataMax = () => acceptNull ? (0, lodash_exports.max)(this.fillNull(data)) : (0, lodash_exports.max)(data);
+    const dataMax = () => acceptNull ? (0, lodash_exports.max)(this.fillNull()) : (0, lodash_exports.max)(data);
     return yMax !== void 0 ? yMax : dataMax();
   }
   getMin() {
     const { data, acceptNull, yMin } = this.props;
-    const dataMin = () => acceptNull ? (0, lodash_exports.min)(this.fillNull(data)) : (0, lodash_exports.min)(data);
+    const dataMin = () => acceptNull ? (0, lodash_exports.min)(this.fillNull()) : (0, lodash_exports.min)(data);
     return yMin !== void 0 ? yMin : dataMin();
   }
   /**
@@ -2546,15 +2756,14 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
     })).map((p) => [p.x, p.y]);
   }
   /**
-   * Renders rect area for helping figure out which is the nearest point so that
-   * render related cursor and tooltip.
+   * Renders rect area for each datapoint for interactions and screen reader support
    * @param {Array} points - array of points coordination.
    * @param {Number} xMargin - margin of x axis.
    * @return {Array} array of svg rect objects
    * @private
    */
   renderRect(points, xMargin) {
-    const { data, height } = this.props;
+    const { data, height, showTooltip } = this.props;
     const xUnit = this.getXUnit(xMargin);
     return points.map((p, i) => (
       /* eslint-disable react/no-array-index-key */
@@ -2562,20 +2771,20 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
         "rect",
         {
           key: `${i}_${p[0]}`,
+          role: "img",
+          "aria-label": `Value: ${data[i] === null ? "N/A" : data[i]}, point ${i + 1} of ${data.length}`,
           "data-test": `rect-${i}`,
+          "data-point-index": i,
+          tabIndex: showTooltip && this.state.activeIndex === i ? 0 : -1,
+          ref: (el) => {
+            this.pointRefs[i] = el;
+          },
           x: p[0] - xUnit / 2 <= 0 ? 0 : p[0] - xUnit / 2,
           y: 0,
           width: i === 0 && data.length !== 1 ? xUnit / 2 : xUnit,
           height,
           style: { fillOpacity: 0 },
-          onMouseOver: (e) => {
-            this.setState({
-              open: data[i] !== null,
-              rectArea: data[i] === null ? null : e.target,
-              tooltip: data[i],
-              currentPointX: p[0]
-            });
-          }
+          onMouseDown: preventDefault
         }
       )
     ));
@@ -2611,22 +2820,16 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
       }
     )));
   }
-  renderCursor() {
-    const {
-      cursorStroke,
-      cursorStrokeWidth,
-      cursorStrokeLinecap,
-      cursorStrokeDasharray,
-      height
-    } = this.props;
-    return this.state.rectArea !== null && /* @__PURE__ */ react_default.createElement(
+  renderCursor(currentPointX, shouldRender) {
+    const { cursorStroke, cursorStrokeWidth, cursorStrokeLinecap, cursorStrokeDasharray, height } = this.props;
+    return shouldRender && /* @__PURE__ */ react_default.createElement(
       "line",
       {
         "data-test": "cursor",
         ref: this.handleCursorMount,
-        x1: this.state.currentPointX,
+        x1: currentPointX,
         y1: 0,
-        x2: this.state.currentPointX,
+        x2: currentPointX,
         y2: height,
         style: {
           stroke: cursorStroke,
@@ -2637,19 +2840,20 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
       }
     );
   }
-  renderTooltip() {
-    return this.state.anchor !== null && /* @__PURE__ */ react_default.createElement(
+  renderTooltip(tooltipValue, isOpen) {
+    const { anchor } = this.state;
+    return /* @__PURE__ */ react_default.createElement(
       Popover_default,
       {
         "data-test": "tooltip",
-        open: this.state.open,
-        anchor: this.state.anchor,
-        "data-test-value": this.state.tooltip,
+        open: isOpen,
+        anchor,
+        "data-test-value": tooltipValue,
         appearance: "inverted",
         defaultPlacement: "above",
         animation: false
       },
-      /* @__PURE__ */ react_default.createElement(StyledTooltip, null, this.state.anchor !== null ? this.state.tooltip : void 0)
+      /* @__PURE__ */ react_default.createElement(StyledTooltip, null, tooltipValue)
     );
   }
   /**
@@ -2720,39 +2924,69 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
       width,
       title
     } = this.props;
+    const { activeIndex, hoveredIndex, componentIsFocused } = this.state;
     if (data.length === 0) {
       return null;
     }
+    if (this.pointRefs.length !== data.length) {
+      this.pointRefs.length = data.length;
+    }
     const xMargin = endDotRadius + endDotStrokeWidth / 2;
     const yMargin = Math.max(lineStrokeWidth / 2, endDotRadius + endDotStrokeWidth / 2);
     const points = this.dataToPoints(xMargin, yMargin);
     const dotsToShow = Math.max(showEndDot && 1, (0, lodash_exports.isFinite)(endDotCount) && endDotCount > 0 && endDotCount);
+    let currentPointX = null;
+    let tooltipValue = null;
+    let showCursorAndTooltip = false;
+    let interactiveProps = {};
+    if (showTooltip) {
+      const isHovered = hoveredIndex !== null;
+      const shouldDisplayInteractiveElements = (isHovered || componentIsFocused) && data.length > 0;
+      if (shouldDisplayInteractiveElements) {
+        const displayIndex = isHovered ? hoveredIndex : activeIndex;
+        if (displayIndex !== null && displayIndex >= 0 && data.length > displayIndex && points.length > displayIndex) {
+          const displayPointCoords = points[displayIndex];
+          if (displayPointCoords) {
+            [currentPointX] = displayPointCoords;
+          }
+          tooltipValue = data[displayIndex];
+          showCursorAndTooltip = currentPointX !== null;
+        }
+      }
+      interactiveProps = {
+        onKeyDown: this.handleKeyDown,
+        onMouseOver: this.handleMouseOver,
+        onMouseLeave: this.handleMouseLeave,
+        onFocus: this.handleFocus,
+        onBlur: this.handleBlur
+      };
+    }
+    const ariaLabel = title || (0, i18n_exports._)("Source count over time sparkline trend");
     return /* @__PURE__ */ react_default.createElement(
       "div",
-      __spreadValues({
+      __spreadValues(__spreadValues({
         "data-test": "line",
         "data-test-type": isArea ? "area" : "line",
-        onMouseOut: () => {
-          this.setState({
-            open: false,
-            anchor: null,
-            rectArea: null,
-            currentPointX: null
-          });
-        },
-        ref: elementRef
-      }, (0, lodash_exports.omit)(this.props, (0, lodash_exports.keys)(_SparkLine.propTypes))),
+        role: "group",
+        ref: (el) => {
+          this.containerRef.current = el;
+          if (typeof elementRef === "function") {
+            elementRef(el);
+          } else if (elementRef && typeof elementRef === "object") {
+            elementRef.current = el;
+          }
+        }
+      }, interactiveProps), (0, lodash_exports.omit)(this.props, (0, lodash_exports.keys)(_SparkLine.propTypes))),
       /* @__PURE__ */ react_default.createElement(
         StyledSvg,
         {
           height,
           width,
-          role: "img",
           "aria-labelledby": this.titleId,
           "data-test": "sparkline-svg"
         },
-        /* @__PURE__ */ react_default.createElement("title", { id: this.titleId, "data-test": "sparkline-title" }, title || (0, i18n_exports._)("Source count over time sparkline trend")),
-        /* @__PURE__ */ react_default.createElement("g", null, this.renderCursor(), this.renderPolyline(points), this.renderArea(points), dotsToShow ? this.renderEndDots(points, dotsToShow, xMargin) : null, showTooltip ? this.renderRect(points, xMargin) : null, showTooltip ? this.renderTooltip() : null)
+        /* @__PURE__ */ react_default.createElement("title", { id: this.titleId, "data-test": "sparkline-title" }, ariaLabel),
+        /* @__PURE__ */ react_default.createElement("g", null, showTooltip ? this.renderCursor(currentPointX, showCursorAndTooltip) : null, this.renderPolyline(points), this.renderArea(points), dotsToShow ? this.renderEndDots(points, dotsToShow, xMargin) : null, this.renderRect(points, xMargin), showTooltip ? this.renderTooltip(tooltipValue, showCursorAndTooltip) : null)
       )
     );
   }
@@ -2871,7 +3105,7 @@ var SparklineCell = ({
     data = data.slice(1);
   }
   react_exports.useLayoutEffect(() => {
-    setHeight(cellEl == null ? void 0 : cellEl.offsetHeight);
+    setHeight((cellEl == null ? void 0 : cellEl.offsetHeight) || 20);
   }, [cellEl]);
   const cellStyle = react_exports.useMemo(
     () => __spreadProps(__spreadValues({}, cell.style), {
@@ -2886,6 +3120,7 @@ var SparklineCell = ({
     () => ({
       paddingLeft: `${paddingLeftRight}px`,
       paddingTop: `${paddingTopBottom}px`,
+      // eslint-disable-next-line no-unsafe-optional-chaining
       width: width === "auto" ? `${(cellEl == null ? void 0 : cellEl.offsetWidth) - paddingLeftRight * 2}px` : `${width}px`,
       height: `${height - paddingTopBottom * 2}px`
     }),
@@ -2921,14 +3156,12 @@ var SparklineCell = ({
 SparklineCell.displayName = "SparklineCell";
 
 // src/Table/PureTable.tsx
-var MINIMUM_COLUMN_SIZE = 30;
+var MINIMUM_COLUMN_SIZE = 60;
 var INITIAL_UNSET_COLUMN_WIDTH = 90;
 var NonVisibleTableHead = styled_components_default(Table_default.Head)`
     pointer-events: none;
     & [data-test='head-cell'] > div {
-        height: 0;
-        padding: 0;
-        margin: 0;
+        display: none;
     }
 `;
 var FixedTableHead = styled_components_default(Table_default.Head)`
@@ -2945,10 +3178,7 @@ var TableHeadCell = styled_components_default(Table_default.HeadCell)`
 `;
 var VizTableContainer = styled_components_default.div`
     box-sizing: border-box;
-    padding: ${pick_default({
-  enterprise: variables_default.spacingHalf,
-  prisma: variables_default.spacingSmall
-})};
+    padding: ${variables_default.spacingSmall};
     background-color: ${(props) => (0, colorUtils_exports.isColor)(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor};
     display: flex;
     flex-flow: column nowrap;
@@ -2958,6 +3188,19 @@ var VizTableContainer = styled_components_default.div`
     * > td:hover {
         color: ${({ isCellClickable }) => isCellClickable ? variables_default.linkColor : variables_default.textColor};
     }
+
+    /* footer totals row styling */
+    tr[data-test='footer-row-totals'] td[data-test='cell'] {
+        color: ${variables_default.contentColorActive} !important;
+        cursor: default;
+        font-weight: bold;
+    }
+
+    /* footer percentage row styling */
+    tr[data-test='footer-row-percentages'] td[data-test='cell'] {
+        color: ${variables_default.contentColorDefault} !important;
+        cursor: default;
+    }
 `;
 VizTableContainer.displayName = "VizTableContainer";
 var PAGINATOR_CONTAINER_HEIGHT = 38;
@@ -2971,11 +3214,9 @@ var SUITableContainer = styled_components_default.div`
     box-sizing: border-box;
     flex-grow: 1;
     overflow: hidden;
+
     ${({ width, height, isPaging, theme }) => {
-  const padding = pick_default({
-    enterprise: variables_default.spacingHalf({ theme }),
-    prisma: variables_default.spacingSmall({ theme })
-  })({ theme });
+  const padding = variables_default.spacingSmall({ theme });
   const paddingOffset = parseInt(padding, 10) * 2;
   return (0, style_exports.toDimension)({
     width: width - paddingOffset,
@@ -2995,7 +3236,7 @@ var SUITableContainer = styled_components_default.div`
         `}
 
     ${({ headerStyle }) => headerStyle && headerStyle.color && styled_components_exports.css`
-            & [data-test='head-cell'] > button > span {
+            & [data-test='head-cell'] > div > button > span {
                 color: ${headerStyle.color};
             }
         `}
@@ -3030,16 +3271,24 @@ var withEmptyTableMessage = (Viz) => {
       tableFormat,
       columnFormat,
       paginatorParams,
-      count
+      count,
+      headersMetadata
     } = props;
-    const { tableHeader, tableBody } = useTable({
+    const { tableHeader, tableBody, tableFooter } = useTable({
       headers,
       columnIds,
       table,
       headerVisibility,
       showRowNumbers,
       showInternalFields,
-      tableFormat: __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, tableFormat), (tableFormat == null ? void 0 : tableFormat.headerAlign) && { headerAlign: (0, lodash_exports.cloneDeep)(tableFormat.headerAlign) }), (tableFormat == null ? void 0 : tableFormat.align) && { align: (0, lodash_exports.cloneDeep)(tableFormat.align) }), (tableFormat == null ? void 0 : tableFormat.cellTypes) && { cellTypes: (0, lodash_exports.cloneDeep)(tableFormat.cellTypes) }), (tableFormat == null ? void 0 : tableFormat.data) && { data: (0, lodash_exports.cloneDeep)(tableFormat.data) }),
+      headersMetadata,
+      tableFormat: __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, tableFormat), (tableFormat == null ? void 0 : tableFormat.headerAlign) && {
+        headerAlign: (0, lodash_exports.cloneDeep)(tableFormat.headerAlign)
+      }), (tableFormat == null ? void 0 : tableFormat.align) && {
+        align: (0, lodash_exports.cloneDeep)(tableFormat.align)
+      }), (tableFormat == null ? void 0 : tableFormat.cellTypes) && {
+        cellTypes: (0, lodash_exports.cloneDeep)(tableFormat.cellTypes)
+      }), (tableFormat == null ? void 0 : tableFormat.data) && { data: (0, lodash_exports.cloneDeep)(tableFormat.data) }),
       columnFormat,
       paginationOffset: paginatorParams == null ? void 0 : paginatorParams.current,
       count
@@ -3047,7 +3296,7 @@ var withEmptyTableMessage = (Viz) => {
     if (tableBody.rows.length === 0) {
       return /* @__PURE__ */ react_exports.createElement(Message_default2, { type: "warning" }, (0, i18n_exports._)("No data!"));
     }
-    return /* @__PURE__ */ react_exports.createElement(Viz, __spreadProps(__spreadValues({}, props), { tableHeader, tableBody }));
+    return /* @__PURE__ */ react_exports.createElement(Viz, __spreadProps(__spreadValues({}, props), { tableHeader, tableBody, tableFooter }));
   };
   Wrapper.displayName = "PureTableWrapper";
   return Wrapper;
@@ -3091,7 +3340,10 @@ var PureTable = (props) => {
     backgroundColor,
     tableHeader,
     tableBody,
+    tableFooter,
     showRowNumbers,
+    showFooterTotals,
+    showFooterPercentages,
     sortParams: { currentSortKey, currentSortDir, onSort },
     paginatorParams: _b
   } = _a, _c = _b, { isPaging, onChange: paginatorOnChange } = _c, paginatorProps = __objRest(_c, ["isPaging", "onChange"]), {
@@ -3137,7 +3389,11 @@ var PureTable = (props) => {
   );
   const drilldownHandler = react_exports.useCallback(
     (e) => {
-      const element = e.target;
+      var _a2;
+      const element = (_a2 = e.target) == null ? void 0 : _a2.closest("[data-row-index]");
+      if (!element) {
+        return;
+      }
       const row = element.getAttribute("data-row-index");
       const col = element.getAttribute("data-col-index");
       const arrayIndex = element.getAttribute("data-array-index") || -1;
@@ -3191,9 +3447,6 @@ var PureTable = (props) => {
       e.stopPropagation();
     }
   }, []);
-  const handleEventHeadCellMouseUp = react_exports.useCallback(() => {
-    setResizing(false);
-  }, [setResizing]);
   const handleKeyDown = (e) => {
     if (e.keyCode !== 13) {
       return;
@@ -3219,7 +3472,6 @@ var PureTable = (props) => {
     if (mode === "edit") {
       debouncedOnColumnFormatChange(updatedCF);
     }
-    setResizing(false);
   };
   const fontMapped = fontMap[font] || fontMap.proportional;
   const fontSizeMapped = fontSizeMap[fontSize] || fontSizeMap.default;
@@ -3235,6 +3487,7 @@ var PureTable = (props) => {
   }).length;
   const isFullyFixed = visibleHeaderCells.length === numberOfFixedHeaders;
   const isHeaderHidden = headerVisibility === "none";
+  const onSortToUse = isResizing ? lodash_exports.noop : onSort;
   return /* @__PURE__ */ react_exports.createElement(
     VizTableContainer,
     {
@@ -3297,9 +3550,8 @@ var PureTable = (props) => {
                 sortDir: sortKey === currentSortKey ? currentSortDir : "none",
                 width: (_b2 = (_a2 = columns[value]) == null ? void 0 : _a2.width) != null ? _b2 : INITIAL_UNSET_COLUMN_WIDTH,
                 onMouseDown: handleEventHeadCellMouseDown,
-                onMouseUp: handleEventHeadCellMouseUp,
                 value,
-                onSort: isResizing || showRowNumbers && value === "#" || isHeaderHidden ? null : onSort,
+                onSort: showRowNumbers && value === "#" || isHeaderHidden ? null : onSortToUse,
                 resizable: !isHeaderHidden,
                 style: showRowNumbers && value === "#" ? __spreadProps(__spreadValues({}, style), { cursor: "auto" }) : style,
                 headerVisibility
@@ -3308,32 +3560,66 @@ var PureTable = (props) => {
           }
         )),
         /* @__PURE__ */ react_exports.createElement(Table_default.Body, null, tableBody.rows.map(
-          (row) => /* @__PURE__ */ react_exports.createElement(Table_default.Row, { key: row.key }, row.cells.filter((c) => c.showCell).map(
-            (cell) => {
-              var _a2, _b2;
-              return /* @__PURE__ */ react_exports.createElement(SwitchTableCell, { key: cell.key, type: cell.cellType }, /* @__PURE__ */ react_exports.createElement(
-                TextCell,
-                {
-                  cell,
-                  useMouseOverEffect: !!onCellClick
-                }
-              ), /* @__PURE__ */ react_exports.createElement(
-                SparklineCell,
-                {
-                  cell,
-                  useMouseOverEffect: !!onCellClick,
-                  width: (_b2 = (_a2 = columns[cell.header]) == null ? void 0 : _a2.width) != null ? _b2 : "auto"
-                }
-              ), /* @__PURE__ */ react_exports.createElement(
-                ArrayCell,
-                {
-                  cell,
-                  useMouseOverEffect: !!onCellClick
-                }
-              ));
-            }
-          ))
-        ))
+          (row) => /* @__PURE__ */ react_exports.createElement(Table_default.Row, { key: row.key }, row.cells.filter((c) => c.showCell).map((cell) => {
+            var _a2, _b2;
+            return /* @__PURE__ */ react_exports.createElement(SwitchTableCell, { key: cell.key, type: cell.cellType }, /* @__PURE__ */ react_exports.createElement(
+              TextCell,
+              {
+                cell,
+                useMouseOverEffect: !!onCellClick
+              }
+            ), /* @__PURE__ */ react_exports.createElement(
+              SparklineCell,
+              {
+                cell,
+                useMouseOverEffect: !!onCellClick,
+                width: (_b2 = (_a2 = columns[cell.header]) == null ? void 0 : _a2.width) != null ? _b2 : "auto"
+              }
+            ), /* @__PURE__ */ react_exports.createElement(
+              ArrayCell,
+              {
+                cell,
+                useMouseOverEffect: !!onCellClick
+              }
+            ));
+          }))
+        ), tableFooter && /* @__PURE__ */ react_exports.createElement(react_exports.Fragment, null, showFooterTotals && tableFooter.rows[0] && /* @__PURE__ */ react_exports.createElement(
+          Table_default.Row,
+          {
+            key: tableFooter.rows[0].key,
+            "data-test": "footer-row-totals",
+            "data-row-index": "0"
+          },
+          tableFooter.rows[0].cells.filter((c) => c.showCell).map(
+            (c) => /* @__PURE__ */ react_exports.createElement(
+              TextCell,
+              {
+                key: `footer-total-cell-${c.key}`,
+                cell: c,
+                useMouseOverEffect: false,
+                "data-test": "footer-total-cell"
+              }
+            )
+          )
+        ), showFooterPercentages && tableFooter.rows[1] && /* @__PURE__ */ react_exports.createElement(
+          Table_default.Row,
+          {
+            key: tableFooter.rows[1].key,
+            "data-test": "footer-row-percentages",
+            "data-row-index": "1"
+          },
+          tableFooter.rows[1].cells.filter((c) => c.showCell).map(
+            (c) => /* @__PURE__ */ react_exports.createElement(
+              TextCell,
+              {
+                key: `footer-percent-cell-${c.key}`,
+                cell: c,
+                useMouseOverEffect: false,
+                "data-test": "footer-percent-cell"
+              }
+            )
+          )
+        )))
       )
     ),
     isPaging ? /* @__PURE__ */ react_exports.createElement(PaginatorContainer, null, /* @__PURE__ */ react_exports.createElement(Paginator_default, __spreadValues({ onChange: paginatorOnChange }, paginatorProps))) : null
@@ -3363,6 +3649,7 @@ PureTable.propTypes = {
   onCellClick: prop_types_exports.func,
   paginatorParams: PaginatorParamsPropTypes,
   showRowNumbers: prop_types_exports.bool,
+  showFooterTotals: prop_types_exports.bool,
   sortParams: SortParamsPropTypes,
   table: prop_types_exports.arrayOf(prop_types_exports.arrayOf(cellDataType)),
   tableFormat: prop_types_exports.shape({
@@ -3396,6 +3683,8 @@ PureTable.defaultProps = {
     onChange: lodash_exports.noop
   },
   showRowNumbers: false,
+  showFooterTotals: false,
+  showFooterPercentages: false,
   sortParams: {
     onSort: lodash_exports.noop
   },
@@ -3413,8 +3702,16 @@ var PureTable_default = withEmptyTableMessage(FixedSizeContainer_default(PureTab
 // src/Table/Table.tsx
 var computeVizProps = (_a) => {
   var props = __objRest(_a, []);
-  var _a2, _b, _c, _d;
+  var _a2, _b, _c, _d, _e, _f, _g;
   const vizProps = __spreadValues({}, props);
+  vizProps.columnIds = (_d = (_c = (_b = (_a2 = vizProps.dataSources) == null ? void 0 : _a2.primary) == null ? void 0 : _b.data) == null ? void 0 : _c.fields.map((field) => {
+    var _a3;
+    return (_a3 = field.name) != null ? _a3 : field;
+  })) != null ? _d : [];
+  if (vizProps.columnIds.length === 0) {
+    vizProps.columnIds = vizProps.headers;
+  }
+  vizProps.headersMetadata = (_g = (_f = (_e = vizProps.dataSources) == null ? void 0 : _e.primary) == null ? void 0 : _f.data) == null ? void 0 : _g.fields;
   if (vizProps.columnFormat) {
     const columns = vizProps.columnFormat;
     const themeRowBackgroundColorOdd = vizProps.themeFunc("rowBackgroundColorOdd");
@@ -3436,15 +3733,10 @@ var computeVizProps = (_a) => {
           (color) => color || themeTextColor
         );
       }
-      vizProps.columnFormat[columnKey] = __spreadValues(__spreadValues(__spreadValues({}, vizProps.columnFormat[columnKey]), columnProperties.rowBackgroundColors && { rowBackgroundColors }), columnProperties.rowColors && { rowColors });
+      vizProps.columnFormat[columnKey] = __spreadValues(__spreadValues(__spreadValues({}, vizProps.columnFormat[columnKey]), columnProperties.rowBackgroundColors && {
+        rowBackgroundColors
+      }), columnProperties.rowColors && { rowColors });
     });
-    vizProps.columnIds = (_d = (_c = (_b = (_a2 = vizProps.dataSources) == null ? void 0 : _a2.primary) == null ? void 0 : _b.data) == null ? void 0 : _c.fields.map((field) => {
-      var _a3;
-      return (_a3 = field.name) != null ? _a3 : field;
-    })) != null ? _d : [];
-    if (vizProps.columnIds.length === 0) {
-      vizProps.columnIds = vizProps.headers;
-    }
   }
   if (vizProps.onOptionsChange) {
     const handleColumnFormatChange = (updatedColumnFormat) => {
@@ -3469,12 +3761,31 @@ var computeVizProps = (_a) => {
   }
   return vizProps;
 };
-var Table = withDashboardViz_default({
-  ReactViz: PureTable_default,
-  vizConfig: config_default,
-  disableEditModeCover: true,
-  computeVizProps
-});
+var withTableFooter = (Viz) => {
+  const VizWithTableFooter = (_a) => {
+    var _b = _a, { dataSources } = _b, otherProps = __objRest(_b, ["dataSources"]);
+    var _a2;
+    if (!((_a2 = dataSources == null ? void 0 : dataSources.primary) == null ? void 0 : _a2.data)) {
+      return /* @__PURE__ */ react_exports.createElement(Viz, __spreadValues({}, otherProps));
+    }
+    const clonedDataSources = (0, lodash_exports.cloneDeep)(dataSources);
+    const { primary } = clonedDataSources;
+    clonedDataSources.primary = updateSumTotalValues(primary);
+    return /* @__PURE__ */ react_exports.createElement(Viz, __spreadValues({ dataSources: clonedDataSources }, otherProps));
+  };
+  VizWithTableFooter.propTypes = Viz.propTypes;
+  VizWithTableFooter.defaultProps = Viz.defaultProps;
+  VizWithTableFooter.config = Viz.config;
+  return VizWithTableFooter;
+};
+var Table = withTableFooter(
+  withDashboardViz_default({
+    ReactViz: PureTable_default,
+    vizConfig: config_default,
+    disableEditModeCover: true,
+    computeVizProps
+  })
+);
 var { themes: themes2 } = config_default;
 var Table_default2 = Table;
 //# sourceMappingURL=Table.js.map