highcharts 12.2.0 → 12.4.0

package/modules/export-data.src.js

@@ -1,10 +1,10 @@
 /**
- * @license Highcharts JS v12.2.0 (2025-04-07)
+ * @license Highcharts JS v12.4.0 (2025-09-04)
  * @module highcharts/modules/export-data
  * @requires highcharts
  * @requires highcharts/modules/exporting
  *
- * Exporting module
+ * Export data module
  *
  * (c) 2010-2025 Torstein Honsi
  *
@@ -12,14 +12,14 @@
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(root["_Highcharts"], root["_Highcharts"]["AST"]);
+		module.exports = factory(root["_Highcharts"], root["_Highcharts"]["AST"], root["_Highcharts"]["Chart"]);
 	else if(typeof define === 'function' && define.amd)
-		define("highcharts/modules/export-data", ["highcharts/highcharts"], function (amd1) {return factory(amd1,amd1["AST"]);});
+		define("highcharts/modules/export-data", ["highcharts/highcharts"], function (amd1) {return factory(amd1,amd1["AST"],amd1["Chart"]);});
 	else if(typeof exports === 'object')
-		exports["highcharts/modules/export-data"] = factory(root["_Highcharts"], root["_Highcharts"]["AST"]);
+		exports["highcharts/modules/export-data"] = factory(root["_Highcharts"], root["_Highcharts"]["AST"], root["_Highcharts"]["Chart"]);
 	else
-		root["Highcharts"] = factory(root["Highcharts"], root["Highcharts"]["AST"]);
-})(typeof window === 'undefined' ? this : window, (__WEBPACK_EXTERNAL_MODULE__944__, __WEBPACK_EXTERNAL_MODULE__660__) => {
+		root["Highcharts"] = factory(root["Highcharts"], root["Highcharts"]["AST"], root["Highcharts"]["Chart"]);
+})(typeof window === 'undefined' ? this : window, (__WEBPACK_EXTERNAL_MODULE__944__, __WEBPACK_EXTERNAL_MODULE__660__, __WEBPACK_EXTERNAL_MODULE__960__) => {
 return /******/ (() => { // webpackBootstrap
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
@@ -36,6 +36,13 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__660__;
 
 module.exports = __WEBPACK_EXTERNAL_MODULE__944__;
 
+/***/ }),
+
+/***/ 960:
+/***/ ((module) => {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__960__;
+
 /***/ })
 
 /******/ 	});
@@ -125,6 +132,8 @@ var highcharts_commonjs_highcharts_commonjs2_highcharts_root_Highcharts_default
  * */
 
 const { isSafari, win, win: { document: doc } } = (highcharts_commonjs_highcharts_commonjs2_highcharts_root_Highcharts_default());
