feat(lots): fixed the column width issue on passing of xStep, and autofilter

It supports auto filter for all columns in the table header

fix #7, fix #8

Author: susanta96

CHANGELOG.md

@@ -6,6 +6,18 @@ changes may not be included if they are not expected to break existing code.
 
 * Export `NaN` values to `#NUM!` and infinite values to `#DIV/0!`
 
+## v2.6.0
+
+* Stable Version. Fixed Column Width bugs on xStep Parameter
+* Added New feature to handle auto filter support on the headers. Just add autoFilterForAllColumn to `true`.
+* Reduced the size of the package. Trying to improve more.
+
+## v2.5.0
+
+* It does support bigHeading properly. From v2.0.9 - v2.4.0 was not stable due to continues work on BigHeading Feature, 
+* It does have good default Styling even if you don't pass it.
+
+
 ## v2.0.8
 
 * Stable Version. Older all the version from 2.0.0 has bugs. Please do not use.

README.md

@@ -44,6 +44,7 @@ yarn add react-xlsx-wrapper@latest
 | :------- | :---------------------- | :------ | :------- | :----------------- |
 | name     | `string`                | `""`    | `true`   | Sheet name in file |
 | bigHeading | ` ExcelSheetCol` |`undefined`|`false`| Big Merged Cell Heading
+| autoFilterForAllColumn | `boolean` | `false` | `false` | Auto Filter Generated Based on Colums
 | data     | `any[]`         | `null`  | `false`  | Excel Sheet data   |
 | dataSet  | `ExcelSheetData[]` | `null`  | `false`  | Excel Sheet data   |
 | children | `ExcelColumn`           | `null`  | `false`  | ExcelColumns       |

dist/ExcelPlugin/components/ExcelFile.js

