nillud-data-table 1.4.0 → 1.4.1

package/README.md

@@ -1,4 +1,4 @@
-# [React](https://react.dev/)  nillud-data-table Component [![npm version](https://img.shields.io/npm/v/data-table-lib)](https://www.npmjs.com/package/data-table-lib)
+# [React](https://react.dev/)  DataTable Component [![npm version](https://img.shields.io/npm/v/data-table-lib)](https://www.npmjs.com/package/data-table-lib)
 
 ## Возможности
 

package/dist/export/export-excel/index.d.ts

@@ -1,35 +1,49 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactElement } from 'react';
+import { CellValue } from 'exceljs';
 
 type TableElement = {
     [key: string]: string | number;
 };
-type TableData = Array<TableElement>;
 type Column = {
     field: string;
     title: string;
     width?: number;
     autoinc?: boolean;
-    formatter?: (cell: string, row: TableElement) => ReactElement;
-    exportCustomCell?: (cell: string, row: TableElement) => string;
-    headerFilter?: (headerValue: string, rowValue: string) => string;
+    formatter?: (cell: string, row: TableElement, column: Column) => ReactElement;
+    headerFormatter?: (column: string) => ReactElement;
+    exportCustomCell?: (title: string, row: TableElement) => string;
+    cellAlignment?: CellAlignment;
+    headerFilter?: (headerValue: string, rowValue: string) => boolean;
     sortable?: boolean;
     filterable?: boolean;
+    selectable?: boolean;
+    isSelectableCell?: boolean;
+    filterPlaceholder?: string;
+    editable?: boolean;
 };
 type CustomColumn = {
-    header: string;
+    header?: string;
     key: string;
     width?: number;
+    exportCustomCell?: (value: string, row: TableElement) => string | CellValue;
     [key: string]: any;
 };
-type CustomColumns = Array<CustomColumn> | null;
+type CellAlignment = {
+    vertical: 'top' | 'middle' | 'bottom';
+    horizontal: 'left' | 'center' | 'right';
+};
 type ExcelExportTypes = {
     columns: Array<Column>;
-    excelData: TableData;
-    title: string;
-    exportCustomColumns?: CustomColumns;
+    excelData?: Array<TableElement>;
+    tableRef?: any;
+    titleFile: string;
+    title?: string;
+    text?: string;
+    exportCustomColumns?: Array<CustomColumn>;
+    customHeight?: number;
 };
 
-declare const ExportExcel: ({ columns, excelData, title, exportCustomColumns }: ExcelExportTypes) => react_jsx_runtime.JSX.Element;
+declare const ExportExcel: ({ columns, excelData, tableRef, titleFile, title, text, exportCustomColumns, customHeight }: ExcelExportTypes) => react_jsx_runtime.JSX.Element;
 
 export { type ExcelExportTypes, ExportExcel };

package/dist/export/export-excel/index.js