+
+const { error } = (highcharts_commonjs_highcharts_commonjs2_highcharts_root_Highcharts_default());
 /* *
  *
  *  Constants
@@ -138,12 +147,15 @@ const domurl = win.URL || win.webkitURL || win;
  * */
 /**
  * Convert base64 dataURL to Blob if supported, otherwise returns undefined.
+ *
  * @private
  * @function Highcharts.dataURLtoBlob
+ *
  * @param {string} dataURL
- *        URL to convert
- * @return {string|undefined}
- *         Blob
+ * URL to convert.
+ *
+ * @return {string | undefined}
+ * Blob.
  */
 function dataURLtoBlob(dataURL) {
     const parts = dataURL
@@ -170,11 +182,11 @@ function dataURLtoBlob(dataURL) {
  *
  * @private
  * @function Highcharts.downloadURL
- * @param {string|global.URL} dataURL
- *        The dataURL/Blob to download
+ *
+ * @param {string | global.URL} dataURL
+ * The dataURL/Blob to download.
  * @param {string} filename
- *        The name of the resulting file (w/extension)
- * @return {void}
+ * The name of the resulting file (w/extension).
  */
 function downloadURL(dataURL, filename) {
     const nav = win.navigator, a = doc.createElement('a');
@@ -224,6 +236,35 @@ function downloadURL(dataURL, filename) {
         }
     }
 }
+/**
+ * Asynchronously downloads a script from a provided location.
+ *
+ * @private
+ * @function Highcharts.getScript
+ *
+ * @param {string} scriptLocation
+ * The location for the script to fetch.
+ */
+function getScript(scriptLocation) {
+    return new Promise((resolve, reject) => {
+        const head = doc.getElementsByTagName('head')[0], script = doc.createElement('script');
+        // Set type and location for the script
+        script.type = 'text/javascript';
+        script.src = scriptLocation;
+        // Resolve in case of a succesful script fetching
+        script.onload = () => {
+            resolve();
+        };
+        // Reject in case of fail
+        script.onerror = () => {
+            const msg = `Error loading script ${scriptLocation}`;
+            error(msg);
+            reject(new Error(msg));
+        };
+        // Append the newly created script
+        head.appendChild(script);
+    });
+}
 /* *
  *
  *  Default Export
@@ -231,13 +272,17 @@ function downloadURL(dataURL, filename) {
  * */
 const DownloadURL = {
     dataURLtoBlob,
-    downloadURL
+    downloadURL,
+    getScript
 };
 /* harmony default export */ const Extensions_DownloadURL = (DownloadURL);
 
 // EXTERNAL MODULE: external {"amd":["highcharts/highcharts","AST"],"commonjs":["highcharts","AST"],"commonjs2":["highcharts","AST"],"root":["Highcharts","AST"]}
 var highcharts_AST_commonjs_highcharts_AST_commonjs2_highcharts_AST_root_Highcharts_AST_ = __webpack_require__(660);
 var highcharts_AST_commonjs_highcharts_AST_commonjs2_highcharts_AST_root_Highcharts_AST_default = /*#__PURE__*/__webpack_require__.n(highcharts_AST_commonjs_highcharts_AST_commonjs2_highcharts_AST_root_Highcharts_AST_);
+// EXTERNAL MODULE: external {"amd":["highcharts/highcharts","Chart"],"commonjs":["highcharts","Chart"],"commonjs2":["highcharts","Chart"],"root":["Highcharts","Chart"]}
+var highcharts_Chart_commonjs_highcharts_Chart_commonjs2_highcharts_Chart_root_Highcharts_Chart_ = __webpack_require__(960);
+var highcharts_Chart_commonjs_highcharts_Chart_commonjs2_highcharts_Chart_root_Highcharts_Chart_default = /*#__PURE__*/__webpack_require__.n(highcharts_Chart_commonjs_highcharts_Chart_commonjs2_highcharts_Chart_root_Highcharts_Chart_);
 ;// ./code/es-modules/Extensions/ExportData/ExportDataDefaults.js
 /* *
  *
@@ -268,7 +313,7 @@ const exporting = {
      * @sample highcharts/export-data/multilevel-table
      *         Multiple table headers
      *
-     * @type      {boolean|string}
+     * @type      {boolean | string}
      * @since     6.0.4
      * @requires  modules/export-data
      * @apioption exporting.tableCaption
@@ -278,8 +323,8 @@ const exporting = {
      * in a HTML table or a JavaScript structure.
      *
      * This module adds data export options to the export menu and provides
-     * functions like `Chart.getCSV`, `Chart.getTable`, `Chart.getDataRows`
-     * and `Chart.viewData`.
+     * functions like `Exporting.getCSV`, `Exporting.getTable`,
+     * `Exporting.getDataRows` and `Exporting.viewData`.
      *
      * The XLS converter is limited and only creates a HTML string that is
      * passed for download, which works but creates a warning before
@@ -299,7 +344,7 @@ const exporting = {
          *
          * Options for annotations in the export-data table.
          *
-         * @since 8.2.0
+         * @since    8.2.0
          * @requires modules/export-data
          * @requires modules/annotations
          *
@@ -310,7 +355,7 @@ const exporting = {
             * The way to mark the separator for annotations
             * combined in one export-data table cell.
             *
-            * @since 8.2.0
+            * @since    8.2.0
             * @requires modules/annotations
             */
             itemDelimiter: '; ',
@@ -321,7 +366,7 @@ const exporting = {
             * @sample highcharts/export-data/join-annotations/
             *         Concatenate point annotations with itemDelimiter set.
             *
-            * @since 8.2.0
+            * @since    8.2.0
             * @requires modules/annotations
             */
             join: false
@@ -352,7 +397,7 @@ const exporting = {
          * @sample highcharts/export-data/multilevel-table
          *         Multiple table headers
          *
-         * @type {Function|null}
+         * @type {Function | null}
          */
         columnHeaderFormatter: null,
         /**
@@ -365,7 +410,7 @@ const exporting = {
          * as the browser locale, typically `.` (English) or `,` (German,
          * French etc).
          *
-         * @type  {string|null}
+         * @type  {string | null}
          * @since 6.0.4
          */
         decimalPoint: null,
@@ -375,7 +420,7 @@ const exporting = {
          * locale. If the locale _decimal point_ is `,`, the `itemDelimiter`
          * defaults to `;`, otherwise the `itemDelimiter` defaults to `,`.
          *
-         * @type {string|null}
+         * @type {string | null}
          */
         itemDelimiter: null,
         /**
@@ -383,6 +428,60 @@ const exporting = {
          */
         lineDelimiter: '\n'
     },
+    /**
+     * An object consisting of definitions for the menu items in the context
+     * menu. Each key value pair has a `key` that is referenced in the
+     * [menuItems](#exporting.buttons.contextButton.menuItems) setting,
+     * and a `value`, which is an object with the following properties:
+     *
+     * - **onclick:** The click handler for the menu item
+     *
+     * - **text:** The text for the menu item
+     *
+     * - **textKey:** If internationalization is required, the key to a language
+     *   string
+     *
+     * Custom text for the "exitFullScreen" can be set only in lang options
+     * (it is not a separate button).
+     *
+     * @sample highcharts/exporting/menuitemdefinitions/
+     *         Menu item definitions
+     * @sample highcharts/exporting/menuitemdefinitions-webp/
+     *         Adding a custom menu item for WebP export
+     *
+     * @type     {Highcharts.Dictionary<Highcharts.ExportingMenuObject>}
+     * @default  {"downloadCSV": {}, "downloadXLS": {}, "viewData": {}}
+     * @requires modules/export-data
+     */
+    menuItemDefinitions: {
+        /**
+         * @ignore
+         */
+        downloadCSV: {
+            textKey: 'downloadCSV',
+            onclick: function () {
+                this.exporting?.downloadCSV();
+            }
+        },
+        /**
+         * @ignore
+         */
+        downloadXLS: {
+            textKey: 'downloadXLS',
+            onclick: function () {
+                this.exporting?.downloadXLS();
+            }
+        },
+        /**
+         * @ignore
+         */
+        viewData: {
+            textKey: 'viewData',
+            onclick: function () {
+                this.exporting?.wrapLoading(this.exporting.toggleDataTable);
+            }
+        }
+    },
     /**
      * Show a HTML table below the chart with the chart's current data.
      *
@@ -425,7 +524,7 @@ const exporting = {
      *
      * The message can be altered by changing [](#lang.exporting.exportInProgress)
      *
-     * @since 11.3.0
+     * @since    11.3.0
      * @requires modules/export-data
      */
     showExportInProgress: true
@@ -452,7 +551,7 @@ const lang = {
     /**
      * The text for exported table.
      *
-     * @since 8.1.0
+     * @since    8.1.0
      * @requires modules/export-data
      */
     exportData: {
@@ -479,14 +578,14 @@ const lang = {
     /**
      * The text for the menu item.
      *
-     * @since 8.2.0
+     * @since    8.2.0
      * @requires modules/export-data
      */
     hideData: 'Hide data table',
     /**
      * Text to show when export is in progress.
      *
-     * @since 11.3.0
+     * @since    11.3.0
      * @requires modules/export-data
      */
     exportInProgress: 'Exporting...'
@@ -547,857 +646,951 @@ const ExportDataDefaults = {
 
 
 
+
 const { getOptions, setOptions } = (highcharts_commonjs_highcharts_commonjs2_highcharts_root_Highcharts_default());
 
 const { downloadURL: ExportData_downloadURL } = Extensions_DownloadURL;
 
 
-const { doc: ExportData_doc, win: ExportData_win } = (highcharts_commonjs_highcharts_commonjs2_highcharts_root_Highcharts_default());
+const { composed, doc: ExportData_doc, win: ExportData_win } = (highcharts_commonjs_highcharts_commonjs2_highcharts_root_Highcharts_default());
 
-const { addEvent, defined, extend, find, fireEvent, isNumber, pick } = (highcharts_commonjs_highcharts_commonjs2_highcharts_root_Highcharts_default());
+const { addEvent, defined, extend, find, fireEvent, isNumber, pick, pushUnique } = (highcharts_commonjs_highcharts_commonjs2_highcharts_root_Highcharts_default());
 /* *
  *
- *  Functions
+ *  Composition
  *
  * */
-/**
- * Wrapper function for the download functions, which handles showing and hiding
- * the loading message
- *
- * @private
- *
- */
-function wrapLoading(fn) {
-    const showMessage = Boolean(this.options.exporting?.showExportInProgress);
-    // Prefer requestAnimationFrame if available
-    const timeoutFn = ExportData_win.requestAnimationFrame || setTimeout;
-    // Outer timeout avoids menu freezing on click
-    timeoutFn(() => {
-        showMessage && this.showLoading(this.options.lang.exportInProgress);
-        timeoutFn(() => {
-            try {
-                fn.call(this);
-            }
-            finally {
-                showMessage && this.hideLoading();
+var ExportData;
+(function (ExportData) {
+    /* *
+     *
+     *  Declarations
+     *
+     * */
+    /* *
+     *
+     *  Functions
+     *
+     * */
+    /**
+     * Composition function.
+     *
+     * @private
+     * @function Highcharts.Exporting#compose
+     *
+     * @param {ChartClass} ChartClass
+     * Chart class.
+     * @param {ExportingClass} ExportingClass
+     * Exporting class.
+     * @param {SeriesClass} SeriesClass
+     * Series class.
+     *
+     * @requires modules/exporting
+     * @requires modules/export-data
+     */
+    function compose(ChartClass, ExportingClass, SeriesClass) {
+        // Check the composition registry for the Exporting
+        if (!pushUnique(composed, 'ExportData')) {
+            return;
+        }
+        // Adding wrappers for the deprecated functions
+        extend((highcharts_Chart_commonjs_highcharts_Chart_commonjs2_highcharts_Chart_root_Highcharts_Chart_default()).prototype, {
+            downloadCSV: function () {
+                return this.exporting?.downloadCSV();
+            },
+            downloadXLS: function () {
+                return this.exporting?.downloadXLS();
+            },
+            getCSV: function (useLocalDecimalPoint) {
+                return this.exporting?.getCSV(useLocalDecimalPoint);
+            },
+            getDataRows: function (multiLevelHeaders) {
+                return this.exporting?.getDataRows(multiLevelHeaders);
+            },
+            getTable: function (useLocalDecimalPoint) {
+                return this.exporting?.getTable(useLocalDecimalPoint);
+            },
+            getTableAST: function (useLocalDecimalPoint) {
+                return this.exporting?.getTableAST(useLocalDecimalPoint);
+            },
+            hideData: function () {
+                return this.exporting?.hideData();
+            },
+            toggleDataTable: function (show) {
+                return this.exporting?.toggleDataTable(show);
+            },
+            viewData: function () {
+                return this.exporting?.viewData();
             }
         });
-    });
-}
-/**
- * Generates a data URL of CSV for local download in the browser. This is the
- * default action for a click on the 'Download CSV' button.
- *
- * See {@link Highcharts.Chart#getCSV} to get the CSV data itself.
- *
- * @function Highcharts.Chart#downloadCSV
- *
- * @requires modules/exporting
- */
-function chartDownloadCSV() {
-    wrapLoading.call(this, () => {
-        const csv = this.getCSV(true);
-        ExportData_downloadURL(getBlobFromContent(csv, 'text/csv') ||
-            'data:text/csv,\uFEFF' + encodeURIComponent(csv), this.getFilename() + '.csv');
-    });
-}
-/**
- * Generates a data URL of an XLS document for local download in the browser.
- * This is the default action for a click on the 'Download XLS' button.
- *
- * See {@link Highcharts.Chart#getTable} to get the table data itself.
- *
- * @function Highcharts.Chart#downloadXLS
- *
- * @requires modules/exporting
- */
-function chartDownloadXLS() {
-    wrapLoading.call(this, () => {
-        const uri = 'data:application/vnd.ms-excel;base64,', template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" ' +
-            'xmlns:x="urn:schemas-microsoft-com:office:excel" ' +
-            'xmlns="http://www.w3.org/TR/REC-html40">' +
-            '<head><!--[if gte mso 9]><xml><x:ExcelWorkbook>' +
-            '<x:ExcelWorksheets><x:ExcelWorksheet>' +
-            '<x:Name>Ark1</x:Name>' +
-            '<x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions>' +
-            '</x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook>' +
-            '</xml><![endif]-->' +
-            '<style>td{border:none;font-family: Calibri, sans-serif;} ' +
-            '.number{mso-number-format:"0.00";} ' +
-            '.text{ mso-number-format:"\@";}</style>' +
-            '<meta name=ProgId content=Excel.Sheet>' +
-            '<meta charset=UTF-8>' +
-            '</head><body>' +
-            this.getTable(true) +
-            '</body></html>', base64 = function (s) {
-            return ExportData_win.btoa(unescape(encodeURIComponent(s))); // #50
-        };
-        ExportData_downloadURL(getBlobFromContent(template, 'application/vnd.ms-excel') ||
-            uri + base64(template), this.getFilename() + '.xls');
-    });
-}
-/**
- * Export-data module required. Returns the current chart data as a CSV string.
- *
- * @function Highcharts.Chart#getCSV
- *
- * @param {boolean} [useLocalDecimalPoint]
- *        Whether to use the local decimal point as detected from the browser.
- *        This makes it easier to export data to Excel in the same locale as the
- *        user is.
- *
- * @return {string}
- *         CSV representation of the data
- */
-function chartGetCSV(useLocalDecimalPoint) {
-    let csv = '';
-    const rows = this.getDataRows(), csvOptions = this.options.exporting.csv, decimalPoint = pick(csvOptions.decimalPoint, csvOptions.itemDelimiter !== ',' && useLocalDecimalPoint ?
-        (1.1).toLocaleString()[1] :
-        '.'), 
-    // Use ';' for direct to Excel
-    itemDelimiter = pick(csvOptions.itemDelimiter, decimalPoint === ',' ? ';' : ','), 
-    // '\n' isn't working with the js csv data extraction
-    lineDelimiter = csvOptions.lineDelimiter;
-    // Transform the rows to CSV
-    rows.forEach((row, i) => {
-        let val = '', j = row.length;
-        while (j--) {
-            val = row[j];
-            if (typeof val === 'string') {
-                val = `"${val}"`;
+        const exportingProto = ExportingClass.prototype;
+        if (!exportingProto.downloadCSV) {
+            // Add an event listener to handle the showTable option
+            addEvent(ChartClass, 'afterViewData', onChartAfterViewData);
+            addEvent(ChartClass, 'render', onChartRenderer);
+            addEvent(ChartClass, 'destroy', onChartDestroy);
+            // Adding functions to the Exporting prototype
+            exportingProto.downloadCSV = downloadCSV;
+            exportingProto.downloadXLS = downloadXLS;
+            exportingProto.getCSV = getCSV;
+            exportingProto.getDataRows = getDataRows;
+            exportingProto.getTable = getTable;
+            exportingProto.getTableAST = getTableAST;
+            exportingProto.hideData = hideData;
+            exportingProto.toggleDataTable = toggleDataTable;
+            exportingProto.wrapLoading = wrapLoading;
+            exportingProto.viewData = viewData;
+            // Update with defaults of the export data module
+            setOptions(ExportData_ExportDataDefaults);
+            // Additionaly, extend the menuItems with the export data variants
+            const menuItems = getOptions().exporting?.buttons?.contextButton?.menuItems;
+            menuItems && menuItems.push('separator', 'downloadCSV', 'downloadXLS', 'viewData');
+            const { arearange: AreaRangeSeries, gantt: GanttSeries, map: MapSeries, mapbubble: MapBubbleSeries, treemap: TreemapSeries, xrange: XRangeSeries } = SeriesClass.types;
+            if (AreaRangeSeries) {
+                AreaRangeSeries.prototype.keyToAxis = {
+                    low: 'y',
+                    high: 'y'
+                };
             }
-            if (typeof val === 'number') {
-                if (decimalPoint !== '.') {
-                    val = val.toString().replace('.', decimalPoint);
-                }
+            if (GanttSeries) {
+                GanttSeries.prototype.exportKey = 'name';
+                GanttSeries.prototype.keyToAxis = {
+                    start: 'x',
+                    end: 'x'
+                };
             }
-            row[j] = val;
-        }
-        // The first row is the header - it defines the number of columns.
-        // Empty columns between not-empty cells are covered in the getDataRows
-        // method.
-        // Now add empty values only to the end of the row so all rows have
-        // the same number of columns, #17186
-        row.length = rows.length ? rows[0].length : 0;
-        // Add the values
-        csv += row.join(itemDelimiter);
-        // Add the line delimiter
-        if (i < rows.length - 1) {
-            csv += lineDelimiter;
-        }
-    });
-    return csv;
-}
-/**
- * Export-data module required. Returns a two-dimensional array containing the
- * current chart data.
- *
- * @function Highcharts.Chart#getDataRows
- *
- * @param {boolean} [multiLevelHeaders]
- *        Use multilevel headers for the rows by default. Adds an extra row with
- *        top level headers. If a custom columnHeaderFormatter is defined, this
- *        can override the behavior.
- *
- * @return {Array<Array<(number|string)>>}
- *         The current chart data
- *
- * @emits Highcharts.Chart#event:exportData
- */
-function chartGetDataRows(multiLevelHeaders) {
-    const hasParallelCoords = this.hasParallelCoordinates, time = this.time, csvOptions = ((this.options.exporting && this.options.exporting.csv) || {}), xAxes = this.xAxis, rows = {}, rowArr = [], topLevelColumnTitles = [], columnTitles = [], langOptions = this.options.lang, exportDataOptions = langOptions.exportData, categoryHeader = exportDataOptions.categoryHeader, categoryDatetimeHeader = exportDataOptions.categoryDatetimeHeader, 
-    // Options
-    columnHeaderFormatter = function (item, key, keyLength) {
-        if (csvOptions.columnHeaderFormatter) {
-            const s = csvOptions.columnHeaderFormatter(item, key, keyLength);
-            if (s !== false) {
-                return s;
+            if (MapSeries) {
+                MapSeries.prototype.exportKey = 'name';
+            }
+            if (MapBubbleSeries) {
+                MapBubbleSeries.prototype.exportKey = 'name';
+            }
+            if (TreemapSeries) {
+                TreemapSeries.prototype.exportKey = 'name';
+            }
+            if (XRangeSeries) {
+                XRangeSeries.prototype.keyToAxis = {
+                    x2: 'x'
+                };
             }
         }
-        if (!item) {
-            return categoryHeader;
-        }
-        if (!item.bindAxes) {
-            return (item.options.title &&
-                item.options.title.text) || (item.dateTime ?
-                categoryDatetimeHeader :
-                categoryHeader);
-        }
-        if (multiLevelHeaders) {
-            return {
-                columnTitle: keyLength > 1 ?
-                    key :
-                    item.name,
-                topLevelColumnTitle: item.name
+    }
+    ExportData.compose = compose;
+    /**
+     * Generates a data URL of CSV for local download in the browser. This is
+     * the default action for a click on the 'Download CSV' button.
+     *
+     * See {@link Highcharts.Exporting#getCSV} to get the CSV data itself.
+     *
+     * @function Highcharts.Exporting#downloadCSV
+     *
+     * @requires modules/exporting
+     * @requires modules/export-data
+     */
+    function downloadCSV() {
+        this.wrapLoading(() => {
+            const csv = this.getCSV(true);
+            ExportData_downloadURL(getBlobFromContent(csv, 'text/csv') ||
+                'data:text/csv,\uFEFF' + encodeURIComponent(csv), this.getFilename() + '.csv');
+        });
+    }
+    /**
+     * Generates a data URL of an XLS document for local download in the
+     * browser. This is the default action for a click on the 'Download XLS'
+     * button.
+     *
+     * See {@link Highcharts.Exporting#getTable} to get the table data itself.
+     *
+     * @function Highcharts.Exporting#downloadXLS
+     *
+     * @requires modules/exporting
+     * @requires modules/export-data
+     */
+    function downloadXLS() {
+        this.wrapLoading(() => {
+            const uri = 'data:application/vnd.ms-excel;base64,', template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" ' +
+                'xmlns:x="urn:schemas-microsoft-com:office:excel" ' +
+                'xmlns="http://www.w3.org/TR/REC-html40">' +
+                '<head><!--[if gte mso 9]><xml><x:ExcelWorkbook>' +
+                '<x:ExcelWorksheets><x:ExcelWorksheet>' +
+                '<x:Name>Ark1</x:Name>' +
+                '<x:WorksheetOptions><x:DisplayGridlines/>' +
+                '</x:WorksheetOptions>' +
+                '</x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook>' +
+                '</xml><![endif]-->' +
+                '<style>td{border:none;font-family: Calibri, sans-serif;} ' +
+                '.number{mso-number-format:"0.00";} ' +
+                '.text{ mso-number-format:"\@";}</style>' +
+                '<meta name=ProgId content=Excel.Sheet>' +
+                '<meta charset=UTF-8>' +
+                '</head><body>' +
+                this.getTable(true) +
+                '</body></html>', base64 = function (s) {
+                return ExportData_win.btoa(unescape(encodeURIComponent(s))); // #50
             };
-        }
-        return item.name + (keyLength > 1 ? ' (' + key + ')' : '');
-    }, 
-    // Map the categories for value axes
-    getCategoryAndDateTimeMap = function (series, pointArrayMap, pIdx) {
-        const categoryMap = {}, dateTimeValueAxisMap = {};
-        pointArrayMap.forEach(function (prop) {
-            const axisName = ((series.keyToAxis && series.keyToAxis[prop]) ||
-                prop) + 'Axis', 
-            // Points in parallel coordinates refers to all yAxis
-            // not only `series.yAxis`
-            axis = isNumber(pIdx) ?
-                series.chart[axisName][pIdx] :
-                series[axisName];
-            categoryMap[prop] = (axis && axis.categories) || [];
-            dateTimeValueAxisMap[prop] = (axis && axis.dateTime);
+            ExportData_downloadURL(getBlobFromContent(template, 'application/vnd.ms-excel') ||
+                uri + base64(template), this.getFilename() + '.xls');
         });
-        return {
-            categoryMap: categoryMap,
-            dateTimeValueAxisMap: dateTimeValueAxisMap
-        };
-    }, 
-    // Create point array depends if xAxis is category
-    // or point.name is defined #13293
-    getPointArray = function (series, xAxis) {
-        const pointArrayMap = series.pointArrayMap || ['y'], namedPoints = series.data.some((d) => (typeof d.y !== 'undefined') && d.name);
-        // If there are points with a name, we also want the x value in the
-        // table
-        if (namedPoints &&
-            xAxis &&
-            !xAxis.categories &&
-            series.exportKey !== 'name') {
-            return ['x', ...pointArrayMap];
+    }
+    /**
+     * Get a blob object from content, if blob is supported.
+     *
+     * @private
+     * @function Highcharts.getBlobFromContent
+     *
+     * @param {string} content
+     * The content to create the blob from.
+     * @param {string} type
+     * The type of the content.
+     *
+     * @return {string | undefined}
+     * The blob object, or undefined if not supported.
+     *
+     * @requires modules/exporting
+     * @requires modules/export-data
+     */
+    function getBlobFromContent(content, type) {
+        const nav = ExportData_win.navigator, domurl = ExportData_win.URL || ExportData_win.webkitURL || ExportData_win;
+        try {
+            // MS specific
+            if ((nav.msSaveOrOpenBlob) && ExportData_win.MSBlobBuilder) {
+                const blob = new ExportData_win.MSBlobBuilder();
+                blob.append(content);
+                return blob.getBlob('image/svg+xml');
+            }
+            return domurl.createObjectURL(new ExportData_win.Blob(['\uFEFF' + content], // #7084
+            { type: type }));
         }
-        return pointArrayMap;
-    }, xAxisIndices = [];
-    let xAxis, dataRows, columnTitleObj, i = 0, // Loop the series and index values
-    x, xTitle;
-    this.series.forEach(function (series) {
-        const keys = series.options.keys, xAxis = series.xAxis, pointArrayMap = keys || getPointArray(series, xAxis), valueCount = pointArrayMap.length, xTaken = !series.requireSorting && {}, xAxisIndex = xAxes.indexOf(xAxis);
-        let categoryAndDatetimeMap = getCategoryAndDateTimeMap(series, pointArrayMap), mockSeries, j;
-        if (series.options.includeInDataExport !== false &&
-            !series.options.isInternal &&
-            series.visible !== false // #55
-        ) {
-            // Build a lookup for X axis index and the position of the first
-            // series that belongs to that X axis. Includes -1 for non-axis
-            // series types like pies.
-            if (!find(xAxisIndices, function (index) {
-                return index[0] === xAxisIndex;
-            })) {
-                xAxisIndices.push([xAxisIndex, i]);
+        catch {
+            // Ignore
+        }
+    }
+    /**
+     * Returns the current chart data as a CSV string.
+     *
+     * @function Highcharts.Exporting#getCSV
+     *
+     * @param {boolean} [useLocalDecimalPoint]
+     * Whether to use the local decimal point as detected from the browser. This
+     * makes it easier to export data to Excel in the same locale as the user
+     * is.
+     *
+     * @return {string}
+     * CSV representation of the data.
+     *
+     * @requires modules/exporting
+     * @requires modules/export-data
+     */
+    function getCSV(useLocalDecimalPoint) {
+        let csv = '';
+        const rows = this.getDataRows(), csvOptions = this.options?.csv, decimalPoint = pick(csvOptions?.decimalPoint, csvOptions?.itemDelimiter !== ',' && useLocalDecimalPoint ?
+            (1.1).toLocaleString()[1] :
+            '.'), 
+        // Use ';' for direct to Excel
+        itemDelimiter = pick(csvOptions?.itemDelimiter, decimalPoint === ',' ? ';' : ','), 
+        // '\n' isn't working with the js csv data extraction
+        lineDelimiter = csvOptions?.lineDelimiter;
+        // Transform the rows to CSV
+        rows.forEach((row, i) => {
+            let val = '', j = row.length;
+            while (j--) {
+                val = row[j];
+                if (typeof val === 'string') {
+                    val = `"${val}"`;
+                }
+                if (typeof val === 'number') {
+                    if (decimalPoint !== '.') {
+                        val = val.toString().replace('.', decimalPoint);
+                    }
+                }
+                row[j] = val;
             }
-            // Compute the column headers and top level headers, usually the
-            // same as series names
-            j = 0;
-            while (j < valueCount) {
-                columnTitleObj = columnHeaderFormatter(series, pointArrayMap[j], pointArrayMap.length);
-                columnTitles.push(columnTitleObj.columnTitle || columnTitleObj);
-                if (multiLevelHeaders) {
-                    topLevelColumnTitles.push(columnTitleObj.topLevelColumnTitle ||
-                        columnTitleObj);
+            // The first row is the header - it defines the number of columns.
+            // Empty columns between not-empty cells are covered in the
+            // getDataRows method.
+            // Now add empty values only to the end of the row so all rows have
+            // the same number of columns, #17186
+            row.length = rows.length ? rows[0].length : 0;
+            // Add the values
+            csv += row.join(itemDelimiter);
+            // Add the line delimiter
+            if (i < rows.length - 1) {
+                csv += lineDelimiter;
+            }
+        });
+        return csv;
+    }
+    /**
+     * Returns a two-dimensional array containing the current chart data.
+     *
+     * @function Highcharts.Exporting#getDataRows
+     *
+     * @param {boolean} [multiLevelHeaders]
+     * Use multilevel headers for the rows by default. Adds an extra row with
+     * top level headers. If a custom columnHeaderFormatter is defined, this can
+     * override the behavior.
+     *
+     * @return {Array<Array<(number | string)>>}
+     * The current chart data
+     *
+     * @emits Highcharts.Chart#event:exportData
+     *
+     * @requires modules/exporting
+     * @requires modules/export-data
+     */
+    function getDataRows(multiLevelHeaders) {
+        const chart = this.chart, hasParallelCoords = chart.hasParallelCoordinates, time = chart.time, csvOptions = this.options?.csv || {}, xAxes = chart.xAxis, rows = {}, rowArr = [], topLevelColumnTitles = [], columnTitles = [], langOptions = chart.options.lang, exportDataOptions = langOptions.exportData, categoryHeader = exportDataOptions?.categoryHeader, categoryDatetimeHeader = exportDataOptions?.categoryDatetimeHeader, 
+        // Options
+        columnHeaderFormatter = function (item, key, keyLength) {
+            if (csvOptions.columnHeaderFormatter) {
+                const s = csvOptions.columnHeaderFormatter(item, key, keyLength);
+                if (s !== false) {
+                    return s;
                 }
-                j++;
             }
-            mockSeries = {
-                chart: series.chart,
-                autoIncrement: series.autoIncrement,
-                options: series.options,
-                pointArrayMap: series.pointArrayMap,
-                index: series.index
+            if (!item && categoryHeader) {
+                return categoryHeader;
+            }
+            if (!item.bindAxes &&
+                categoryDatetimeHeader &&
+                categoryHeader) {
+                return (item.options.title &&
+                    item.options.title.text) || (item.dateTime ?
+                    categoryDatetimeHeader :
+                    categoryHeader);
+            }
+            if (multiLevelHeaders) {
+                return {
+                    columnTitle: ((keyLength || 0) > 1 ?
+                        key :
+                        item.name) || '',
+                    topLevelColumnTitle: item.name
+                };
+            }
+            return item.name + ((keyLength || 0) > 1 ? ' (' + key + ')' : '');
+        }, 
+        // Map the categories for value axes
+        getCategoryAndDateTimeMap = function (series, pointArrayMap, pIdx) {
+            const categoryMap = {}, dateTimeValueAxisMap = {};
+            pointArrayMap.forEach(function (prop) {
+                const axisName = ((series.keyToAxis && series.keyToAxis[prop]) ||
+                    prop) + 'Axis', 
+                // Points in parallel coordinates refers to all yAxis
+                // not only `series.yAxis`
+                axis = isNumber(pIdx) ?
+                    series.chart[axisName][pIdx] :
+                    series[axisName];
+                categoryMap[prop] = (axis && axis.categories) || [];
+                dateTimeValueAxisMap[prop] = (axis && axis.dateTime);
+            });
+            return {
+                categoryMap: categoryMap,
+                dateTimeValueAxisMap: dateTimeValueAxisMap
             };
-            // Export directly from options.data because we need the uncropped
-            // data (#7913), and we need to support Boost (#7026).
-            series.options.data.forEach(function eachData(options, pIdx) {
-                const mockPoint = { series: mockSeries };
-                let key, prop, val;
-                // In parallel coordinates chart, each data point is connected
-                // to a separate yAxis, conform this
-                if (hasParallelCoords) {
-                    categoryAndDatetimeMap = getCategoryAndDateTimeMap(series, pointArrayMap, pIdx);
+        }, 
+        // Create point array depends if xAxis is category
+        // or point.name is defined #13293
+        getPointArray = function (series, xAxis) {
+            const pointArrayMap = series.pointArrayMap || ['y'], namedPoints = series.data.some((d) => (typeof d.y !== 'undefined') && d.name);
+            // If there are points with a name, we also want the x value in
+            // the table
+            if (namedPoints &&
+                xAxis &&
+                !xAxis.categories &&
+                series.exportKey !== 'name') {
+                return ['x', ...pointArrayMap];
+            }
+            return pointArrayMap;
+        }, xAxisIndices = [];
+        let xAxis, dataRows, columnTitleObj, i = 0, // Loop the series and index values
+        x, xTitle;
+        chart.series.forEach(function (series) {
+            const keys = series.options.keys, xAxis = series.xAxis, pointArrayMap = keys || getPointArray(series, xAxis), valueCount = pointArrayMap.length, xTaken = !series.requireSorting && {}, xAxisIndex = xAxes.indexOf(xAxis);
+            let categoryAndDatetimeMap = getCategoryAndDateTimeMap(series, pointArrayMap), mockSeries, j;
+            if (series.options.includeInDataExport !== false &&
+                !series.options.isInternal &&
+                series.visible !== false // #55
+            ) {
+                // Build a lookup for X axis index and the position of the first
+                // series that belongs to that X axis. Includes -1 for non-axis
+                // series types like pies.
+                if (!find(xAxisIndices, function (index) {
+                    return index[0] === xAxisIndex;
+                })) {
+                    xAxisIndices.push([xAxisIndex, i]);
                 }
-                series.pointClass.prototype.applyOptions.apply(mockPoint, [options]);
-                const name = series.data[pIdx] && series.data[pIdx].name;
-                key = (mockPoint.x ?? '') + ',' + name;
+                // Compute the column headers and top level headers, usually the
+                // same as series names
                 j = 0;
-                // Pies, funnels, geo maps etc. use point name in X row
-                if (!xAxis ||
-                    series.exportKey === 'name' ||
-                    (!hasParallelCoords && xAxis && xAxis.hasNames) && name) {
-                    key = name;
-                }
-                if (xTaken) {
-                    if (xTaken[key]) {
-                        key += '|' + pIdx;
+                while (j < valueCount) {
+                    columnTitleObj = columnHeaderFormatter(series, pointArrayMap[j], pointArrayMap.length);
+                    columnTitles.push(columnTitleObj.columnTitle ||
+                        columnTitleObj);
+                    if (multiLevelHeaders) {
+                        topLevelColumnTitles.push(columnTitleObj.topLevelColumnTitle ||
+                            columnTitleObj);
                     }
-                    xTaken[key] = true;
+                    j++;
                 }
-                if (!rows[key]) {
-                    rows[key] = [];
-                    rows[key].xValues = [];
-                    // ES5 replacement for Array.from / fill.
-                    const arr = [];
-                    for (let i = 0; i < series.chart.series.length; i++) {
-                        arr[i] = 0;
+                mockSeries = {
+                    chart: series.chart,
+                    autoIncrement: series.autoIncrement,
+                    options: series.options,
+                    pointArrayMap: series.pointArrayMap,
+                    index: series.index
+                };
+                // Export directly from options.data because we need the
+                // uncropped data (#7913), and we need to support Boost (#7026).
+                series.options.data?.forEach(function eachData(options, pIdx) {
+                    const mockPoint = { series: mockSeries };
+                    let key, prop, val;
+                    // In parallel coordinates chart, each data point is
+                    // connected to a separate yAxis, conform this
+                    if (hasParallelCoords) {
+                        categoryAndDatetimeMap = getCategoryAndDateTimeMap(series, pointArrayMap, pIdx);
                     }
-                    // Create pointers array, holding information how many
-                    // duplicates of specific x occurs in each series.
-                    // Used for creating rows with duplicates.
-                    rows[key].pointers = arr;
-                    rows[key].pointers[series.index] = 1;
-                }
-                else {
-                    // Handle duplicates (points with the same x), by creating
-                    // extra rows based on pointers for better performance.
-                    const modifiedKey = `${key},${rows[key].pointers[series.index]}`, originalKey = key;
-                    if (rows[key].pointers[series.index]) {
-                        if (!rows[modifiedKey]) {
-                            rows[modifiedKey] = [];
-                            rows[modifiedKey].xValues = [];
-                            rows[modifiedKey].pointers = [];
+                    series.pointClass.prototype.applyOptions.apply(mockPoint, [options]);
+                    const name = series.data[pIdx] && series.data[pIdx].name;
+                    key = (mockPoint.x ?? '') + ',' + name;
+                    j = 0;
+                    // Pies, funnels, geo maps etc. use point name in X row
+                    if (!xAxis ||
+                        series.exportKey === 'name' ||
+                        (!hasParallelCoords && xAxis && xAxis.hasNames) && name) {
+                        key = name;
+                    }
+                    if (xTaken) {
+                        if (xTaken[key]) {
+                            key += '|' + pIdx;
                         }
-                        key = modifiedKey;
+                        xTaken[key] = true;
                     }
-                    rows[originalKey].pointers[series.index] += 1;
-                }
-                rows[key].x = mockPoint.x;
-                rows[key].name = name;
-                rows[key].xValues[xAxisIndex] = mockPoint.x;
-                while (j < valueCount) {
-                    prop = pointArrayMap[j]; // `y`, `z` etc
-                    val = series.pointClass.prototype.getNestedProperty.apply(mockPoint, [prop]); // Allow values from nested properties (#20470)
-                    rows[key][i + j] = pick(
-                    // Y axis category if present
-                    categoryAndDatetimeMap.categoryMap[prop][val], 
-                    // Datetime yAxis
-                    categoryAndDatetimeMap.dateTimeValueAxisMap[prop] ?
-                        time.dateFormat(csvOptions.dateFormat, val) :
-                        null, 
-                    // Linear/log yAxis
-                    val);
-                    j++;
-                }
-            });
-            i = i + j;
-        }
-    });
-    // Make a sortable array
-    for (x in rows) {
-        if (Object.hasOwnProperty.call(rows, x)) {
-            rowArr.push(rows[x]);
-        }
-    }
-    let xAxisIndex, column;
-    // Add computed column headers and top level headers to final row set
-    dataRows = multiLevelHeaders ? [topLevelColumnTitles, columnTitles] :
-        [columnTitles];
-    i = xAxisIndices.length;
-    while (i--) { // Start from end to splice in
-        xAxisIndex = xAxisIndices[i][0];
-        column = xAxisIndices[i][1];
-        xAxis = xAxes[xAxisIndex];
-        // Sort it by X values
-        rowArr.sort(function (// eslint-disable-line no-loop-func
-        a, b) {
-            return a.xValues[xAxisIndex] - b.xValues[xAxisIndex];
-        });
-        // Add header row
-        xTitle = columnHeaderFormatter(xAxis);
-        dataRows[0].splice(column, 0, xTitle);
-        if (multiLevelHeaders && dataRows[1]) {
-            // If using multi level headers, we just added top level header.
-            // Also add for sub level
-            dataRows[1].splice(column, 0, xTitle);
-        }
-        // Add the category column
-        rowArr.forEach(function (// eslint-disable-line no-loop-func
-        row) {
-            let category = row.name;
-            if (xAxis && !defined(category)) {
-                if (xAxis.dateTime) {
-                    if (row.x instanceof Date) {
-                        row.x = row.x.getTime();
+                    if (!rows[key]) {
+                        rows[key] = [];
+                        rows[key].xValues = [];
+                        // ES5 replacement for Array.from / fill.
+                        const arr = [];
+                        for (let i = 0; i < series.chart.series.length; i++) {
+                            arr[i] = 0;
+                        }
+                        // Create pointers array, holding information how many
+                        // duplicates of specific x occurs in each series.
+                        // Used for creating rows with duplicates.
+                        rows[key].pointers = arr;
+                        rows[key].pointers[series.index] = 1;
                     }
-                    category = time.dateFormat(csvOptions.dateFormat, row.x);
-                }
-                else if (xAxis.categories) {
-                    category = pick(xAxis.names[row.x], xAxis.categories[row.x], row.x);
-                }
-                else {
-                    category = row.x;
-                }
+                    else {
+                        // Handle duplicates (points with the same x), by
+                        // creating extra rows based on pointers for better
+                        // performance.
+                        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+                        const modifiedKey = `${key},${rows[key].pointers[series.index]}`, originalKey = key;
+                        if (rows[key].pointers[series.index]) {
+                            if (!rows[modifiedKey]) {
+                                rows[modifiedKey] = [];
+                                rows[modifiedKey].xValues = [];
+                                rows[modifiedKey].pointers = [];
+                            }
+                            key = modifiedKey;
+                        }
+                        rows[originalKey].pointers[series.index] += 1;
+                    }
+                    rows[key].x = mockPoint.x;
+                    rows[key].name = name;
+                    rows[key].xValues[xAxisIndex] = mockPoint.x;
+                    while (j < valueCount) {
+                        prop = pointArrayMap[j]; // `y`, `z` etc
+                        val =
+                            series.pointClass.prototype.getNestedProperty.apply(mockPoint, [prop]);
+                        // Allow values from nested properties (#20470)
+                        rows[key][i + j] = pick(
+                        // Y axis category if present
+                        categoryAndDatetimeMap.categoryMap[prop][val], 
+                        // Datetime yAxis
+                        categoryAndDatetimeMap.dateTimeValueAxisMap[prop] ?
+                            time.dateFormat(csvOptions.dateFormat, val) :
+                            null, 
+                        // Linear/log yAxis
+                        val);
+                        j++;
+                    }
+                });
+                i = i + j;
             }
-            // Add the X/date/category
-            row.splice(column, 0, category);
         });
-    }
-    dataRows = dataRows.concat(rowArr);
-    fireEvent(this, 'exportData', { dataRows: dataRows });
-    return dataRows;
-}
-/**
- * Export-data module required. Build a HTML table with the chart's current
- * data.
- *
- * @sample highcharts/export-data/viewdata/
- *         View the data from the export menu
- *
- * @function Highcharts.Chart#getTable
- *
- * @param {boolean} [useLocalDecimalPoint]
- *        Whether to use the local decimal point as detected from the browser.
- *        This makes it easier to export data to Excel in the same locale as the
- *        user is.
- *
- * @return {string}
- *         HTML representation of the data.
- *
- * @emits Highcharts.Chart#event:afterGetTable
- */
-function chartGetTable(useLocalDecimalPoint) {
-    const serialize = (node) => {
-        if (!node.tagName || node.tagName === '#text') {
-            // Text node
-            return node.textContent || '';
+        // Make a sortable array
+        for (x in rows) {
+            if (Object.hasOwnProperty.call(rows, x)) {
+                rowArr.push(rows[x]);
+            }
         }
-        const attributes = node.attributes;
-        let html = `<${node.tagName}`;
-        if (attributes) {
-            Object.keys(attributes)
-                .forEach((key) => {
-                const value = attributes[key];
-                html += ` ${key}="${value}"`;
+        let xAxisIndex, column;
+        // Add computed column headers and top level headers to final row set
+        dataRows = multiLevelHeaders ? [topLevelColumnTitles, columnTitles] :
+            [columnTitles];
+        i = xAxisIndices.length;
+        while (i--) { // Start from end to splice in
+            xAxisIndex = xAxisIndices[i][0];
+            column = xAxisIndices[i][1];
+            xAxis = xAxes[xAxisIndex];
+            // Sort it by X values
+            rowArr.sort(function (// eslint-disable-line no-loop-func
+            a, b) {
+                return a.xValues[xAxisIndex] - b.xValues[xAxisIndex];
             });
-        }
-        html += '>';
-        html += node.textContent || '';
-        (node.children || []).forEach((child) => {
-            html += serialize(child);
-        });
-        html += `</${node.tagName}>`;
-        return html;
-    };
-    const tree = this.getTableAST(useLocalDecimalPoint);
-    return serialize(tree);
-}
-/**
- * Get the AST of a HTML table representing the chart data.
- *
- * @private
- *
- * @function Highcharts.Chart#getTableAST
- *
- * @param {boolean} [useLocalDecimalPoint]
- *        Whether to use the local decimal point as detected from the browser.
- *        This makes it easier to export data to Excel in the same locale as the
- *        user is.
- *
- * @return {Highcharts.ASTNode}
- *         The abstract syntax tree
- */
-function chartGetTableAST(useLocalDecimalPoint) {
-    let rowLength = 0;
-    const treeChildren = [];
-    const options = this.options, decimalPoint = useLocalDecimalPoint ? (1.1).toLocaleString()[1] : '.', useMultiLevelHeaders = pick(options.exporting.useMultiLevelHeaders, true), rows = this.getDataRows(useMultiLevelHeaders), topHeaders = useMultiLevelHeaders ? rows.shift() : null, subHeaders = rows.shift(), 
-    // Compare two rows for equality
-    isRowEqual = function (row1, row2) {
-        let i = row1.length;
-        if (row2.length === i) {
-            while (i--) {
-                if (row1[i] !== row2[i]) {
-                    return false;
-                }
+            // Add header row
+            xTitle = columnHeaderFormatter(xAxis);
+            dataRows[0].splice(column, 0, xTitle);
+            if (multiLevelHeaders && dataRows[1]) {
+                // If using multi level headers, we just added top level header.
+                // Also add for sub level
+                dataRows[1].splice(column, 0, xTitle);
             }
+            // Add the category column
+            rowArr.forEach(function (// eslint-disable-line no-loop-func
+            row) {
+                let category = row.name;
+                if (xAxis && !defined(category)) {
+                    if (xAxis.dateTime) {
+                        if (row.x instanceof Date) {
+                            row.x = row.x.getTime();
+                        }
+                        category = time.dateFormat(csvOptions.dateFormat, row.x);
+                    }
+                    else if (xAxis.categories) {
+                        category = pick(xAxis.names[row.x], xAxis.categories[row.x], row.x);
+                    }
+                    else {
+                        category = row.x;
+                    }
+                }
+                // Add the X/date/category
+                row.splice(column, 0, category);
+            });
         }
-        else {
-            return false;
-        }
-        return true;
-    }, 
-    // Get table cell HTML from value
-    getCellHTMLFromValue = function (tagName, classes, attributes, value) {
-        let textContent = pick(value, ''), className = 'highcharts-text' + (classes ? ' ' + classes : '');
-        // Convert to string if number
-        if (typeof textContent === 'number') {
-            textContent = textContent.toString();
-            if (decimalPoint === ',') {
-                textContent = textContent.replace('.', decimalPoint);
+        dataRows = dataRows.concat(rowArr);
+        fireEvent(chart, 'exportData', { dataRows: dataRows });
+        return dataRows;
+    }
+    /**
+     * Build a HTML table with the chart's current data.
+     *
+     * @sample highcharts/export-data/viewdata/
+     * View the data from the export menu
+     *
+     * @function Highcharts.Exporting#getTable
+     *
+     * @param {boolean} [useLocalDecimalPoint]
+     * Whether to use the local decimal point as detected from the browser. This
+     * makes it easier to export data to Excel in the same locale as the user
+     * is.
+     *
+     * @return {string}
+     * HTML representation of the data.
+     *
+     * @emits Highcharts.Chart#event:afterGetTable
+     *
+     * @requires modules/exporting
+     * @requires modules/export-data
+     */
+    function getTable(useLocalDecimalPoint) {
+        const serialize = (node) => {
+            if (!node.tagName || node.tagName === '#text') {
+                // Text node
+                return node.textContent || '';
             }
-            className = 'highcharts-number';
-        }
-        else if (!value) {
-            className = 'highcharts-empty';
-        }
-        attributes = extend({ 'class': className }, attributes);
-        return {
-            tagName,
-            attributes,
-            textContent
+            const attributes = node.attributes;
+            let html = `<${node.tagName}`;
+            if (attributes) {
+                Object.keys(attributes)
+                    .forEach((key) => {
+                    const value = attributes[key];
+                    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+                    html += ` ${key}="${value}"`;
+                });
+            }
+            html += '>';
+            html += node.textContent || '';
+            (node.children || []).forEach((child) => {
+                html += serialize(child);
+            });
+            html += `</${node.tagName}>`;
+            return html;
         };
-    }, 
-    // Get table header markup from row data
-    getTableHeaderHTML = function (topheaders, subheaders, rowLength) {
-        const theadChildren = [];
-        let i = 0, len = rowLength || subheaders && subheaders.length, next, cur, curColspan = 0, rowspan;
-        // Clean up multiple table headers. Chart.getDataRows() returns two
-        // levels of headers when using multilevel, not merged. We need to
-        // merge identical headers, remove redundant headers, and keep it
-        // all marked up nicely.
-        if (useMultiLevelHeaders &&
-            topheaders &&
-            subheaders &&
-            !isRowEqual(topheaders, subheaders)) {
-            const trChildren = [];
-            for (; i < len; ++i) {
-                cur = topheaders[i];
-                next = topheaders[i + 1];
-                if (cur === next) {
-                    ++curColspan;
-                }
-                else if (curColspan) {
-                    // Ended colspan
-                    // Add cur to HTML with colspan.
-                    trChildren.push(getCellHTMLFromValue('th', 'highcharts-table-topheading', {
-                        scope: 'col',
-                        colspan: curColspan + 1
-                    }, cur));
-                    curColspan = 0;
+        const tree = this.getTableAST(useLocalDecimalPoint);
+        return serialize(tree);
+    }
+    /**
+     * Get the AST of a HTML table representing the chart data.
+     *
+     * @private
+     * @function Highcharts.Exporting#getTableAST
+     *
+     * @param {boolean} [useLocalDecimalPoint]
+     * Whether to use the local decimal point as detected from the browser. This
+     * makes it easier to export data to Excel in the same locale as the user
+     * is.
+     *
+     * @return {Highcharts.ASTNode}
+     * The abstract syntax tree
+     *
+     * @requires modules/exporting
+     * @requires modules/export-data
+     */
+    function getTableAST(useLocalDecimalPoint) {
+        let rowLength = 0;
+        const treeChildren = [], exporting = this, chart = exporting.chart, options = chart.options, decimalPoint = useLocalDecimalPoint ? (1.1).toLocaleString()[1] : '.', useMultiLevelHeaders = pick(exporting.options.useMultiLevelHeaders, true), rows = exporting.getDataRows(useMultiLevelHeaders), topHeaders = useMultiLevelHeaders ? rows.shift() : null, subHeaders = rows.shift(), 
+        // Compare two rows for equality
+        isRowEqual = function (row1, row2) {
+            let i = row1.length;
+            if (row2.length === i) {
+                while (i--) {
+                    if (row1[i] !== row2[i]) {
+                        return false;
+                    }
                 }
-                else {
-                    // Cur is standalone. If it is same as sublevel,
-                    // remove sublevel and add just toplevel.
-                    if (cur === subheaders[i]) {
-                        if (options.exporting.useRowspanHeaders) {
-                            rowspan = 2;
-                            delete subheaders[i];
+            }
+            else {
+                return false;
+            }
+            return true;
+        }, 
+        // Get table cell HTML from value
+        getCellHTMLFromValue = function (tagName, classes, attributes, value) {
+            let textContent = pick(value, ''), className = 'highcharts-text' + (classes ? ' ' + classes : '');
+            // Convert to string if number
+            if (typeof textContent === 'number') {
+                textContent = chart.numberFormatter(textContent, -1, decimalPoint, tagName === 'th' ? '' : void 0);
+                className = 'highcharts-number';
+            }
+            else if (!value) {
+                className = 'highcharts-empty';
+            }
+            attributes = extend({ 'class': className }, attributes);
+            return {
+                tagName,
+                attributes,
+                textContent
+            };
+        }, 
+        // Get table header markup from row data
+        getTableHeaderHTML = function (topheaders, subheaders, rowLength) {
+            const theadChildren = [];
+            let i = 0, len = rowLength || subheaders && subheaders.length, next, cur, curColspan = 0, rowspan;
+            // Clean up multiple table headers. Chart.getDataRows() returns
+            // two levels of headers when using multilevel, not merged. We
+            // need to merge identical headers, remove redundant headers,
+            // and keep it all marked up nicely.
+            if (useMultiLevelHeaders &&
+                topheaders &&
+                subheaders &&
+                !isRowEqual(topheaders, subheaders)) {
+                const trChildren = [];
+                for (; i < len; ++i) {
+                    cur = topheaders[i];
+                    next = topheaders[i + 1];
+                    if (cur === next) {
+                        ++curColspan;
+                    }
+                    else if (curColspan) {
+                        // Ended colspan
+                        // Add cur to HTML with colspan.
+                        trChildren.push(getCellHTMLFromValue('th', 'highcharts-table-topheading', {
+                            scope: 'col',
+                            colspan: curColspan + 1
+                        }, cur));
+                        curColspan = 0;
+                    }
+                    else {
+                        // Cur is standalone. If it is same as sublevel,
+                        // remove sublevel and add just toplevel.
+                        if (cur === subheaders[i]) {
+                            if (exporting.options.useRowspanHeaders) {
+                                rowspan = 2;
+                                // eslint-disable-next-line @typescript-eslint/no-array-delete
+                                delete subheaders[i];
+                            }
+                            else {
+                                rowspan = 1;
+                                subheaders[i] = '';
+                            }
                         }
                         else {
                             rowspan = 1;
-                            subheaders[i] = '';
                         }
+                        const cell = getCellHTMLFromValue('th', 'highcharts-table-topheading', { scope: 'col' }, cur);
+                        if (rowspan > 1 && cell.attributes) {
+                            cell.attributes.valign = 'top';
+                            cell.attributes.rowspan = rowspan;
+                        }
+                        trChildren.push(cell);
                     }
-                    else {
-                        rowspan = 1;
-                    }
-                    const cell = getCellHTMLFromValue('th', 'highcharts-table-topheading', { scope: 'col' }, cur);
-                    if (rowspan > 1 && cell.attributes) {
-                        cell.attributes.valign = 'top';
-                        cell.attributes.rowspan = rowspan;
+                }
+                theadChildren.push({
+                    tagName: 'tr',
+                    children: trChildren
+                });
+            }
+            // Add the subheaders (the only headers if not using
+            // multilevels)
+            if (subheaders) {
+                const trChildren = [];
+                for (i = 0, len = subheaders.length; i < len; ++i) {
+                    if (typeof subheaders[i] !== 'undefined') {
+                        trChildren.push(getCellHTMLFromValue('th', null, { scope: 'col' }, subheaders[i]));
                     }
-                    trChildren.push(cell);
                 }
+                theadChildren.push({
+                    tagName: 'tr',
+                    children: trChildren
+                });
             }
-            theadChildren.push({
-                tagName: 'tr',
-                children: trChildren
+            return {
+                tagName: 'thead',
+                children: theadChildren
+            };
+        };
+        // Add table caption
+        const { tableCaption } = exporting.options || {};
+        if (tableCaption !== false) {
+            treeChildren.push({
+                tagName: 'caption',
+                attributes: {
+                    'class': 'highcharts-table-caption'
+                },
+                textContent: typeof tableCaption === 'string' ?
+                    tableCaption :
+                    options.title?.text || options.lang.chartTitle
             });
         }
-        // Add the subheaders (the only headers if not using multilevels)
-        if (subheaders) {
+        // Find longest row
+        for (let i = 0, len = rows.length; i < len; ++i) {
+            if (rows[i].length > rowLength) {
+                rowLength = rows[i].length;
+            }
+        }
+        // Add header
+        treeChildren.push(getTableHeaderHTML(topHeaders, subHeaders || [], Math.max(rowLength, subHeaders?.length || 0)));
+        // Transform the rows to HTML
+        const trs = [];
+        rows.forEach(function (row) {
             const trChildren = [];
-            for (i = 0, len = subheaders.length; i < len; ++i) {
-                if (typeof subheaders[i] !== 'undefined') {
-                    trChildren.push(getCellHTMLFromValue('th', null, { scope: 'col' }, subheaders[i]));
-                }
+            for (let j = 0; j < rowLength; j++) {
+                // Make first column a header too. Especially important for
+                // category axes, but also might make sense for datetime? Should
+                // await user feedback on this.
+                trChildren.push(getCellHTMLFromValue(j ? 'td' : 'th', null, j ? {} : { scope: 'row' }, row[j]));
             }
-            theadChildren.push({
+            trs.push({
                 tagName: 'tr',
                 children: trChildren
             });
-        }
-        return {
-            tagName: 'thead',
-            children: theadChildren
-        };
-    };
-    // Add table caption
-    const { tableCaption } = options.exporting || {};
-    if (tableCaption !== false) {
+        });
         treeChildren.push({
-            tagName: 'caption',
-            attributes: {
-                'class': 'highcharts-table-caption'
-            },
-            textContent: typeof tableCaption === 'string' ?
-                tableCaption :
-                options.title?.text || options.lang.chartTitle
+            tagName: 'tbody',
+            children: trs
         });
+        const e = {
+            tree: {
+                tagName: 'table',
+                id: `highcharts-data-table-${chart.index}`,
+                children: treeChildren
+            }
+        };
+        fireEvent(chart, 'afterGetTableAST', e);
+        return e.tree;
     }
-    // Find longest row
-    for (let i = 0, len = rows.length; i < len; ++i) {
-        if (rows[i].length > rowLength) {
-            rowLength = rows[i].length;
-        }
+    /**
+     * Hide the data table when visible.
+     *
+     * @function Highcharts.Exporting#hideData
+     *
+     * @requires modules/exporting
+     * @requires modules/export-data
+     */
+    function hideData() {
+        this.toggleDataTable(false);
     }
-    // Add header
-    treeChildren.push(getTableHeaderHTML(topHeaders, subHeaders, Math.max(rowLength, subHeaders.length)));
-    // Transform the rows to HTML
-    const trs = [];
-    rows.forEach(function (row) {
-        const trChildren = [];
-        for (let j = 0; j < rowLength; j++) {
-            // Make first column a header too. Especially important for
-            // category axes, but also might make sense for datetime? Should
-            // await user feedback on this.
-            trChildren.push(getCellHTMLFromValue(j ? 'td' : 'th', null, j ? {} : { scope: 'row' }, row[j]));
-        }
-        trs.push({
-            tagName: 'tr',
-            children: trChildren
-        });
-    });
-    treeChildren.push({
-        tagName: 'tbody',
-        children: trs
-    });
-    const e = {
-        tree: {
-            tagName: 'table',
-            id: `highcharts-data-table-${this.index}`,
-            children: treeChildren
+    /**
+     * Toggle showing data table.
+     *
+     * @private
+     * @function Highcharts.Exporting#hideData
+     *
+     * @param {boolean} [show]
+     * Whether to show data table or not.
+     *
+     * @requires modules/exporting
+     * @requires modules/export-data
+     */
+    function toggleDataTable(show) {
+        const chart = this.chart, 
+        // Create the div
+        createContainer = (show = pick(show, !this.isDataTableVisible)) &&
+            !this.dataTableDiv;
+        if (createContainer) {
+            this.dataTableDiv = ExportData_doc.createElement('div');
+            this.dataTableDiv.className = 'highcharts-data-table';
+            // Insert after the chart container
+            chart.renderTo.parentNode.insertBefore(this.dataTableDiv, chart.renderTo.nextSibling);
         }
-    };
-    fireEvent(this, 'aftergetTableAST', e);
-    return e.tree;
-}
-/**
- * Export-data module required. Hide the data table when visible.
- *
- * @function Highcharts.Chart#hideData
- */
-function chartHideData() {
-    this.toggleDataTable(false);
-}
-/**
- * @private
- */
-function chartToggleDataTable(show) {
-    show = pick(show, !this.isDataTableVisible);
-    // Create the div
-    const createContainer = show && !this.dataTableDiv;
-    if (createContainer) {
-        this.dataTableDiv = ExportData_doc.createElement('div');
-        this.dataTableDiv.className = 'highcharts-data-table';
-        // Insert after the chart container
-        this.renderTo.parentNode.insertBefore(this.dataTableDiv, this.renderTo.nextSibling);
-    }
-    // Toggle the visibility
-    if (this.dataTableDiv) {
-        const style = this.dataTableDiv.style, oldDisplay = style.display;
-        style.display = show ? 'block' : 'none';
-        // Generate the data table
-        if (show) {
-            this.dataTableDiv.innerHTML = (highcharts_AST_commonjs_highcharts_AST_commonjs2_highcharts_AST_root_Highcharts_AST_default()).emptyHTML;
-            const ast = new (highcharts_AST_commonjs_highcharts_AST_commonjs2_highcharts_AST_root_Highcharts_AST_default())([this.getTableAST()]);
-            ast.addToDOM(this.dataTableDiv);
-            fireEvent(this, 'afterViewData', {
-                element: this.dataTableDiv,
-                wasHidden: createContainer || oldDisplay !== style.display
-            });
+        // Toggle the visibility
+        if (this.dataTableDiv) {
+            const style = this.dataTableDiv.style, oldDisplay = style.display;
+            style.display = show ? 'block' : 'none';
+            // Generate the data table
+            if (show) {
+                this.dataTableDiv.innerHTML = (highcharts_AST_commonjs_highcharts_AST_commonjs2_highcharts_AST_root_Highcharts_AST_default()).emptyHTML;
+                const ast = new (highcharts_AST_commonjs_highcharts_AST_commonjs2_highcharts_AST_root_Highcharts_AST_default())([this.getTableAST()]);
+                ast.addToDOM(this.dataTableDiv);
+                fireEvent(chart, 'afterViewData', {
+                    element: this.dataTableDiv,
+                    wasHidden: createContainer || oldDisplay !== style.display
+                });
+            }
+            else {
+                fireEvent(chart, 'afterHideData');
+            }
         }
-        else {
-            fireEvent(this, 'afterHideData');
+        // Set the flag
+        this.isDataTableVisible = show;
+        // Change the menu item text
+        const exportDivElements = this.divElements, options = this.options, menuItems = options.buttons?.contextButton.menuItems, lang = chart.options.lang;
+        if (options &&
+            options.menuItemDefinitions &&
+            lang &&
+            lang.viewData &&
+            lang.hideData &&
+            menuItems &&
+            exportDivElements) {
+            const exportDivElement = exportDivElements[menuItems.indexOf('viewData')];
+            if (exportDivElement) {
+                highcharts_AST_commonjs_highcharts_AST_commonjs2_highcharts_AST_root_Highcharts_AST_default().setElementHTML(exportDivElement, this.isDataTableVisible ? lang.hideData : lang.viewData);
+            }
         }
     }
-    // Set the flag
-    this.isDataTableVisible = show;
-    // Change the menu item text
-    const exportDivElements = this.exportDivElements, options = this.options.exporting, menuItems = options &&
-        options.buttons &&
-        options.buttons.contextButton.menuItems, lang = this.options.lang;
-    if (options &&
-        options.menuItemDefinitions &&
-        lang &&
-        lang.viewData &&
-        lang.hideData &&
-        menuItems &&
-        exportDivElements) {
-        const exportDivElement = exportDivElements[menuItems.indexOf('viewData')];
-        if (exportDivElement) {
-            highcharts_AST_commonjs_highcharts_AST_commonjs2_highcharts_AST_root_Highcharts_AST_default().setElementHTML(exportDivElement, this.isDataTableVisible ? lang.hideData : lang.viewData);
-        }
+    /**
+     * View the data in a table below the chart.
+     *
+     * @function Highcharts.Exporting#viewData
+     *
+     * @emits Highcharts.Chart#event:afterViewData
+     *
+     * @requires modules/exporting
+     * @requires modules/export-data
+     */
+    function viewData() {
+        this.toggleDataTable(true);
     }
-}
-/**
- * Export-data module required. View the data in a table below the chart.
- *
- * @function Highcharts.Chart#viewData
- *
- * @emits Highcharts.Chart#event:afterViewData
- */
-function chartViewData() {
-    this.toggleDataTable(true);
-}
-/**
- * @private
- */
-function compose(ChartClass, SeriesClass) {
-    const chartProto = ChartClass.prototype;
-    if (!chartProto.getCSV) {
-        const exportingOptions = getOptions().exporting;
-        // Add an event listener to handle the showTable option
-        addEvent(ChartClass, 'afterViewData', onChartAfterViewData);
-        addEvent(ChartClass, 'render', onChartRenderer);
-        addEvent(ChartClass, 'destroy', onChartDestroy);
-        chartProto.downloadCSV = chartDownloadCSV;
-        chartProto.downloadXLS = chartDownloadXLS;
-        chartProto.getCSV = chartGetCSV;
-        chartProto.getDataRows = chartGetDataRows;
-        chartProto.getTable = chartGetTable;
-        chartProto.getTableAST = chartGetTableAST;
-        chartProto.hideData = chartHideData;
-        chartProto.toggleDataTable = chartToggleDataTable;
-        chartProto.viewData = chartViewData;
-        // Add "Download CSV" to the exporting menu.
-        // @todo consider move to defaults
-        if (exportingOptions) {
-            extend(exportingOptions.menuItemDefinitions, {
-                downloadCSV: {
-                    textKey: 'downloadCSV',
-                    onclick: function () {
-                        this.downloadCSV();
-                    }
-                },
-                downloadXLS: {
-                    textKey: 'downloadXLS',
-                    onclick: function () {
-                        this.downloadXLS();
-                    }
-                },
-                viewData: {
-                    textKey: 'viewData',
-                    onclick: function () {
-                        wrapLoading.call(this, this.toggleDataTable);
-                    }
+    /**
+     * Wrapper function for the download functions, which handles showing and
+     * hiding the loading message
+     *
+     * @private
+     *
+     * @requires modules/exporting
+     * @requires modules/export-data
+     */
+    function wrapLoading(fn) {
+        const chart = this.chart, showMessage = Boolean(this.options.showExportInProgress);
+        // Prefer requestAnimationFrame if available
+        const timeoutFn = ExportData_win.requestAnimationFrame || setTimeout;
+        // Outer timeout avoids menu freezing on click
+        timeoutFn(() => {
+            showMessage &&
+                chart.showLoading(chart.options.lang.exportInProgress);
+            timeoutFn(() => {
+                try {
+                    fn.call(this);
+                }
+                finally {
+                    showMessage && chart.hideLoading();
                 }
             });
-            if (exportingOptions.buttons &&
-                exportingOptions.buttons.contextButton.menuItems) {
-                exportingOptions.buttons.contextButton.menuItems.push('separator', 'downloadCSV', 'downloadXLS', 'viewData');
-            }
-        }
-        setOptions(ExportData_ExportDataDefaults);
-        const { arearange: AreaRangeSeries, gantt: GanttSeries, map: MapSeries, mapbubble: MapBubbleSeries, treemap: TreemapSeries, xrange: XRangeSeries } = SeriesClass.types;
-        if (AreaRangeSeries) {
-            AreaRangeSeries.prototype.keyToAxis = {
-                low: 'y',
-                high: 'y'
-            };
-        }
-        if (GanttSeries) {
-            GanttSeries.prototype.exportKey = 'name';
-            GanttSeries.prototype.keyToAxis = {
-                start: 'x',
-                end: 'x'
-            };
-        }
-        if (MapSeries) {
-            MapSeries.prototype.exportKey = 'name';
-        }
-        if (MapBubbleSeries) {
-            MapBubbleSeries.prototype.exportKey = 'name';
-        }
-        if (TreemapSeries) {
-            TreemapSeries.prototype.exportKey = 'name';
-        }
-        if (XRangeSeries) {
-            XRangeSeries.prototype.keyToAxis = {
-                x2: 'x'
-            };
-        }
-    }
-}
-/**
- * Get a blob object from content, if blob is supported
- *
- * @private
- * @param {string} content
- *        The content to create the blob from.
- * @param {string} type
- *        The type of the content.
- * @return {string|undefined}
- *         The blob object, or undefined if not supported.
- */
-function getBlobFromContent(content, type) {
-    const nav = ExportData_win.navigator, domurl = ExportData_win.URL || ExportData_win.webkitURL || ExportData_win;
-    try {
-        // MS specific
-        if ((nav.msSaveOrOpenBlob) && ExportData_win.MSBlobBuilder) {
-            const blob = new ExportData_win.MSBlobBuilder();
-            blob.append(content);
-            return blob.getBlob('image/svg+xml');
-        }
-        return domurl.createObjectURL(new ExportData_win.Blob(['\uFEFF' + content], // #7084
-        { type: type }));
-    }
-    catch (e) {
-        // Ignore
+        });
     }
-}
-/**
- * @private
- */
-function onChartAfterViewData() {
-    const chart = this, dataTableDiv = chart.dataTableDiv, getCellValue = (tr, index) => tr.children[index].textContent, comparer = (index, ascending) => (a, b) => {
-        const sort = (v1, v2) => (v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ?
-            v1 - v2 :
-            v1.toString().localeCompare(v2));
-        return sort(getCellValue(ascending ? a : b, index), getCellValue(ascending ? b : a, index));
-    };
-    if (dataTableDiv &&
-        chart.options.exporting &&
-        chart.options.exporting.allowTableSorting) {
-        const row = dataTableDiv.querySelector('thead tr');
-        if (row) {
-            row.childNodes.forEach((th) => {
-                const table = th.closest('table');
-                th.addEventListener('click', function () {
-                    const rows = [...dataTableDiv.querySelectorAll('tr:not(thead tr)')], headers = [...th.parentNode.children];
-                    rows.sort(comparer(headers.indexOf(th), chart.ascendingOrderInTable =
-                        !chart.ascendingOrderInTable)).forEach((tr) => {
-                        table.appendChild(tr);
-                    });
-                    headers.forEach((th) => {
-                        [
-                            'highcharts-sort-ascending',
-                            'highcharts-sort-descending'
-                        ].forEach((className) => {
-                            if (th.classList.contains(className)) {
-                                th.classList.remove(className);
-                            }
-                        });
+    /**
+     * Function that runs on the chart's 'afterViewData' event.
+     *
+     * @private
+     * @function Highcharts.Chart#onChartAfterViewData
+     *
+     * @requires modules/exporting
+     * @requires modules/export-data
+     */
+    function onChartAfterViewData() {
+        const exporting = this.exporting, dataTableDiv = exporting?.dataTableDiv, getCellValue = (tr, index) => tr.children[index].textContent, comparer = (index, ascending) => (a, b) => {
+            const sort = (v1, v2) => (v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ?
+                v1 - v2 :
+                v1.toString().localeCompare(v2));
+            return sort(getCellValue(ascending ? a : b, index), getCellValue(ascending ? b : a, index));
+        };
+        if (dataTableDiv && exporting.options.allowTableSorting) {
+            const row = dataTableDiv.querySelector('thead tr');
+            if (row) {
+                row.childNodes.forEach((th) => {
+                    const tableBody = dataTableDiv.querySelector('tbody');
+                    th.addEventListener('click', function () {
+                        const rows = [...dataTableDiv.querySelectorAll('tr:not(thead tr)')], headers = [...th.parentNode.children];
+                        if (exporting) {
+                            rows.sort(comparer(headers.indexOf(th), exporting.ascendingOrderInTable =
+                                !exporting.ascendingOrderInTable)).forEach((tr) => {
+                                tableBody?.appendChild(tr);
+                            });
+                            headers.forEach((th) => {
+                                [
+                                    'highcharts-sort-ascending',
+                                    'highcharts-sort-descending'
+                                ].forEach((className) => {
+                                    if (th.classList.contains(className)) {
+                                        th.classList.remove(className);
+                                    }
+                                });
+                            });
+                            th.classList.add(exporting.ascendingOrderInTable ?
+                                'highcharts-sort-ascending' :
+                                'highcharts-sort-descending');
+                        }
                     });
-                    th.classList.add(chart.ascendingOrderInTable ?
-                        'highcharts-sort-ascending' :
-                        'highcharts-sort-descending');
                 });
-            });
+            }
         }
     }
-}
-/**
- * Handle the showTable option
- * @private
- */
-function onChartRenderer() {
-    if (this.options &&
-        this.options.exporting &&
-        this.options.exporting.showTable &&
-        !this.options.chart.forExport) {
-        this.viewData();
+    /**
+     * Function that runs on the chart's 'render' event. Handle the showTable
+     * option.
+     *
+     * @private
+     * @function Highcharts.Chart#onChartRenderer
+     *
+     * @requires modules/exporting
+     * @requires modules/export-data
+     */
+    function onChartRenderer() {
+        if (this.options?.exporting?.showTable &&
+            !this.options.chart.forExport) {
+            this.exporting?.viewData();
+        }
     }
-}
-/**
- * Clean up
- * @private
- */
-function onChartDestroy() {
-    this.dataTableDiv?.remove();
-}
+    /**
+     * Function that runs on the chart's 'destroy' event. Handle cleaning up the
+     * dataTableDiv element.
+     *
+     * @private
+     * @function Highcharts.Chart#onChartDestroy
+     *
+     * @requires modules/exporting
+     * @requires modules/export-data
+     */
+    function onChartDestroy() {
+        this.exporting?.dataTableDiv?.remove();
+    }
+})(ExportData || (ExportData = {}));
 /* *
  *
- *  Default Export
+ * Default Export
  *
  * */
-const ExportData = {
-    compose
-};
 /* harmony default export */ const ExportData_ExportData = (ExportData);
 /* *
  *
@@ -1440,7 +1633,7 @@ const G = (highcharts_commonjs_highcharts_commonjs2_highcharts_root_Highcharts_d
 G.dataURLtoBlob = G.dataURLtoBlob || Extensions_DownloadURL.dataURLtoBlob;
 G.downloadURL = G.downloadURL || Extensions_DownloadURL.downloadURL;
 // Compose
-ExportData_ExportData.compose(G.Chart, G.Series);
+ExportData_ExportData.compose(G.Chart, G.Exporting, G.Series);
 /* harmony default export */ const export_data_src = ((highcharts_commonjs_highcharts_commonjs2_highcharts_root_Highcharts_default()));
 
 __webpack_exports__ = __webpack_exports__["default"];