react-table-edit 1.5.29 → 1.5.30

package/dist/index.mjs

@@ -19948,7 +19948,7 @@ const calculateTableStructure = (columns, settingColumns, groupColumns) => {
                         cell.numericSettings = { fraction: setting.fraction };
                     }
                 }
-                cell.headerDisplay = setting.headerText || cell.headerText;
+                cell.headerDisplay = setting.headerText || (cell.headerDisplay ?? cell.headerText);
             }
             else {
                 if (cell.columns?.length) {
@@ -20538,19 +20538,6 @@ const ReactInput = (props) => {
                 }), value: value, onChange: (val) => setValue(val.target.value) }), value ? jsx(SvgX, { className: 'input__clear-icon', onClick: handelClear, strokeWidth: 3, fontSize: 16 }) : ''] }));
 };
 
-const RenderToolbarTop = ({ toolbarTopOption }) => {
-    return (jsx("div", { id: "table_custom_top_toolbar", className: "r-toolbar r-toolbar-top", "aria-orientation": "horizontal", children: jsxs("div", { className: "r-toolbar-items", children: [jsx("div", { className: "r-toolbar-left", children: toolbarTopOption?.map((item, index) => {
-                        return item.align === 'left' ? jsx(ToolBarElement, { item: item, index: index }) : '';
-                    }) }), jsx("div", { className: "r-toolbar-center", children: toolbarTopOption?.map((item, index) => {
-                        return item.align === 'center' ? jsx(ToolBarElement, { item: item, index: index }) : '';
-                    }) }), jsx("div", { className: "r-toolbar-right", children: toolbarTopOption?.map((item, index) => {
-                        return item.align === 'right' ? jsx(ToolBarElement, { item: item, index: index }) : '';
-                    }) })] }) }));
-};
-const ToolBarElement = ({ item, index }) => {
-    return (jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template?.() }, `toolbar-top-${index}`));
-};
-
 const handleAdd = (dataSource, containerRef, indexFirstEdit, 
 /*eslint-disable*/
 changeDataSource, handleFocusCell, 
@@ -38753,7 +38740,10 @@ const DateRangePicker = forwardRef((props, ref) => {
                                                                     const newDate = new Date(viewDateFrom);
                                                                     newDate.setFullYear(newYear);
                                                                     setViewDateFrom(newDate);
-                                                                }, value: { value: viewDateFrom.getFullYear(), label: viewDateFrom.getFullYear() } }) })] }), jsx(SvgChevronRight, { cursor: 'pointer', fontSize: 22, onClick: () => {
+                                                                }, value: {
+                                                                    value: viewDateFrom.getFullYear(),
+                                                                    label: viewDateFrom.getFullYear()
+                                                                } }) })] }), jsx(SvgChevronRight, { cursor: 'pointer', fontSize: 22, onClick: () => {
                                                         const newDate = new Date(viewDateFrom);
                                                         newDate.setMonth(viewDateFrom.getMonth() + 1);
                                                         setViewDateFrom(newDate);
@@ -38765,6 +38755,8 @@ const DateRangePicker = forwardRef((props, ref) => {
                                                 inRange: 'rdp-in-range',
                                                 rangeStart: 'rdp-selected',
                                                 rangeEnd: 'rdp-selected'
+                                            }, formatters: {
+                                                formatWeekdayName: (day) => [t('Su'), t('Mo'), t('Tu'), t('We'), t('Th'), t('Fr'), t('Sa')][day.getDay() === 0 ? 6 : day.getDay() - 1]
                                             } })] }), jsxs("div", { children: [jsxs("div", { className: "select-month-year", children: [jsx(SvgChevronLeft, { cursor: 'pointer', fontSize: 22, onClick: () => {
                                                         const newDate = new Date(viewDateTo);
                                                         newDate.setMonth(viewDateTo.getMonth() - 1);
@@ -38779,7 +38771,10 @@ const DateRangePicker = forwardRef((props, ref) => {
                                                                     const newDate = new Date(viewDateTo);
                                                                     newDate.setFullYear(newYear);
                                                                     setViewDateTo(newDate);
-                                                                }, value: { value: viewDateTo.getFullYear(), label: viewDateTo.getFullYear() } }) })] }), jsx(SvgChevronRight, { cursor: 'pointer', fontSize: 22, onClick: () => {
+                                                                }, value: {
+                                                                    value: viewDateTo.getFullYear(),
+                                                                    label: viewDateTo.getFullYear()
+                                                                } }) })] }), jsx(SvgChevronRight, { cursor: 'pointer', fontSize: 22, onClick: () => {
                                                         const newDate = new Date(viewDateTo);
                                                         newDate.setMonth(viewDateTo.getMonth() + 1);
                                                         setViewDateTo(newDate);
@@ -38791,6 +38786,8 @@ const DateRangePicker = forwardRef((props, ref) => {
                                                 inRange: 'rdp-in-range',
                                                 rangeStart: 'rdp-selected',
                                                 rangeEnd: 'rdp-selected'
+                                            }, formatters: {
+                                                formatWeekdayName: (day) => [t('Su'), t('Mo'), t('Tu'), t('We'), t('Th'), t('Fr'), t('Sa')][day.getDay() === 0 ? 6 : day.getDay() - 1]
                                             } })] })] }), jsxs("div", { className: "d-flex border-top ms-50", style: { gap: 20, paddingTop: 10 }, children: [jsx("div", { className: "btn-today", onClick: () => {
                                         handleSelect(today, today);
                                         setOpen(false);
@@ -38995,7 +38992,7 @@ const HeaderTableCol = (props) => {
                     top: `${indexParent * 42}px`,
                     left: col.fixedType === 'left' ? objHeaderWidthFixLeft[`${indexParent}-${indexCol ?? 0}`] : undefined,
                     right: col.fixedType === 'right' ? objHeaderWidthFixRight[`${indexParent}-${indexCol ?? 0}`] : undefined
-                }, children: jsxs("div", { style: { justifyContent: 'space-between' }, onClick: () => {
+                }, children: jsxs("div", { style: { justifyContent: col.textAlign === 'center' ? 'center' : 'space-between' }, onClick: () => {
                         if (!allowSorting || col.columns?.length) {
                             return;
                         }
@@ -39802,6 +39799,19 @@ const ToolbarBottom = ({ handleAdd, handleDuplicate, handleInsertBefore, handleI
                         }), jsx("div", { className: classNames$1('r-toolbar-item me-25'), "aria-disabled": "false", children: jsx(SvgSettings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }), jsx("div", { className: classNames$1('r-toolbar-item me-25', { 'd-none': editDisable || addDisable }), "aria-disabled": "false", children: jsxs(UncontrolledDropdown, { className: "dropdown-user nav-item", children: [jsx(DropdownToggle$1, { tag: "div", color: "primary", onClick: (e) => e.preventDefault(), children: jsx(SvgInfo, { className: "cursor-pointer text-primary" }) }), jsx(DropdownMenu$1, { className: "formula-dropdown icon-dropdown", children: jsxs("ul", { className: "mb-0 pe-50", children: [jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + D \u0111\u1EC3 nh\u00E2n b\u1EA3n" }), jsx("li", { style: { fontSize: 13 }, children: "Ch\u1ECDn \u00F4 v\u00E0 Ctrl + V \u0111\u1EC3 d\u00E1n th\u00F4ng tin t\u1EEB excel" }), jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + C \u0111\u1EC3 sao ch\u00E9p h\u00E0ng" }), jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + V \u0111\u1EC3 d\u00E1n h\u00E0ng" }), jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n Ctrl ho\u1EB7c Alt + Shift + \u2193 \u0111\u1EC3 sao ch\u00E9p d\u1EEF li\u1EC7u \u00F4 cho c\u00E1c d\u00F2ng d\u01B0\u1EDBi" }), jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n Ctrl ho\u1EB7c Alt + Shift + \u2191 \u0111\u1EC3 sao ch\u00E9p d\u1EEF li\u1EC7u \u00F4 cho c\u00E1c d\u00F2ng tr\u00EAn" })] }) })] }) })] })] }) }));
 };
 
+const RenderToolbarTop = ({ toolbarTopOption }) => {
+    return (jsx("div", { id: "table_custom_top_toolbar", className: "r-toolbar r-toolbar-top", "aria-orientation": "horizontal", children: jsxs("div", { className: "r-toolbar-items", children: [jsx("div", { className: "r-toolbar-left", children: toolbarTopOption?.map((item, index) => {
+                        return item.align === 'left' ? jsx(ToolBarElement, { item: item, index: index }) : '';
+                    }) }), jsx("div", { className: "r-toolbar-center", children: toolbarTopOption?.map((item, index) => {
+                        return item.align === 'center' ? jsx(ToolBarElement, { item: item, index: index }) : '';
+                    }) }), jsx("div", { className: "r-toolbar-right", children: toolbarTopOption?.map((item, index) => {
+                        return item.align === 'right' ? jsx(ToolBarElement, { item: item, index: index }) : '';
+                    }) })] }) }));
+};
+const ToolBarElement = ({ item, index }) => {
+    return (jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template?.() }, `toolbar-top-${index}`));
+};
+
 const TableEdit = forwardRef((props, ref) => {
     const { t } = useTranslation();
     const { idTable, dataSource, columns, setDataSource, height = 400, rowHeight = 31.3, defaultValue, toolbarSetting, searchSetting, selectedItem, selectEnable, editDisable, addDisable, buttonSetting, formatSetting, haveSum, isMulti, disableAutoKey, commandClick, dataSourceChange, rowChange, setSelectedItem, handleSelect, onDuplicate, saveSettingColumn, allowFiltering = true, allowSorting, settingColumns, optionsFilter, pagingSetting, resetDefaultColumns } = props;
@@ -68673,8 +68683,10 @@ const RenderContentCol = (props) => {
         return element && element.scrollWidth > element.clientWidth;
     };
     const RenderElement = () => {
-        if (col.type === 'checkbox' && !col.field) {
-            return (jsx("div", { className: "r-rowcell-div cursor-pointer", style: { alignItems: 'center' }, onClick: (e) => {
+        if (col.type === 'checkbox' || col.field === 'checkbox') {
+            return (jsx("div", { className: "r-rowcell-div cursor-pointer", style: { display: 'flex', justifyContent: col.textAlign === 'center' ? 'center' : col.textAlign === 'right' ? 'flex-end' : 'flex-start', alignItems: 'center' }, onClick: (e) => {
+                    console.log(isMulti);
+                    console.log(selectEnable);
                     if (selectEnable) {
                         const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
                         if (index > -1) {
@@ -68722,7 +68734,8 @@ const RenderContentCol = (props) => {
             const suffix = isNegative ? formatSetting?.suffixNegative ?? '' : '';
             const displayText = isNegative ? `${prefix}${value}${suffix}` : value ?? '';
             return (jsxs("div", { className: classNames$1('r-rowcell-div'), style: {
-                    fontWeight: row.sortOrder < 0 || row.sortOrder > 100000 ? 600 : 400
+                    fontWeight: row.sortOrder < 0 || row.sortOrder > 100000 || row.haveBoldType ? 600 : 400,
+                    fontStyle: row.haveItalicType ? 'italic' : 'normal'
                 }, children: [jsx("div", { className: "r-cell-text", style: {
                             display: 'flex',
                             justifyContent: col.textAlign === 'center' ? 'center' : col.textAlign === 'right' ? 'flex-end' : 'flex-start',
@@ -68798,7 +68811,6 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
         setContentColumns(rs.flat);
         return rs;
     }, [columns, settingColumns, groupSetting?.groupColumns]);
-    const optionGroupColumns = useMemo(() => contentColumns.map((x) => ({ ...x, headerDisplay: t(x.headerText) })), [contentColumns]);
     const firstColSpan = useMemo(() => {
         let count = 0;
         let index = 3;
@@ -68898,7 +68910,7 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
         return (jsx("div", { className: "me-50 r-search", children: jsx(ReactInput, { style: { width: '230px' }, value: searchSetting?.searchTerm !== undefined ? searchSetting?.searchTerm : searchTerm, setSearchTerm: searchSetting?.setSearchTerm ? searchSetting?.setSearchTerm : setSearchTerm, placeholder: t('Search'), onKeyPress: handleKeyPress }) }));
     };
     const groupbtnTemplate = () => {
-        return (jsxs(UncontrolledDropdown, { children: [jsx(DropdownToggle$1, { tag: "div", id: "group-dropdown-toggle", style: { position: 'relative' }, onClick: (e) => e.preventDefault(), children: jsx(GroupIcon, { color: "#7F7F7F", size: 24 }) }), jsxs(DropdownMenu$1, { className: "formula-dropdown icon-dropdown p-1", children: [jsx("div", { className: "mb-1", style: { fontSize: 16, fontWeight: 500 }, children: "Nh\u00F3m d\u1EEF li\u1EC7u theo c\u1ED9t" }), jsxs("div", { className: 'form-group', children: [jsx(Label$1, { id: `label-group-1`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 1" }), jsx("div", { className: "form-input", children: jsx(SelectTable, { options: optionGroupColumns, fieldLabel: 'headerDisplay', fieldValue: 'field', value: groupColumns[0] ? { headerDisplay: t(contentColumns.find((x) => x.field === groupColumns[0])?.headerDisplay ?? contentColumns.find((x) => x.field === groupColumns[0])?.headerText) } : undefined, onChange: (val) => {
+        return (jsxs(UncontrolledDropdown, { children: [jsx(DropdownToggle$1, { tag: "div", id: "group-dropdown-toggle", style: { position: 'relative' }, onClick: (e) => e.preventDefault(), children: jsx(GroupIcon, { color: "#7F7F7F", size: 24 }) }), jsxs(DropdownMenu$1, { className: "formula-dropdown icon-dropdown p-1", children: [jsx("div", { className: "mb-1", style: { fontSize: 16, fontWeight: 500 }, children: "Nh\u00F3m d\u1EEF li\u1EC7u theo c\u1ED9t" }), jsxs("div", { className: 'form-group', children: [jsx(Label$1, { id: `label-group-1`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 1" }), jsx("div", { className: "form-input", children: jsx(SelectTable, { options: contentColumns, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[0] ? { headerText: t(contentColumns.find((x) => x.field === groupColumns[0])?.headerText ?? contentColumns.find((x) => x.field === groupColumns[0])?.headerText) } : undefined, onChange: (val) => {
                                             if (val) {
                                                 groupColumns[0] = val.field;
                                             }
@@ -68906,7 +68918,7 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
                                                 groupColumns.pop();
                                             }
                                             setGroupColumns([...groupColumns]);
-                                        }, isClearable: groupColumns?.length === 1 }) })] }), jsxs("div", { className: 'form-group', children: [jsx(Label$1, { id: `label-group-2`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 2" }), jsx("div", { className: "form-input", children: jsx(SelectTable, { options: optionGroupColumns, fieldLabel: 'headerDisplay', fieldValue: 'field', value: groupColumns[1] ? { headerDisplay: t(contentColumns.find((x) => x.field === groupColumns[1])?.headerDisplay ?? contentColumns.find((x) => x.field === groupColumns[1])?.headerText) } : undefined, onChange: (val) => {
+                                        }, isClearable: groupColumns?.length === 1 }) })] }), jsxs("div", { className: 'form-group', children: [jsx(Label$1, { id: `label-group-2`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 2" }), jsx("div", { className: "form-input", children: jsx(SelectTable, { options: contentColumns, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[1] ? { headerText: t(contentColumns.find((x) => x.field === groupColumns[1])?.headerText ?? contentColumns.find((x) => x.field === groupColumns[1])?.headerText) } : undefined, onChange: (val) => {
                                             if (val) {
                                                 groupColumns[1] = val.field;
                                             }
@@ -68914,7 +68926,7 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
                                                 groupColumns.pop();
                                             }
                                             setGroupColumns([...groupColumns]);
-                                        }, isClearable: groupColumns?.length === 2 }) })] }), jsxs("div", { className: 'form-group', children: [jsx(Label$1, { id: `label-group-3`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 3" }), jsx("div", { className: "form-input", children: jsx(SelectTable, { options: optionGroupColumns, fieldLabel: 'headerDisplay', fieldValue: 'field', value: groupColumns[2] ? { headerDisplay: t(contentColumns.find((x) => x.field === groupColumns[2])?.headerDisplay ?? contentColumns.find((x) => x.field === groupColumns[2])?.headerText) } : undefined, onChange: (val) => {
+                                        }, isClearable: groupColumns?.length === 2 }) })] }), jsxs("div", { className: 'form-group', children: [jsx(Label$1, { id: `label-group-3`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 3" }), jsx("div", { className: "form-input", children: jsx(SelectTable, { options: contentColumns, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[2] ? { headerText: t(contentColumns.find((x) => x.field === groupColumns[2])?.headerText ?? contentColumns.find((x) => x.field === groupColumns[2])?.headerText) } : undefined, onChange: (val) => {
                                             if (groupSetting) {
                                                 if (val) {
                                                     groupColumns[2] = val.field;
@@ -69067,7 +69079,7 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
                                                 sumValue = '';
                                             }
                                         }
-                                        return (jsx("td", { className: "r-rowcell r-cell-sum-group", children: jsx("div", { className: "r-rowcell-div", style: { justifyContent: colSum.textAlign ? colSum.textAlign : 'left' }, children: (haveSum || colSum.haveSum === true) && Number(sumValue) < 0 ? (jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] })) : (sumValue) }) }, `group-sum-cell-${level}-${indexRow}-${indexCol}`));
+                                        return (jsx("td", { className: "r-rowcell r-cell-sum-group", children: jsx("div", { className: "r-rowcell-div", style: { justifyContent: colSum.textAlign ? colSum.textAlign : 'left' }, children: (haveSum || colSum.haveSum === true) && Number(sumValue) < 0 ? jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] }) : sumValue }) }, `group-sum-cell-${level}-${indexRow}-${indexCol}`));
                                     })] }), expand && jsx(RenderContent, { datas: row.children, level: level + 1 })] }, `row-${level}-${indexRow}`));
                 }
                 else {
@@ -69136,7 +69148,7 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
                                                         left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
                                                         right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
                                                         textAlign: col.textAlign ? col.textAlign : 'left'
-                                                    }, children: jsx("div", { className: "r-footer-div", children: (item || col.haveSum === true) && Number(sumValue) < 0 ? (jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] })) : (sumValue) }) }, `summarycell-${indexCol}`));
+                                                    }, children: jsx("div", { className: "r-footer-div", children: (item || col.haveSum === true) && Number(sumValue) < 0 ? jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] }) : sumValue }) }, `summarycell-${indexCol}`));
                                             }) })) })] }), jsx("div", { ref: virtualDivRef }), context && (contextMenuItems?.length ?? 0) > 0 && handleContextMenuClick && (jsx(Popover$1, { className: "r-context-popover", placement: "right-start", isOpen: context.show, target: virtualDivRef.current, toggle: handleCloseContext, fade: false, children: jsx(PopoverBody$1, { children: contextMenuItems?.map((item, index) => {
                                         return (jsxs("div", { className: "r-context-item", onClick: () => {
                                                 handleCloseContext();