@@ -1,7 +1,7 @@
 // components/export/export-excel/exportUtils.ts
 var generateExcelColumns = (columns, exportCustomColumns) => {
-  let excelColumns = columns.map((column) => ({
-    header: column.title,
+  let excelColumns = columns.filter((column) => column.title !== "").map((column) => ({
+    title: column.title,
     key: column.field,
     width: 20
   }));
@@ -29,13 +29,18 @@ var applyHeaderStyles = (row, columnCount) => {
     };
   }
 };
-var applyRowStyles = (row, columnCount) => {
-  row.height = 40;
+var applyRowStyles = (row, columnCount, height = 40, columns) => {
+  row.height = height;
   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" };
+    const column = columns[i - 1];
+    cell.alignment = {
+      wrapText: true,
+      vertical: column.cellAlignment ? column.cellAlignment.vertical : "middle",
+      horizontal: column.cellAlignment ? column.cellAlignment.horizontal : "center"
+    };
     cell.border = {
       top: { style: "thin" },
       left: { style: "thin" },
@@ -44,14 +49,21 @@ var applyRowStyles = (row, columnCount) => {
     };
   }
 };
-var generateExcelDataRows = (columns, data) => {
-  return data.map((element) => {
-    const rowData = {};
-    columns.forEach((col) => {
+var generateExcelDataRows = (columns, data, exportCustomColumns) => {
+  return data.map((element, rowIndex) => {
+    return columns.map((col, colIndex) => {
+      const isAutoinc = col.autoinc;
+      if (isAutoinc) return rowIndex + 1;
       const value = element[col.field];
-      rowData[col.field] = typeof col.exportCustomCell !== "undefined" ? col.exportCustomCell(String(value), element) : value != null ? value : "";
+      const customCol = exportCustomColumns == null ? void 0 : exportCustomColumns.find((custom) => custom.key === col.field);
+      if (customCol == null ? void 0 : customCol.exportCustomCell) {
+        return customCol.exportCustomCell(String(value != null ? value : ""), element);
+      }
+      if (typeof col.exportCustomCell !== "undefined") {
+        return col.exportCustomCell(String(value != null ? value : ""), element);
+      }
+      return value != null ? value : "";
     });
-    return rowData;
   });
 };
 var setColumnAutoWidths = (sheet) => {
@@ -70,10 +82,11 @@ var setColumnAutoWidths = (sheet) => {
 // components/export/export-excel/ExportExcel.tsx
 import ExcelJS from "exceljs";
 import { jsx } from "react/jsx-runtime";
-var ExportExcel = ({ columns, excelData, title, exportCustomColumns }) => {
+var ExportExcel = ({ columns, excelData, tableRef, titleFile, title, text, exportCustomColumns, customHeight }) => {
   const exportExcel = async () => {
+    const tableData = excelData || tableRef.current.getData();
     const workbook = new ExcelJS.Workbook();
-    const sheet = workbook.addWorksheet(title, {
+    const sheet = workbook.addWorksheet(titleFile, {
       pageSetup: {
         fitToPage: true,
         fitToHeight: 2,
@@ -85,18 +98,41 @@ var ExportExcel = ({ columns, excelData, title, exportCustomColumns }) => {
         evenFooter: "\u0421\u0442\u0440\u0430\u043D\u0438\u0446\u0430 &P \u0438\u0437 &N"
       }
     });
+    sheet.properties.defaultRowHeight = 20;
+    let tableHeaderRow = 1;
+    if (title) {
+      sheet.getCell("A1").value = title;
+      sheet.getRow(1).height = 25;
+      sheet.getRow(1).alignment = { vertical: "middle" };
+      sheet.getCell("A1").font = {
+        size: 18,
+        bold: true
+      };
+      tableHeaderRow++;
+    }
+    if (text) {
+      sheet.getCell("A2").value = text;
+      sheet.getRow(2).height = 15;
+      sheet.getRow(2).alignment = { vertical: "middle" };
+      sheet.getCell("A2").font = {
+        size: 12
+      };
+      tableHeaderRow++;
+    }
+    if (title || text) tableHeaderRow++;
     const excelColumns = generateExcelColumns(columns, exportCustomColumns);
     sheet.columns = excelColumns;
-    const headerRow = sheet.getRow(1);
+    const headerRow = sheet.getRow(tableHeaderRow);
+    headerRow.values = excelColumns.map((col) => col.title);
     applyHeaderStyles(headerRow, sheet.columns.length);
-    const dataRows = generateExcelDataRows(columns, excelData);
+    const dataRows = generateExcelDataRows(columns, tableData);
     dataRows.forEach((data) => {
       const row = sheet.addRow(data);
-      applyRowStyles(row, sheet.columns.length);
+      applyRowStyles(row, sheet.columns.length, customHeight, columns);
     });
     setColumnAutoWidths(sheet);
-    if (excelData.length > 15) {
-      sheet.pageSetup.fitToHeight = Math.floor(excelData.length / 15);
+    if (tableData.length > 15) {
+      sheet.pageSetup.fitToHeight = Math.floor(tableData.length / 15);
     } else {
       sheet.pageSetup.fitToHeight = 1;
     }
@@ -107,7 +143,7 @@ var ExportExcel = ({ columns, excelData, title, exportCustomColumns }) => {
       const url = window.URL.createObjectURL(blob);
       const anchor = document.createElement("a");
       anchor.href = url;
-      anchor.download = `${title}.xlsx`;
+      anchor.download = `${titleFile}.xlsx`;
       anchor.click();
       window.URL.revokeObjectURL(url);
     });

package/dist/index.d.ts

@@ -4,6 +4,10 @@ type TableElement = {
     [key: string]: string | number;
 };
 type TableData = Array<TableElement>;
+type CellAlignment = {
+    vertical: 'top' | 'middle' | 'bottom';
+    horizontal: 'left' | 'center' | 'right';
+};
 type Column = {
     field: string;
     title: string;
@@ -12,6 +16,7 @@ type Column = {
     formatter?: (cell: string, row: TableElement, column: Column) => ReactElement;
     headerFormatter?: (column: string) => ReactElement;
     exportCustomCell?: (title: string, row: TableElement) => string;
+    cellAlignment?: CellAlignment;
     headerFilter?: (headerValue: string, rowValue: string) => boolean;
     sortable?: boolean;
     filterable?: boolean;

package/dist/index.js

@@ -573,12 +573,8 @@ var DataTable = forwardRef(({
     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" });
@@ -627,12 +623,6 @@ var DataTable = forwardRef(({
   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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nillud-data-table",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",