react-table-edit 1.4.41 → 1.4.43

package/dist/component/table/header.d.ts

@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction } from 'react';
-import { IFFilterTable, IFOrderTable, IFTableEditFormat, IHeaderColumnTable } from "../type";
 import 'react-resizable/css/styles.css';
+import { IFFilterTable, IFOrderTable, IFTableEditFormat, IHeaderColumnTable } from "../type";
 type IFDataProps = {
     idTable: string;
     selectEnable: boolean;

package/dist/component/type/index.d.ts

@@ -137,8 +137,10 @@ export type IColumnTable = {
     field: string;
     /** Tên thuộc tính lọc*/
     fieldFilter?: string;
-    /** Tiêu đề hiển thị ở header */
+    /** Tiêu đề cột */
     headerText?: string;
+    /** Tiêu đề hiển thị trên giao diện */
+    headerDisplay?: string;
     /** Khóa chính */
     isPrimarykey?: boolean;
     /** Duy nhất trong bảng */
@@ -294,8 +296,10 @@ export type IHeaderColumnTable = {
     field: string;
     /** Tên thuộc tính lọc*/
     fieldFilter?: string;
-    /** Tiêu đề header */
+    /** Tiêu đề cột */
     headerText?: string;
+    /** Tiêu đề hiển thị trên giao diện */
+    headerDisplay?: string;
     /** Chiều rộng */
     width?: number | string;
     /** Chiều rộng tối thiểu */

package/dist/component/utils.d.ts

@@ -1,3 +1,4 @@
+import { IFSettingColumns } from "./type";
 export declare const useOnClickOutside: (ref: any, handler: any) => void;
 export declare const checkThousandSeparator: (thousandSeparator: any, decimalSeparator: any) => any;
 export declare const checkDecimalSeparator: (thousandSeparator: any, decimalSeparator: any) => any;
@@ -37,13 +38,7 @@ export declare const FindNodeByPath: (tree: any[], path: string) => {
  *   fisrtObjWidthFixRight: number        // Chỉ số cột đầu tiên fixed right
  * }
  */
-export declare const calculateTableStructure: (columns: any[], settingColumns?: {
-    field: string;
-    headerText?: string;
-    visible?: boolean;
-    fixedType?: "left" | "right";
-    width?: number | string;
-}[]) => {
+export declare const calculateTableStructure: (columns: any[], settingColumns?: IFSettingColumns[]) => {
     levels: any[][];
     flat: any[];
     flatVisble: any[];

package/dist/index.d.ts

@@ -141,8 +141,10 @@ type IColumnTable = {
     field: string;
     /** Tên thuộc tính lọc*/
     fieldFilter?: string;
-    /** Tiêu đề hiển thị ở header */
+    /** Tiêu đề cột */
     headerText?: string;
+    /** Tiêu đề hiển thị trên giao diện */
+    headerDisplay?: string;
     /** Khóa chính */
     isPrimarykey?: boolean;
     /** Duy nhất trong bảng */
@@ -298,8 +300,10 @@ type IHeaderColumnTable = {
     field: string;
     /** Tên thuộc tính lọc*/
     fieldFilter?: string;
-    /** Tiêu đề header */
+    /** Tiêu đề cột */
     headerText?: string;
+    /** Tiêu đề hiển thị trên giao diện */
+    headerDisplay?: string;
     /** Chiều rộng */
     width?: number | string;
     /** Chiều rộng tối thiểu */
@@ -488,13 +492,7 @@ declare const FindNodeByPath: (tree: any[], path: string) => {
  *   fisrtObjWidthFixRight: number        // Chỉ số cột đầu tiên fixed right
  * }
  */
-declare const calculateTableStructure: (columns: any[], settingColumns?: {
-    field: string;
-    headerText?: string;
-    visible?: boolean;
-    fixedType?: "left" | "right";
-    width?: number | string;
-}[]) => {
+declare const calculateTableStructure: (columns: any[], settingColumns?: IFSettingColumns[]) => {
     levels: any[][];
     flat: any[];
     flatVisble: any[];

package/dist/index.js

@@ -17730,8 +17730,11 @@ const calculateTableStructure = (columns, settingColumns) => {
                     if (column.width !== undefined && column.width !== null) {
                         cell.width = column.width;
                     }
-                    if (column.headerText !== undefined && column.headerText !== null) {
-                        cell.headerText = column.headerText;
+                    if (column.headerText) {
+                        cell.headerDisplay = column.headerText;
+                    }
+                    else {
+                        cell.headerDisplay = cell.headerText;
                     }
                 }
                 else {
@@ -40421,13 +40424,13 @@ const SidebarSetColumn = (props) => {
                     }
                 } }) }));
     };
-    const headerTextTemplate = (item, index) => {
-        let textValue = t(item.headerText);
+    const headerDisplayTemplate = (item, index) => {
+        let textValue = t(item.headerDisplay);
         return (jsxRuntime.jsx(Input$1, { defaultValue: textValue, className: classNames$2("border-0 rounded-0 input-element"), onChange: (e) => {
                 textValue = e.target?.value;
             }, onBlur: () => {
                 if (dataSource) {
-                    dataSource[index].headerText = textValue;
+                    dataSource[index].headerDisplay = textValue;
                     setDataSource(dataSource);
                 }
             } }));
@@ -40477,7 +40480,14 @@ const SidebarSetColumn = (props) => {
         {
             field: "headerText",
             headerText: "Column name",
-            template: headerTextTemplate,
+            template: (item) => (jsxRuntime.jsxs("div", { className: "r-cell-text", children: ["  ", t(item.headerText)] })),
+            visible: true,
+            width: 200
+        },
+        {
+            field: "headerDisplay",
+            headerText: "Column name display",
+            template: headerDisplayTemplate,
             visible: true,
             width: 200
         },
@@ -40499,7 +40509,7 @@ const SidebarSetColumn = (props) => {
         },
         {
             field: "width",
-            headerText: "Column width",
+            headerText: "Column width(px)",
             textAlign: "right",
             visible: true,
             template: widthColumnTemplate,
@@ -40517,7 +40527,7 @@ const SidebarSetColumn = (props) => {
                         justifyContent: col.textAlign ?? "left"
                     }, className: "r-headercell-div", children: t(col.headerText ?? "") }) })) }, `header-${indexCol}`));
     };
