nillud-data-table 1.0.5 → 1.0.7

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={[
         {
@@ -440,6 +445,17 @@ 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**
@@ -452,6 +468,17 @@ 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
 
 Необязательный параметр. Используется вместе с **wordBtn**. Принимает в себя объект

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-import React, { ReactElement } from 'react';
+import React$1, { ReactElement } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type TableElement = {
     [key: string]: string | number;
@@ -46,12 +47,42 @@ 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>>;
+
+type Props$1 = {
+    wordData: TableData;
+    columns: Array<Column>;
+    title: string;
+    options?: ExportOptions;
+    exportCustomColumns?: TableProps["exportCustomColumns"];
+};
+declare const WordExport: ({ wordData, columns, title, options }: Props$1) => react_jsx_runtime.JSX.Element;
+
+type Props = {
+    columns: Array<Column>;
+    excelData: Array<TableElement>;
+    title: string;
+    exportCustomColumns: TableProps["exportCustomColumns"];
+};
+declare const ExportExcel: ({ columns, excelData, title, exportCustomColumns }: Props) => react_jsx_runtime.JSX.Element;
 
-export { type Column, DataTable, type TableElement, type TableProps };
+export { type Column, DataTable, ExportExcel, type TableElement, type TableProps, WordExport };

package/dist/index.js

@@ -393,6 +393,204 @@ function useDebouncedEffect(callback, deps, delay) {
   }, [...deps, delay]);
 }
 
+// components/ExportSection.tsx
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+var ExportSection = ({
+  wordBtn,
+  excelBtn,
+  downloadSectionLeftSideContent,
+  tableData,
+  columns,
+  tableName,
+  exportCustomColumns,
+  wordOptions,
+  WordExportComponent,
+  ExportExcelComponent
+}) => {
+  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 && WordExportComponent && /* @__PURE__ */ jsx13(
+        WordExportComponent,
+        {
+          wordData: tableData,
+          columns,
+          title: tableName,
+          exportCustomColumns,
+          options: wordOptions
+        }
+      ),
+      excelBtn && ExportExcelComponent && /* @__PURE__ */ jsx13(
+        ExportExcelComponent,
+        {
+          excelData: tableData,
+          columns,
+          title: tableName,
+          exportCustomColumns
+        }
+      )
+    ] })
+  ] }) });
+};
+var ExportSection_default = ExportSection;
+
+// components/DataTable.tsx
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+var DataTable = forwardRef(({
+  tableData,
+  columns,
+  tableName = "table-data",
+  loading = false,
+  loadingElement = null,
+  isFooter = false,
+  paginationCounts = null,
+  scrollable = false,
+  scrollHeight = 300,
+  exportCustomColumns = null,
+  excelBtn = false,
+  wordBtn = false,
+  downloadSectionLeftSideContent = null,
+  headerGroup = null,
+  groupBy = null,
+  isTitles = false,
+  wordOptions,
+  WordExportComponent,
+  ExportExcelComponent
+}, ref) => {
+  const [filters, setFilters] = useState({});
+  const [sortBy, setSortBy] = useState({ col: "", type: "asc" });
+  const [paginationSize, setPaginationSize] = useState((paginationCounts == null ? void 0 : paginationCounts[0]) || 10);
+  const [paginationPage, setPaginationPage] = useState(0);
+  const [collapsedGroups, setCollapsedGroups] = useState({});
+  const toggleGroup = (groupKey) => {
+    setCollapsedGroups((prev) => ({
+      ...prev,
+      [groupKey]: !prev[groupKey]
+    }));
+  };
+  const widths = useMemo2(() => {
+    return columns.map((c) => c.width ? `${c.width}px` : "1fr").join(" ");
+  }, [columns]);
+  const loadFromLocalStorage = useCallback(() => {
+    try {
+      const s = localStorage.getItem(`${tableName}-sort-by`);
+      const f = localStorage.getItem(`${tableName}-filters`);
+      const c = localStorage.getItem(`${tableName}-counts`);
+      const p = localStorage.getItem(`${tableName}-page`);
+      if (s) setSortBy(JSON.parse(s));
+      if (f) setFilters(JSON.parse(f));
+      if (c) setPaginationSize(c === "all" ? 0 : Number(c));
+      if (p) setPaginationPage(Number(p));
+    } catch (e) {
+      console.error("Error parsing localStorage data:", e);
+      setSortBy({ col: "", type: "asc" });
+      setFilters({});
+      setPaginationSize((paginationCounts == null ? void 0 : paginationCounts[0]) || 10);
+      setPaginationPage(0);
+    }
+  }, [tableName, paginationCounts]);
+  useEffect2(() => {
+    loadFromLocalStorage();
+  }, [loadFromLocalStorage]);
+  const processedData = useMemo2(() => {
+    let result = [...tableData];
+    const columnMap = new Map(columns.map((col) => [col.field, col]));
+    for (const field in filters) {
+      const filterValue = String(filters[field]);
+      if (filterValue === "") continue;
+      const column = columnMap.get(field);
+      if (!column) continue;
+      result = column.headerFilter ? result.filter((e) => column.headerFilter(filterValue, String(e[field]))) : filterData(result, field, filterValue);
+    }
+    if (sortBy.col) {
+      result = sortData(result, sortBy.col, sortBy.type);
+    }
+    return result;
+  }, [tableData, filters, sortBy, columns]);
+  const displayData = useMemo2(() => {
+    if (paginationSize === 0) return processedData;
+    const start = paginationPage * paginationSize;
+    return processedData.slice(start, start + paginationSize);
+  }, [processedData, paginationPage, paginationSize]);
+  useEffect2(() => {
+    setPaginationPage(0);
+  }, [filters, sortBy]);
+  useDebouncedEffect(() => {
+    localStorage.setItem(`${tableName}-filters`, JSON.stringify(filters));
+  }, [filters, tableName], 500);
+  useDebouncedEffect(() => {
+    localStorage.setItem(`${tableName}-sort-by`, JSON.stringify(sortBy));
+  }, [sortBy, tableName], 500);
+  useEffect2(() => {
+    localStorage.setItem(`${tableName}-counts`, paginationSize === 0 ? "all" : paginationSize.toString());
+  }, [paginationSize, tableName]);
+  useEffect2(() => {
+    localStorage.setItem(`${tableName}-page`, paginationPage.toString());
+  }, [paginationPage, tableName]);
+  useImperativeHandle(ref, () => ({
+    getData: () => processedData,
+    getCurrentData: () => displayData
+  }), [processedData, displayData]);
+  return /* @__PURE__ */ jsxs6("div", { className: "ndt-table-container", children: [
+    (wordBtn || excelBtn) && /* @__PURE__ */ jsx14(
+      ExportSection_default,
+      {
+        wordBtn,
+        excelBtn,
+        downloadSectionLeftSideContent,
+        tableData: displayData,
+        columns,
+        tableName,
+        exportCustomColumns,
+        wordOptions,
+        WordExportComponent,
+        ExportExcelComponent
+      }
+    ),
+    /* @__PURE__ */ jsxs6("div", { className: "ndt-table", children: [
+      /* @__PURE__ */ jsx14(
+        TableHeader_default,
+        {
+          columns,
+          sortBy,
+          getSortField: setSortBy,
+          filters,
+          getFilters: setFilters,
+          widths,
+          headerGroup
+        }
+      ),
+      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,
+          columns,
+          scrollable,
+          scrollHeight,
+          widths,
+          groupBy,
+          collapsedGroups,
+          toggleGroup,
+          isTitles
+        }
+      ),
+      isFooter && /* @__PURE__ */ jsx14(
+        TableFooter_default,
+        {
+          paginationCounts,
+          tableData: processedData,
+          paginationSize,
+          getPaginationSize: setPaginationSize,
+          paginationPage,
+          getPaginationPage: setPaginationPage
+        }
+      )
+    ] })
+  ] });
+});
+DataTable.displayName = "DataTable";
+var DataTable_default = DataTable;
+
 // utils/exportUtils/ExportHelpers.ts
 function prepareExportRows(columns, data) {
   return data.map(
@@ -407,7 +605,7 @@ function prepareExportHeaders(columns) {
 }
 
 // components/export/WordExport.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var WordExport = ({
   wordData,
   columns,
@@ -485,7 +683,7 @@ var WordExport = ({
       saveAs(blob, `${title}.docx`);
     });
   };
-  return /* @__PURE__ */ jsx13("button", { className: `ndt-buttonExport ndt-Word}`, onClick: createNewWord, children: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C Word" });
+  return /* @__PURE__ */ jsx15("button", { className: `ndt-buttonExport ndt-Word}`, onClick: createNewWord, children: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C Word" });
 };
 var WordExport_default = WordExport;
 
@@ -559,7 +757,7 @@ var setColumnAutoWidths = (sheet) => {
 };
 
 // components/export/ExportExcel.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var ExportExcel = ({ columns, excelData, title, exportCustomColumns }) => {
   const exportExcel = async () => {
     const ExcelJS = await import("exceljs");
@@ -603,192 +801,11 @@ var ExportExcel = ({ columns, excelData, title, exportCustomColumns }) => {
       window.URL.revokeObjectURL(url);
     });
   };
-  return /* @__PURE__ */ jsx14("button", { className: `ndt-buttonExport ndt-Excel`, onClick: exportExcel, children: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C Excel" });
+  return /* @__PURE__ */ jsx16("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 }),
-    /* @__PURE__ */ jsxs5("div", { className: "ndt-download-buttons", children: [
-      wordBtn && /* @__PURE__ */ jsx15(
-        WordExport_default,
-        {
-          wordData: tableData,
-          columns,
-          title: tableName,
-          exportCustomColumns,
-          options: wordOptions
-        }
-      ),
-      excelBtn && /* @__PURE__ */ jsx15(
-        ExportExcel_default,
-        {
-          excelData: tableData,
-          columns,
-          title: tableName,
-          exportCustomColumns
-        }
-      )
-    ] })
-  ] }) });
-};
-var ExportSection_default = ExportSection;
-
-// components/DataTable.tsx
-import { jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
-var DataTable = forwardRef(({
-  tableData,
-  columns,
-  tableName = "table-data",
-  loading = false,
-  loadingElement = null,
-  isFooter = false,
-  paginationCounts = null,
-  scrollable = false,
-  scrollHeight = 300,
-  exportCustomColumns = null,
-  excelBtn = false,
-  wordBtn = false,
-  downloadSectionLeftSideContent = null,
-  headerGroup = null,
-  groupBy = null,
-  isTitles = false,
-  wordOptions
-}, ref) => {
-  const [filters, setFilters] = useState({});
-  const [sortBy, setSortBy] = useState({ col: "", type: "asc" });
-  const [paginationSize, setPaginationSize] = useState((paginationCounts == null ? void 0 : paginationCounts[0]) || 10);
-  const [paginationPage, setPaginationPage] = useState(0);
-  const [collapsedGroups, setCollapsedGroups] = useState({});
-  const toggleGroup = (groupKey) => {
-    setCollapsedGroups((prev) => ({
-      ...prev,
-      [groupKey]: !prev[groupKey]
-    }));
-  };
-  const widths = useMemo2(() => {
-    return columns.map((c) => c.width ? `${c.width}px` : "1fr").join(" ");
-  }, [columns]);
-  const loadFromLocalStorage = useCallback(() => {
-    try {
-      const s = localStorage.getItem(`${tableName}-sort-by`);
-      const f = localStorage.getItem(`${tableName}-filters`);
-      const c = localStorage.getItem(`${tableName}-counts`);
-      const p = localStorage.getItem(`${tableName}-page`);
-      if (s) setSortBy(JSON.parse(s));
-      if (f) setFilters(JSON.parse(f));
-      if (c) setPaginationSize(c === "all" ? 0 : Number(c));
-      if (p) setPaginationPage(Number(p));
-    } catch (e) {
-      console.error("Error parsing localStorage data:", e);
-      setSortBy({ col: "", type: "asc" });
-      setFilters({});
-      setPaginationSize((paginationCounts == null ? void 0 : paginationCounts[0]) || 10);
-      setPaginationPage(0);
-    }
-  }, [tableName, paginationCounts]);
-  useEffect2(() => {
-    loadFromLocalStorage();
-  }, [loadFromLocalStorage]);
-  const processedData = useMemo2(() => {
-    let result = [...tableData];
-    const columnMap = new Map(columns.map((col) => [col.field, col]));
-    for (const field in filters) {
-      const filterValue = String(filters[field]);
-      if (filterValue === "") continue;
-      const column = columnMap.get(field);
-      if (!column) continue;
-      result = column.headerFilter ? result.filter((e) => column.headerFilter(filterValue, String(e[field]))) : filterData(result, field, filterValue);
-    }
-    if (sortBy.col) {
-      result = sortData(result, sortBy.col, sortBy.type);
-    }
-    return result;
-  }, [tableData, filters, sortBy, columns]);
-  const displayData = useMemo2(() => {
-    if (paginationSize === 0) return processedData;
-    const start = paginationPage * paginationSize;
-    return processedData.slice(start, start + paginationSize);
-  }, [processedData, paginationPage, paginationSize]);
-  useEffect2(() => {
-    setPaginationPage(0);
-  }, [filters, sortBy]);
-  useDebouncedEffect(() => {
-    localStorage.setItem(`${tableName}-filters`, JSON.stringify(filters));
-  }, [filters, tableName], 500);
-  useDebouncedEffect(() => {
-    localStorage.setItem(`${tableName}-sort-by`, JSON.stringify(sortBy));
-  }, [sortBy, tableName], 500);
-  useEffect2(() => {
-    localStorage.setItem(`${tableName}-counts`, paginationSize === 0 ? "all" : paginationSize.toString());
-  }, [paginationSize, tableName]);
-  useEffect2(() => {
-    localStorage.setItem(`${tableName}-page`, paginationPage.toString());
-  }, [paginationPage, tableName]);
-  useImperativeHandle(ref, () => ({
-    getData: () => processedData,
-    getCurrentData: () => displayData
-  }), [processedData, displayData]);
-  return /* @__PURE__ */ jsxs6("div", { className: "ndt-table-container", children: [
-    (wordBtn || excelBtn) && /* @__PURE__ */ jsx16(
-      ExportSection_default,
-      {
-        wordBtn,
-        excelBtn,
-        downloadSectionLeftSideContent,
-        tableData: displayData,
-        columns,
-        tableName,
-        exportCustomColumns,
-        wordOptions
-      }
-    ),
-    /* @__PURE__ */ jsxs6("div", { className: "ndt-table", children: [
-      /* @__PURE__ */ jsx16(
-        TableHeader_default,
-        {
-          columns,
-          sortBy,
-          getSortField: setSortBy,
-          filters,
-          getFilters: setFilters,
-          widths,
-          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(
-        TableBody_default,
-        {
-          tableData: displayData,
-          columns,
-          scrollable,
-          scrollHeight,
-          widths,
-          groupBy,
-          collapsedGroups,
-          toggleGroup,
-          isTitles
-        }
-      ),
-      isFooter && /* @__PURE__ */ jsx16(
-        TableFooter_default,
-        {
-          paginationCounts,
-          tableData: processedData,
-          paginationSize,
-          getPaginationSize: setPaginationSize,
-          paginationPage,
-          getPaginationPage: setPaginationPage
-        }
-      )
-    ] })
-  ] });
-});
-DataTable.displayName = "DataTable";
-var DataTable_default = DataTable;
 export {
-  DataTable_default as DataTable
+  DataTable_default as DataTable,
+  ExportExcel_default as ExportExcel,
+  WordExport_default as WordExport
 };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "nillud-data-table",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "type": "module",
-  "main": "./dist/index.cjs",
+  "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "style": "./dist/styles.css",
@@ -13,6 +13,8 @@
     ".": {
       "import": "./dist/index.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"
   },
@@ -35,4 +37,4 @@
     "build": "tsup && npm run build:styles",
     "build:styles": "node build-styles.js"
   }
-}
+}