Add npm package to import xlsx format correctly (#233)

* download use library * upd table sheet * Update CHANGELOG.md --------- Co-authored-by: Mikhail Volkov <[email protected]>
VolkovLabs · Feb 5, 2025 · 9184ffc · 9184ffc
1 parent fedbb65
commit 9184ffc
Show file tree

Hide file tree

Showing 7 changed files with 348 additions and 30 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,7 +4,7 @@
 
 ### Features / Enhancements
 
-- Added download settings (#227)
+- Added download settings for Excel format (#227, #233)
 - Updated data links to prevent reloading dashboard page (#232)
 - Added JSON cell type with inspector (#224)
 - Added column configuration for actions (#231)

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,7 +20,8 @@
     "react-dom": "^18.3.1",
     "semver": "^7.6.3",
     "tslib": "^2.8.0",
-    "uuid": "^11.0.4"
+    "uuid": "^11.0.4",
+    "xlsx": "^0.18.5"
   },
   "description": "Simplify data visualization in table format",
   "devDependencies": {

diff --git a/src/hooks/useExportData.test.ts b/src/hooks/useExportData.test.ts
@@ -5,11 +5,13 @@ import { renderHook } from '@testing-library/react';
 import { ACTIONS_COLUMN_ID } from '@/constants';
 import { ExportFormatType } from '@/types';
 import {
+  convertToXlsxFormat,
   createColumnAccessorFn,
   createColumnMeta,
   createTableConfig,
   dataFrameToObjectArray,
-  downloadFile,
+  downloadCsv,
+  downloadXlsx,
 } from '@/utils';
 
 import { useExportData } from './useExportData';
@@ -18,7 +20,9 @@ import { useExportData } from './useExportData';
  * Mock file utils
  */
 jest.mock('../utils/file', () => ({
-  downloadFile: jest.fn(),
+  downloadCsv: jest.fn(),
+  convertToXlsxFormat: jest.fn(),
+  downloadXlsx: jest.fn(),
 }));
 
 describe('useExportData', () => {
@@ -71,7 +75,7 @@ describe('useExportData', () => {
 
     result.current({ table: null });
 
-    expect(downloadFile).not.toHaveBeenCalled();
+    expect(downloadCsv).not.toHaveBeenCalled();
     expect(replaceVariables).not.toHaveBeenCalled();
   });
 
@@ -128,14 +132,13 @@ describe('useExportData', () => {
     result.current({ table });
 
     expect(replaceVariables).toHaveBeenCalled();
-    expect(downloadFile).toHaveBeenCalledWith(
+    expect(downloadCsv).toHaveBeenCalledWith(
       toCSV([
         toDataFrame({
           fields: [nameField, valueField],
         }),
       ]),
-      expect.any(String),
-      false
+      expect.any(String)
     );
   });
 
@@ -195,14 +198,75 @@ describe('useExportData', () => {
 
     result.current({ table });
 
-    expect(downloadFile).toHaveBeenCalledWith(
+    expect(downloadCsv).toHaveBeenCalledWith(
       toCSV([
         toDataFrame({
           fields: [nameField, valueField],
         }),
       ]),
-      expect.any(String),
-      false
+      expect.any(String)
     );
   });
+
+  it('Should download data as xlsx', () => {
+    const mockedXlsxContent = [
+      ['name', 'value'],
+      ['device1', 10],
+      ['device2', 20],
+    ];
+    jest.mocked(convertToXlsxFormat).mockReturnValueOnce(mockedXlsxContent);
+    const columns: Array<ColumnDef<unknown>> = [
+      {
+        id: 'name',
+        accessorFn: createColumnAccessorFn('name'),
+        meta: createColumnMeta({
+          field: nameField,
+        }),
+      },
+      {
+        id: 'value',
+        accessorFn: createColumnAccessorFn('value'),
+        meta: createColumnMeta({
+          field: valueField,
+        }),
+      },
+    ];
+
+    const { result } = renderHook(() =>
+      useExportData({
+        data,
+        columns,
+        panelTitle: 'Tables',
+        tableConfig: createTableConfig({
+          name: 'hello',
+        }),
+        exportFormat: ExportFormatType.XLSX,
+        replaceVariables,
+      })
+    );
+
+    const table = createTable({
+      data,
+      columns,
+      getCoreRowModel: getCoreRowModel(),
+      getFilteredRowModel: getFilteredRowModel(),
+      enableFilters: true,
+      enableSorting: true,
+      onStateChange: () => null,
+      renderFallbackValue: () => null,
+      state: {
+        columnPinning: {
+          left: [],
+          right: [],
+        },
+        columnFilters: [],
+        sorting: [],
+      },
+    });
+
+    result.current({ table });
+
+    expect(replaceVariables).toHaveBeenCalled();
+    expect(downloadXlsx).toHaveBeenCalledWith(mockedXlsxContent, expect.any(String), 'hello');
+  });
 });
diff --git a/src/hooks/useExportData.ts b/src/hooks/useExportData.ts
@@ -11,7 +11,7 @@ import { useCallback } from 'react';
 
 import { ACTIONS_COLUMN_ID } from '@/constants';
 import { ExportFormatType, TableConfig } from '@/types';
-import { convertTableToDataFrame, downloadFile } from '@/utils';
+import { convertTableToDataFrame, convertToXlsxFormat, downloadCsv, downloadXlsx } from '@/utils';
 
 /**
  * Use Export Data
@@ -94,9 +94,17 @@ export const useExportData = <TData>({
       }
 
       /**
-       * Download File
+       * Download XLSX File
        */
-      return downloadFile(content, `${prefix}${dateTimeFormat(new Date())}`, exportFormat === ExportFormatType.XLSX);
+      if (exportFormat === ExportFormatType.XLSX) {
+        const xlsxContent = convertToXlsxFormat(columns, data);
+        return downloadXlsx(xlsxContent, `${prefix}${dateTimeFormat(new Date())}`, tableConfig?.name);
+      }
+
+      /**
+       * Download CSV File
+       */
+      return downloadCsv(content, `${prefix}${dateTimeFormat(new Date())}`);
     },
     [columns, data, exportFormat, panelTitle, replaceVariables, tableConfig?.name]
   );