mig-schema-table 3.0.111 → 3.0.113

package/dist/SchemaTable/index.js

@@ -22,9 +22,9 @@ import { parseLocationHash, serializeLocationHash } from "../inc/data";
 import Th, { EColumnFilterStatus } from "./Th";
 import ThMenu from "./ThMenu";
 import { saveAs } from "file-saver";
-import { unparse } from "papaparse";
 import ColumnResizers from "./ColumnResizers";
-import { sum } from "lodash";
+import { difference, sum } from "lodash";
+import * as ExcelJS from "exceljs";
 const startOfTheWorldDate = new Date("1000-01-01 00:00:00Z");
 const numberFormatter = new Intl.NumberFormat("nl-NL");
 const currencyFormatter = new Intl.NumberFormat("nl-NL", {
@@ -608,14 +608,31 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
         if (!sortedRenderData) {
             return;
         }
-        saveAs(new Blob([
-            unparse(sortedRenderData.map((row) => {
-                const { _index, SELECT_ALL_COLUMN_NAME } = row, data = __rest(row, ["_index", "SELECT_ALL_COLUMN_NAME"]);
-                return data;
-            })),
-        ], {
-            type: "text/csv;charset=utf-8",
-        }), "export.csv");
+        const workbook = new ExcelJS.Workbook();
+        const worksheet = workbook.addWorksheet("Data");
+        if (!sortedRenderData.length) {
+            return;
+        }
+        worksheet.addRow(difference(Object.keys(sortedRenderData[0]), [
+            "_index",
+            "SELECT_ALL_COLUMN_NAME",
+        ]));
+        worksheet.addRows(sortedRenderData.map((row) => {
+            const { _index, SELECT_ALL_COLUMN_NAME } = row, data = __rest(row, ["_index", "SELECT_ALL_COLUMN_NAME"]);
+            return Object.values(data);
+        }));
+        // Save the workbook to a Blob
+        workbook.xlsx
+            .writeBuffer()
+            .then((buffer) => {
+            const blob = new Blob([buffer], {
+                type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+            });
+            saveAs(blob, "export.xlsx");
+        })
+            .catch((error) => {
+            console.error("Error generating Excel file:", error);
+        });
     }, [sortedRenderData]);
     return (_jsxs("div", Object.assign({ className: `schema-table${onRowClick ? " schema-table--clickable-rows" : ""}`, style: Object.assign(Object.assign({}, style), { width: rowWidth }), role: "table" }, { children: [_jsxs("div", Object.assign({ className: "schema-table__action-container" }, { children: [_jsx("div", { children: isSearchable ? (_jsx("input", { className: "schema-table__search", type: "text", placeholder: searchPlaceholder || "Search...", value: searchQuery, onChange: onSearchChange, onKeyDown: onInputKeyDown, autoFocus: enableAutoFocus, onBlur: onSearchBlur })) : null }), customElement || (_jsx("div", { className: "schema-table__custom_element_placeholder" })), enableRowCounter ? (_jsx("span", Object.assign({ className: "schema-table__row_counter" }, { children: translate("showingFilteredCountOfTotalCount", (sortedRenderData === null || sortedRenderData === void 0 ? void 0 : sortedRenderData.length) || 0, data.length) }))) : null, isExportable ? (_jsx("button", Object.assign({ onClick: onExportDataClick, style: { marginLeft: 8 }, disabled: !(sortedRenderData === null || sortedRenderData === void 0 ? void 0 : sortedRenderData.length) }, { children: translate("exportData") }))) : null, isSearchable || isColumnFilterable ? (_jsx("button", Object.assign({ onClick: onClearFiltersButtonClick, style: { marginLeft: 8 }, disabled: Object.keys(columnFilterMap).length + searchQuery.length === 0 }, { children: translate("clearFilters") }))) : null] })), columnWidths ? (_jsxs("div", Object.assign({ className: "schema-table__column_resize_container" }, { children: [_jsx(Heading, Object.assign({ height: 50, itemCount: columnCount, itemSize: getColumnWidth, layout: "horizontal", width: rowWidth, sortAsc: sortAsc, setSortAsc: onSetSortAsc, setSortColumn: onSetSortColumn, sortColumn: sortColumn, sortedRenderData: sortedRenderData, className: "schema-table__th-row" }, { children: ConfiguredTh }), `thead_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}_${columnWidths.join(" ")}`), sourceData && !isDirty ? (_jsx(VariableSizeGrid, Object.assign({ className: "schema-table__tbody", height: tableBodyHeight, width: rowWidth, columnWidth: getColumnWidth, rowHeight: getRowHeight, columnCount: columnCount, rowCount: rowCount, ref: tableRef }, { children: SchemaTableTd }), `tbody_${tableBodyHeight}_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}_${columnCount}_${columnWidths.join(" ")}`)) : (_jsx("div", Object.assign({ style: {
                             width: rowWidth,

package/dist/index.css

@@ -156,6 +156,9 @@
   align-items: center;
   cursor: pointer;
 }
+.schema-table-menu li .react-datepicker {
+  width: 20.5rem;
+}
 .schema-table-menu li:hover {
   background-color: #eff6fb;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mig-schema-table",
-  "version": "3.0.111",
+  "version": "3.0.113",
   "main": "dist/index.js",
   "files": [
     "dist/"
@@ -10,16 +10,15 @@
   "dependencies": {
     "@types/file-saver": "^2.0.7",
     "@types/jest": "^27.5.2",
-    "@types/papaparse": "^5.3.14",
     "@types/react": "^18.2.6",
     "@types/react-datepicker": "^4.11.2",
     "@types/react-dom": "^18.2.4",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
+    "exceljs": "^4.4.0",
     "file-saver": "^2.0.5",
     "lodash": "^4.17.21",
     "openapi3-ts": "^4.1.2",
-    "papaparse": "^5.4.1",
     "react": "^18.2.0",
     "react-datepicker": "^6.2.0",
     "react-dom": "^18.2.0",
@@ -52,11 +51,11 @@
     ]
   },
   "devDependencies": {
-    "@types/node": "^20.12.5",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@types/date-fns": "^2.6.0",
     "@types/lodash": "^4.14.194",
+    "@types/node": "^20.12.5",
     "@types/react-window": "^1.8.5",
     "axios": "^1.4.0",
     "prettier": "^2.8.8",