@@ -66,7 +66,7 @@ var ExcelFile = /*#__PURE__*/function (_react_1$default$Comp) {
         if (typeof sheet.props.dataSet === "undefined" || sheet.props.dataSet.length === 0) {
           ws = (0, DataUtil_1.excelSheetFromAoA)(_this.createSheetData(sheet));
         } else {
-          ws = (0, DataUtil_1.excelSheetFromDataSet)(sheet.props.dataSet, sheet.props.bigHeading);
+          ws = (0, DataUtil_1.excelSheetFromDataSet)(sheet.props.dataSet, sheet.props.bigHeading, sheet.props.autoFilterForAllColumn);
         }
         // add worksheet to workbook
         xlsx_js_style_1.utils.book_append_sheet(wb, ws, wsName);

dist/ExcelPlugin/utils/DataUtil.js

@@ -50,7 +50,17 @@ var dateToNumber = function dateToNumber(v, date1904) {
   return (epoch - Number(new Date(Date.UTC(1899, 11, 30)))) / (24 * 60 * 60 * 1000);
 };
 exports.dateToNumber = dateToNumber;
-var excelSheetFromDataSet = function excelSheetFromDataSet(dataSet, bigHeading) {
+/**
+ * This returns the worksheet object for the given dataSet, also accept bigHeading.
+ *
+ * @param dataSet - The ExcelSheetData array is required
+ * @param bigHeading - ExcelSheetCol (Optional)
+ * @returns WorkSheet Object
+ *
+ * @author Susanta Chakraborty
+ * @date 2023-06-14
+ */
+var excelSheetFromDataSet = function excelSheetFromDataSet(dataSet, bigHeading, autoFilterForAllColumn) {
   /*
   Assuming the structure of dataset
   {
@@ -108,6 +118,14 @@ var excelSheetFromDataSet = function excelSheetFromDataSet(dataSet, bigHeading)
       rowCount += 1;
     }
     var columnsInfo = [];
+    // if xStep has value then we need to skip some columns
+    if (xSteps > 0) {
+      for (var i = 0; i < xSteps; i++) {
+        columnsInfo.push({
+          wpx: 100
+        });
+      }
+    }
     if (columns.length >= 0) {
       columns.forEach(function (col, index) {
         var cellRef = xlsx_js_style_1.utils.encode_cell({
@@ -126,6 +144,23 @@ var excelSheetFromDataSet = function excelSheetFromDataSet(dataSet, bigHeading)
 
         getHeaderCell(colTitle, cellRef, ws);
       });
+      if (autoFilterForAllColumn) {
+        var filterRange = {
+          s: {
+            c: xSteps,
+            r: rowCount
+          },
+          e: {
+            c: xSteps + dataSetItem.columns.length - 1,
+            r: rowCount
+          }
+        };
+        var filterRef = xlsx_js_style_1.utils.encode_range(filterRange);
+        console.log(filterRef);
+        ws['!autofilter'] = {
+          ref: filterRef
+        };
+      }
       rowCount += 1;
     }
     if (columnsInfo.length > 0) {

src-js/ExcelPlugin/components/ExcelFile.js

@@ -60,7 +60,7 @@ class ExcelFile extends react_1.default.Component {
                 ws = (0, DataUtil_1.excelSheetFromAoA)(this.createSheetData(sheet));
             }
             else {
-                ws = (0, DataUtil_1.excelSheetFromDataSet)(sheet.props.dataSet, sheet.props.bigHeading);
+                ws = (0, DataUtil_1.excelSheetFromDataSet)(sheet.props.dataSet, sheet.props.bigHeading, sheet.props.autoFilterForAllColumn);
             }
             // add worksheet to workbook
             xlsx_js_style_1.utils.book_append_sheet(wb, ws, wsName);

src-js/ExcelPlugin/utils/DataUtil.js

@@ -45,7 +45,17 @@ const dateToNumber = (v, date1904) => {
     return (epoch - Number(new Date(Date.UTC(1899, 11, 30)))) / (24 * 60 * 60 * 1000);
 };
 exports.dateToNumber = dateToNumber;
-const excelSheetFromDataSet = (dataSet, bigHeading) => {
+/**
+ * This returns the worksheet object for the given dataSet, also accept bigHeading.
+ *
+ * @param dataSet - The ExcelSheetData array is required
+ * @param bigHeading - ExcelSheetCol (Optional)
+ * @returns WorkSheet Object
+ *
+ * @author Susanta Chakraborty
+ * @date 2023-06-14
+ */
+const excelSheetFromDataSet = (dataSet, bigHeading, autoFilterForAllColumn) => {
     /*
     Assuming the structure of dataset
     {
@@ -82,6 +92,12 @@ const excelSheetFromDataSet = (dataSet, bigHeading) => {
             rowCount += 1;
         }
         let columnsInfo = [];
+        // if xStep has value then we need to skip some columns
+        if (xSteps > 0) {
+            for (let i = 0; i < xSteps; i++) {
+                columnsInfo.push({ wpx: 100 });
+            }
+        }
         if (columns.length >= 0) {
             columns.forEach((col, index) => {
                 let cellRef = xlsx_js_style_1.utils.encode_cell({ c: xSteps + index, r: rowCount });
@@ -93,6 +109,12 @@ const excelSheetFromDataSet = (dataSet, bigHeading) => {
                 }
                 getHeaderCell(colTitle, cellRef, ws);
             });
+            if (autoFilterForAllColumn) {
+                const filterRange = { s: { c: xSteps, r: rowCount }, e: { c: xSteps + dataSetItem.columns.length - 1, r: rowCount } };
+                const filterRef = xlsx_js_style_1.utils.encode_range(filterRange);
+                console.log(filterRef);
+                ws['!autofilter'] = { ref: filterRef };
+            }
             rowCount += 1;
         }
         if (columnsInfo.length > 0) {

src/ExcelPlugin/components/ExcelFile.tsx

@@ -80,7 +80,7 @@ class ExcelFile extends React.Component<ExcelFileProps> {
         ) {
           ws = excelSheetFromAoA(this.createSheetData(sheet));
         } else {
-          ws = excelSheetFromDataSet(sheet.props.dataSet, sheet.props.bigHeading);
+          ws = excelSheetFromDataSet(sheet.props.dataSet, sheet.props.bigHeading, sheet.props.autoFilterForAllColumn);
         }
         // add worksheet to workbook
         utils.book_append_sheet(wb, ws, wsName);

src/ExcelPlugin/utils/DataUtil.ts

@@ -48,7 +48,17 @@ const dateToNumber = (v: string, date1904?: boolean): number => {
     return (epoch - Number(new Date(Date.UTC(1899, 11, 30)))) / (24 * 60 * 60 * 1000);
 };
 
-const excelSheetFromDataSet = (dataSet: ExcelSheetData[], bigHeading?: ExcelSheetCol): WorkSheet => {
+/**
+ * This returns the worksheet object for the given dataSet, also accept bigHeading.
+ *
+ * @param dataSet - The ExcelSheetData array is required
+ * @param bigHeading - ExcelSheetCol (Optional)
+ * @returns WorkSheet Object
+ *
+ * @author Susanta Chakraborty
+ * @date 2023-06-14
+ */
+const excelSheetFromDataSet = (dataSet: ExcelSheetData[], bigHeading?: ExcelSheetCol, autoFilterForAllColumn?: boolean): WorkSheet => {
     /*
     Assuming the structure of dataset
     {
@@ -91,6 +101,13 @@ const excelSheetFromDataSet = (dataSet: ExcelSheetData[], bigHeading?: ExcelShee
         }
 
         let columnsInfo: ColInfo[] = [];
+        // if xStep has value then we need to skip some columns
+        if (xSteps > 0) {
+            for (let i = 0; i < xSteps; i++) {
+                columnsInfo.push({ wpx: 100 });
+            }
+        }
+
         if (columns.length >= 0) {
             columns.forEach((col, index) => {
                 let cellRef = utils.encode_cell({ c: xSteps + index, r: rowCount });
@@ -103,6 +120,13 @@ const excelSheetFromDataSet = (dataSet: ExcelSheetData[], bigHeading?: ExcelShee
                 getHeaderCell(colTitle, cellRef, ws);
             });
 
+            if(autoFilterForAllColumn){
+                const filterRange: Range = { s: { c: xSteps, r: rowCount }, e: { c: xSteps + dataSetItem.columns.length - 1, r: rowCount } };
+                const filterRef = utils.encode_range(filterRange);
+                console.log(filterRef);
+                ws['!autofilter'] = { ref: filterRef };
+            }
+
             rowCount += 1;
         }
 

types/index.d.ts

@@ -16,6 +16,7 @@ declare module 'react-xlsx-wrapper' {
     dataSet?: ExcelSheetData[];
     value?: ExcelValue[] | (() => void);
     children?: React.ReactElement | Array<React.ReactElement>;
+    autoFilterForAllColumn?: boolean;
   }
 
   export interface ExcelSheetData {

types/types.md

@@ -10,10 +10,12 @@ interface ExcelFileProps {
 
 interface ExcelSheetProps {
     name: string;
+    bigHeading?: ExcelSheetCol;
     data?: any[];
     dataSet?: ExcelSheetData[];
     value?: ExcelValue[] | (() => void);
     children?: React.ReactElement | Array<React.ReactElement>;
+    autoFilterForAllColumn?: boolean;
 }
 
 interface ExcelSheetData {