-    return (jsxRuntime.jsxs(Sidebar, { open: openSidebar, toggleSidebar: handleCancel, width: 700, children: [jsxRuntime.jsx(ModalHeader, { typeModal: "Edit", handleModal: handleCancel, title: "Column setup" }), jsxRuntime.jsx("div", { className: "ms-2 r-table-edit", children: jsxRuntime.jsx("div", { className: "r-grid", children: jsxRuntime.jsx("div", { className: "r-gridtable", style: { height: windowSize.innerHeight - 120 }, children: jsxRuntime.jsxs("table", { style: { width: "100%" }, children: [jsxRuntime.jsx("thead", { className: "r-gridheader", children: jsxRuntime.jsx("tr", { className: "r-row", role: "row", children: columns.map((col, index) => {
+    return (jsxRuntime.jsxs(Sidebar, { open: openSidebar, toggleSidebar: handleCancel, width: 900, children: [jsxRuntime.jsx(ModalHeader, { typeModal: "Edit", handleModal: handleCancel, title: "Column setup" }), jsxRuntime.jsx("div", { className: "ms-2 r-table-edit", children: jsxRuntime.jsx("div", { className: "r-grid", children: jsxRuntime.jsx("div", { className: "r-gridtable", style: { height: windowSize.innerHeight - 120 }, children: jsxRuntime.jsxs("table", { style: { width: "100%" }, children: [jsxRuntime.jsx("thead", { className: "r-gridheader", children: jsxRuntime.jsx("tr", { className: "r-row", role: "row", children: columns.map((col, index) => {
                                             return renderHeaderCol(col, index);
                                         }) }) }), jsxRuntime.jsx("tbody", { className: "r-gridcontent", children: dataSource?.map((row, indexRow) => {
                                         return (jsxRuntime.jsx("tr", { className: classNames$2("r-row", { "last-row": indexRow === dataSource.length - 1 }, { "fisrt-row": indexRow === 0 }), children: columns.map((col, indexCol) => {
@@ -42440,6 +42450,7 @@ const HeaderTableCol$1 = (props) => {
     const order = orderBy.find((item) => item.key === col.field);
     const [openFilter, setOpenFilter] = React$5.useState(false);
     const filter = filterBy.find((item) => item.key === col.field);
+    const herderContent = col.headerDisplay ?? (col.headerText ?? '');
     const handleResize = (e, { size }) => {
         // Update the column width here
         // You might need to update the state or call a callback to update the width
@@ -42487,7 +42498,7 @@ const HeaderTableCol$1 = (props) => {
                                         setSelectedRows([]);
                                     }
                                 }
-                            } })), col.field !== 'checkbox' && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: 'header-content', style: { justifyContent: col.textAlign ?? 'left' }, children: [jsxRuntime.jsx("span", { id: `header-${idTable}-${indexParent}-${indexCol}`, ref: headerRef, className: 'text-content', children: t(col.headerText ?? '') }), checkOverflow() && jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `header-${idTable}-${indexParent}-${indexCol}`, children: t(col.headerText ?? '') })] }), col.field !== '#' && col.field !== 'command' && jsxRuntime.jsxs("div", { className: 'd-flex', children: [allowOrder && order?.direction === 'asc' && jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: 'ms-25', width: "10", height: "10", viewBox: "0 0 16 18", fill: "none", children: [jsxRuntime.jsx("g", { "clip-path": "url(#clip0_520_6)", children: jsxRuntime.jsx("path", { d: "M8.70711 0.292893C8.31658 -0.0976311 7.68342 -0.0976311 7.29289 0.292893L0.928932 6.65685C0.538408 7.04738 0.538408 7.68054 0.928932 8.07107C1.31946 8.46159 1.95262 8.46159 2.34315 8.07107L8 2.41421L13.6569 8.07107C14.0474 8.46159 14.6805 8.46159 15.0711 8.07107C15.4616 7.68054 15.4616 7.04738 15.0711 6.65685L8.70711 0.292893ZM8 18H9L9 1H8H7L7 18H8Z", fill: "black" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_520_6", children: jsxRuntime.jsx("rect", { width: "16", height: "18", fill: "white" }) }) })] }), allowOrder && order?.direction === 'desc' && jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: 'ms-25', width: "10", height: "10", viewBox: "0 0 16 18", fill: "none", children: [jsxRuntime.jsx("g", { "clip-path": "url(#clip0_520_2)", children: jsxRuntime.jsx("path", { d: "M7.29289 17.7071C7.68342 18.0976 8.31658 18.0976 8.70711 17.7071L15.0711 11.3431C15.4616 10.9526 15.4616 10.3195 15.0711 9.92893C14.6805 9.53841 14.0474 9.53841 13.6569 9.92893L8 15.5858L2.34315 9.92893C1.95262 9.53841 1.31946 9.53841 0.928932 9.92893C0.538408 10.3195 0.538408 10.9526 0.928932 11.3431L7.29289 17.7071ZM8 0L7 0L7 17H8H9L9 0L8 0Z", fill: "black" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_520_2", children: jsxRuntime.jsx("rect", { width: "16", height: "18", fill: "white" }) }) })] }), allowFilter && (col.columns?.length ?? 0) === 0 && col.allowFilter !== false && jsxRuntime.jsxs(Dropdown$1, { isOpen: openFilter, toggle: (e) => {
+                            } })), col.field !== 'checkbox' && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: 'header-content', style: { justifyContent: col.textAlign ?? 'left' }, children: [jsxRuntime.jsx("span", { id: `header-${idTable}-${indexParent}-${indexCol}`, ref: headerRef, className: 'text-content', children: t(herderContent) }), checkOverflow() && jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `header-${idTable}-${indexParent}-${indexCol}`, children: t(herderContent) })] }), col.field !== '#' && col.field !== 'command' && jsxRuntime.jsxs("div", { className: 'd-flex', children: [allowOrder && order?.direction === 'asc' && jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: 'ms-25', width: "10", height: "10", viewBox: "0 0 16 18", fill: "none", children: [jsxRuntime.jsx("g", { "clip-path": "url(#clip0_520_6)", children: jsxRuntime.jsx("path", { d: "M8.70711 0.292893C8.31658 -0.0976311 7.68342 -0.0976311 7.29289 0.292893L0.928932 6.65685C0.538408 7.04738 0.538408 7.68054 0.928932 8.07107C1.31946 8.46159 1.95262 8.46159 2.34315 8.07107L8 2.41421L13.6569 8.07107C14.0474 8.46159 14.6805 8.46159 15.0711 8.07107C15.4616 7.68054 15.4616 7.04738 15.0711 6.65685L8.70711 0.292893ZM8 18H9L9 1H8H7L7 18H8Z", fill: "black" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_520_6", children: jsxRuntime.jsx("rect", { width: "16", height: "18", fill: "white" }) }) })] }), allowOrder && order?.direction === 'desc' && jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: 'ms-25', width: "10", height: "10", viewBox: "0 0 16 18", fill: "none", children: [jsxRuntime.jsx("g", { "clip-path": "url(#clip0_520_2)", children: jsxRuntime.jsx("path", { d: "M7.29289 17.7071C7.68342 18.0976 8.31658 18.0976 8.70711 17.7071L15.0711 11.3431C15.4616 10.9526 15.4616 10.3195 15.0711 9.92893C14.6805 9.53841 14.0474 9.53841 13.6569 9.92893L8 15.5858L2.34315 9.92893C1.95262 9.53841 1.31946 9.53841 0.928932 9.92893C0.538408 10.3195 0.538408 10.9526 0.928932 11.3431L7.29289 17.7071ZM8 0L7 0L7 17H8H9L9 0L8 0Z", fill: "black" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_520_2", children: jsxRuntime.jsx("rect", { width: "16", height: "18", fill: "white" }) }) })] }), allowFilter && (col.columns?.length ?? 0) === 0 && col.allowFilter !== false && jsxRuntime.jsxs(Dropdown$1, { isOpen: openFilter, toggle: (e) => {
                                                 setOpenFilter(!openFilter);
                                                 e.stopPropagation();
                                             }, onClick: (e) => {
@@ -43777,7 +43788,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                     setOpenPopupSetupColumn(!openPopupSetupColumn);
                 }, openSidebar: openPopupSetupColumn, column: [...contentColumns], resetDefaultColumns: resetDefaultColumns, setColumn: (newColumns) => {
                     if (saveSettingColumn) {
-                        saveSettingColumn(newColumns.map((x) => ({ field: x.field, headerText: x.headerText, visible: x.visible, fixedType: x.fixedType, width: x.width })));
+                        saveSettingColumn(newColumns.map((x) => ({ field: x.field, headerText: x.headerDisplay, visible: x.visible, fixedType: x.fixedType, width: x.width })));
                     }
                 } })] }));
 });