nillud-data-table 1.0.4 → 1.0.6

package/README.md

@@ -40,6 +40,9 @@ const data = [{ name: 'Иван' }]
 import { DataTable } from 'nillud-data-table'
 import 'nillud-data-table/styles.css'
 
+import ExportExcel from 'nillud-data-table/export/ExportExcel';
+import WordExport from 'nillud-data-table/export/WordExport';
+
 const columns = [{ field: 'name', title: 'Имя' }]
 const data = [{ name: 'Иван' }]
 
@@ -55,6 +58,8 @@ const data = [{ name: 'Иван' }]
     scrollHeight={410}
     excelBtn
     wordBtn
+    WordExportComponent={WordExport}
+    ExportExcelComponent={ExportExcel}
     downloadSectionLeftSideContent={<button className='base-button' onClick={() => setCanvas(true)}>OffCanvas</button>}
     excelCustomColumns={[
         {
@@ -434,19 +439,45 @@ excelCustomColumns={[
 
 Для использования модуля Excel необходимо установить библиотеку [exceljs](https://www.npmjs.com/package/exceljs)
 
-Для использования модуля экспорта необходимо его подключить
-```ts
-import { exportToExcel } from 'nillud-data-table/export-excel';
-``` 
+```bash
+npm i exceljs
+-или-
+yarn add exceljs
+```
+
+```tsx
+import ExportExcel from 'nillud-data-table/export/ExportExcel';
+
+<DataTable>
+    ...
+    excelBtn
+    ExportExcelComponent={ExportExcel}
+    ...
+</DataTable>
+```
 
 ### wordBtn
 
 Необязательный параметр. Тип **boolean**, по умолчанию **false**. При значении **true** над таблицей с правой стороны появляется кнопка экспорта Word, которая по умолчанию принимает в себя исходный массив **tableData**
 
-Для использования модуля экспорта необходимо его подключить
-```ts
-import { exportToWord } from 'nillud-data-table/export-word';
-``` 
+Для использования модуля Word необходимо установить библиотеки [docx](https://www.npmjs.com/package/docx) и [file-saver](https://www.npmjs.com/package/file-saver)
+
+```bash
+npm i docx file-saver
+-или-
+yarn add docx file-saver
+```
+
+```tsx
+import WordExport from 'nillud-data-table/export/WordExport';
+
+<DataTable>
+    ...
+    wordBtn
+    WordExportComponent={WordExport}
+    ...
+</DataTable>
+```
 
 ### wordOptions
 

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React$1, { ReactElement } from 'react';
 
 type TableElement = {
     [key: string]: string | number;
@@ -46,12 +46,25 @@ type TableProps = {
     groupBy?: string | null;
     isTitles?: boolean;
     wordOptions?: ExportOptions;
+    WordExportComponent?: React.ComponentType<{
+        wordData: TableData;
+        columns: Array<Column>;
+        title: string;
+        options?: ExportOptions;
+        exportCustomColumns?: TableProps["exportCustomColumns"];
+    }>;
+    ExportExcelComponent?: React.ComponentType<{
+        excelData: TableData;
+        columns: Array<Column>;
+        title: string;
+        exportCustomColumns?: TableProps["exportCustomColumns"];
+    }>;
 };
 type DataTableRef = {
     getData: () => TableData;
     getCurrentData: () => TableData;
 };
 
-declare const DataTable: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<DataTableRef>>;
+declare const DataTable: React$1.ForwardRefExoticComponent<TableProps & React$1.RefAttributes<DataTableRef>>;
 
 export { type Column, DataTable, type TableElement, type TableProps };

package/dist/index.js

@@ -393,229 +393,25 @@ function useDebouncedEffect(callback, deps, delay) {
   }, [...deps, delay]);
 }
 
-// components/export/WordExport.tsx
-import {
-  AlignmentType,
-  Document,
-  Packer,
-  PageOrientation,
-  Paragraph,
-  Table,
-  TableCell,
-  TableRow,
-  TextRun,
-  VerticalAlign,
-  WidthType
-} from "docx";
-import saveAs from "file-saver";
-
-// utils/exportUtils/ExportHelpers.ts
-function prepareExportRows(columns, data) {
-  return data.map(
-    (row) => columns.map((col) => {
-      const value = row[col.field];
-      return typeof col.exportCustomCell !== "undefined" ? col.exportCustomCell(String(value), row) : String(value != null ? value : "");
-    })
-  );
-}
-function prepareExportHeaders(columns) {
-  return columns.map((col) => col.title);
-}
-
-// components/export/WordExport.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
-var WordExport = ({
-  wordData,
+// components/ExportSection.tsx
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+var ExportSection = ({
+  wordBtn,
+  excelBtn,
+  downloadSectionLeftSideContent,
+  tableData,
   columns,
-  title,
-  options = {
-    fontSize: 20,
-    boldHeaders: false,
-    autoLandscape: false,
-    maxColumnsBeforeLandscape: 5
-  }
-  // exportCustomColumns 
+  tableName,
+  exportCustomColumns,
+  wordOptions,
+  WordExportComponent,
+  ExportExcelComponent
 }) => {
-  const createNewWord = async () => {
-    const {
-      fontSize = 0,
-      boldHeaders = true,
-      autoLandscape = true,
-      maxColumnsBeforeLandscape = 5
-    } = options;
-    const isLandscape = autoLandscape && columns.length > maxColumnsBeforeLandscape;
-    const headerCells = prepareExportHeaders(columns).map((header) => new TableCell({
-      children: [new Paragraph({
-        children: [new TextRun({
-          text: header,
-          size: fontSize,
-          bold: boldHeaders
-        })],
-        alignment: AlignmentType.CENTER
-      })],
-      verticalAlign: VerticalAlign.CENTER
-    }));
-    const tableHeaderRow = new TableRow({ children: headerCells });
-    const rows = prepareExportRows(columns, wordData).map((cells) => {
-      const rowCells = cells.map(
-        (value) => new TableCell({
-          children: [new Paragraph({
-            children: [new TextRun({
-              text: value,
-              size: fontSize
-            })],
-            alignment: AlignmentType.CENTER
-          })],
-          verticalAlign: VerticalAlign.CENTER
-        })
-      );
-      return new TableRow({ children: rowCells });
-    });
-    const table = new Table({
-      rows: [tableHeaderRow, ...rows],
-      width: { size: 11e3, type: WidthType.DXA },
-      indent: { size: -1e3, type: WidthType.DXA }
-    });
-    const doc = new Document({
-      sections: [{
-        children: [table, new Paragraph({ text: "" })],
-        properties: isLandscape ? { page: { size: { orientation: PageOrientation.LANDSCAPE } } } : {}
-      }]
-    });
-    Packer.toBlob(doc).then((blob) => {
-      saveAs(blob, `${title}.docx`);
-    });
-  };
-  return /* @__PURE__ */ jsx13("button", { className: `ndt-buttonExport ndt-Word}`, onClick: createNewWord, children: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C Word" });
-};
-var WordExport_default = WordExport;
-
-// utils/exportUtils/exportUtils.ts
-var generateExcelColumns = (columns, exportCustomColumns) => {
-  let excelColumns = columns.map((column) => ({
-    header: column.title,
-    key: column.field,
-    width: 20
-  }));
-  if (exportCustomColumns) {
-    exportCustomColumns.forEach((custom) => {
-      excelColumns = excelColumns.map(
-        (col) => col.key === custom.key ? { ...col, ...custom } : col
-      );
-    });
-  }
-  return excelColumns;
-};
-var applyHeaderStyles = (row, columnCount) => {
-  row.height = 40;
-  row.font = { size: 12, bold: true };
-  row.alignment = { vertical: "middle", horizontal: "center" };
-  for (let i = 1; i <= columnCount; i++) {
-    const cell = row.getCell(i);
-    cell.alignment = { wrapText: true, vertical: "middle", horizontal: "center" };
-    cell.border = {
-      top: { style: "thin" },
-      left: { style: "thin" },
-      bottom: { style: "thin" },
-      right: { style: "thin" }
-    };
-  }
-};
-var applyRowStyles = (row, columnCount) => {
-  row.height = 40;
-  row.font = { size: 12 };
-  row.alignment = { vertical: "middle", horizontal: "center" };
-  for (let i = 1; i <= columnCount; i++) {
-    const cell = row.getCell(i);
-    cell.alignment = { wrapText: true, vertical: "middle", horizontal: "center" };
-    cell.border = {
-      top: { style: "thin" },
-      left: { style: "thin" },
-      bottom: { style: "thin" },
-      right: { style: "thin" }
-    };
-  }
-};
-var generateExcelDataRows = (columns, data) => {
-  return data.map((element) => {
-    const rowData = {};
-    columns.forEach((col) => {
-      const value = element[col.field];
-      rowData[col.field] = typeof col.exportCustomCell !== "undefined" ? col.exportCustomCell(String(value), element) : value != null ? value : "";
-    });
-    return rowData;
-  });
-};
-var setColumnAutoWidths = (sheet) => {
-  var _a;
-  (_a = sheet.columns) == null ? void 0 : _a.forEach((column) => {
-    var _a2;
-    let maxLength = 10;
-    (_a2 = column.eachCell) == null ? void 0 : _a2.call(column, { includeEmpty: true }, (cell) => {
-      const cellValue = cell.value ? String(cell.value) : "";
-      maxLength = Math.max(maxLength, cellValue.length + 5);
-    });
-    column.width = maxLength;
-  });
-};
-
-// components/export/ExportExcel.tsx
-import ExcelJS from "exceljs";
-import { jsx as jsx14 } from "react/jsx-runtime";
-var ExportExcel = ({ columns, excelData, title, exportCustomColumns }) => {
-  const exportExcel = () => {
-    const workbook = new ExcelJS.Workbook();
-    const sheet = workbook.addWorksheet(title, {
-      pageSetup: {
-        fitToPage: true,
-        fitToHeight: 2,
-        fitToWidth: 1,
-        orientation: "landscape"
-      },
-      headerFooter: {
-        oddFooter: "\u0421\u0442\u0440\u0430\u043D\u0438\u0446\u0430 &P \u0438\u0437 &N",
-        evenFooter: "\u0421\u0442\u0440\u0430\u043D\u0438\u0446\u0430 &P \u0438\u0437 &N"
-      }
-    });
-    const excelColumns = generateExcelColumns(columns, exportCustomColumns);
-    sheet.columns = excelColumns;
-    const headerRow = sheet.getRow(1);
-    applyHeaderStyles(headerRow, sheet.columns.length);
-    const dataRows = generateExcelDataRows(columns, excelData);
-    dataRows.forEach((data) => {
-      const row = sheet.addRow(data);
-      applyRowStyles(row, sheet.columns.length);
-    });
-    setColumnAutoWidths(sheet);
-    if (excelData.length > 15) {
-      sheet.pageSetup.fitToHeight = Math.floor(excelData.length / 15);
-    } else {
-      sheet.pageSetup.fitToHeight = 1;
-    }
-    workbook.xlsx.writeBuffer().then((data) => {
-      const blob = new Blob([data], {
-        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
-      });
-      const url = window.URL.createObjectURL(blob);
-      const anchor = document.createElement("a");
-      anchor.href = url;
-      anchor.download = `${title}.xlsx`;
-      anchor.click();
-      window.URL.revokeObjectURL(url);
-    });
-  };
-  return /* @__PURE__ */ jsx14("button", { className: `ndt-buttonExport ndt-Excel`, onClick: exportExcel, children: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C Excel" });
-};
-var ExportExcel_default = ExportExcel;
-
-// components/ExportSection.tsx
-import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
-var ExportSection = ({ wordBtn, excelBtn, downloadSectionLeftSideContent, tableData, columns, tableName, exportCustomColumns, wordOptions }) => {
-  return /* @__PURE__ */ jsx15(Fragment2, { children: /* @__PURE__ */ jsxs5("div", { className: "ndt-download-section", children: [
-    /* @__PURE__ */ jsx15("div", { className: "ndt-download-content", children: (wordBtn || excelBtn) && downloadSectionLeftSideContent !== null && downloadSectionLeftSideContent }),
+  return /* @__PURE__ */ jsx13(Fragment2, { children: /* @__PURE__ */ jsxs5("div", { className: "ndt-download-section", children: [
+    /* @__PURE__ */ jsx13("div", { className: "ndt-download-content", children: (wordBtn || excelBtn) && downloadSectionLeftSideContent !== null && downloadSectionLeftSideContent }),
     /* @__PURE__ */ jsxs5("div", { className: "ndt-download-buttons", children: [
-      wordBtn && /* @__PURE__ */ jsx15(
-        WordExport_default,
+      wordBtn && WordExportComponent && /* @__PURE__ */ jsx13(
+        WordExportComponent,
         {
           wordData: tableData,
           columns,
@@ -624,8 +420,8 @@ var ExportSection = ({ wordBtn, excelBtn, downloadSectionLeftSideContent, tableD
           options: wordOptions
         }
       ),
-      excelBtn && /* @__PURE__ */ jsx15(
-        ExportExcel_default,
+      excelBtn && ExportExcelComponent && /* @__PURE__ */ jsx13(
+        ExportExcelComponent,
         {
           excelData: tableData,
           columns,
@@ -639,7 +435,7 @@ var ExportSection = ({ wordBtn, excelBtn, downloadSectionLeftSideContent, tableD
 var ExportSection_default = ExportSection;
 
 // components/DataTable.tsx
-import { jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 var DataTable = forwardRef(({
   tableData,
   columns,
@@ -657,7 +453,9 @@ var DataTable = forwardRef(({
   headerGroup = null,
   groupBy = null,
   isTitles = false,
-  wordOptions
+  wordOptions,
+  WordExportComponent,
+  ExportExcelComponent
 }, ref) => {
   const [filters, setFilters] = useState({});
   const [sortBy, setSortBy] = useState({ col: "", type: "asc" });
@@ -734,7 +532,7 @@ var DataTable = forwardRef(({
     getCurrentData: () => displayData
   }), [processedData, displayData]);
   return /* @__PURE__ */ jsxs6("div", { className: "ndt-table-container", children: [
-    (wordBtn || excelBtn) && /* @__PURE__ */ jsx16(
+    (wordBtn || excelBtn) && /* @__PURE__ */ jsx14(
       ExportSection_default,
       {
         wordBtn,
@@ -744,11 +542,13 @@ var DataTable = forwardRef(({
         columns,
         tableName,
         exportCustomColumns,
-        wordOptions
+        wordOptions,
+        WordExportComponent,
+        ExportExcelComponent
       }
     ),
     /* @__PURE__ */ jsxs6("div", { className: "ndt-table", children: [
-      /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsx14(
         TableHeader_default,
         {
           columns,
@@ -760,7 +560,7 @@ var DataTable = forwardRef(({
           headerGroup
         }
       ),
-      loading ? loadingElement !== null ? loadingElement : /* @__PURE__ */ jsx16("span", { style: { marginLeft: 10, fontWeight: "bold" }, children: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445..." }) : /* @__PURE__ */ jsx16(
+      loading ? loadingElement !== null ? loadingElement : /* @__PURE__ */ jsx14("span", { style: { marginLeft: 10, fontWeight: "bold" }, children: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445..." }) : /* @__PURE__ */ jsx14(
         TableBody_default,
         {
           tableData: displayData,
@@ -774,7 +574,7 @@ var DataTable = forwardRef(({
           isTitles
         }
       ),
-      isFooter && /* @__PURE__ */ jsx16(
+      isFooter && /* @__PURE__ */ jsx14(
         TableFooter_default,
         {
           paginationCounts,

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "nillud-data-table",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "type": "module",
-  "main": "./dist/index.cjs",
+  "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "style": "./dist/styles.css",
@@ -13,12 +13,8 @@
     ".": {
       "import": "./dist/index.js"
     },
-    "./export-excel": {
-      "import": "./dist/export-excel.js"
-    },
-    "./export-word": {
-      "import": "./dist/export-word.js"
-    },
+    "./export/ExportExcel": "./dist/components/export/ExportExcel.js",
+    "./export/WordExport": "./dist/components/export/WordExport.js",
     "./types": "./dist/index.d.ts",
     "./styles.css": "./dist/styles.css"
   },
@@ -41,4 +37,4 @@
     "build": "tsup && npm run build:styles",
     "build:styles": "node build-styles.js"
   }
-}
+}