react-table-edit 1.5.18 → 1.5.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/component/type/index.d.ts +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +13 -11
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +13 -11
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -233,6 +233,8 @@ export type IFTableEditPaging = {
|
|
|
233
233
|
};
|
|
234
234
|
/** Cấu hình các nút thao tác trên bảng */
|
|
235
235
|
export type IFTableEditButton = {
|
|
236
|
+
/** Vô hiệu hóa nút thêm nhiều dòng */
|
|
237
|
+
disableAddMulti?: boolean;
|
|
236
238
|
/** Vô hiệu hóa nút xóa tất cả */
|
|
237
239
|
deleteAllDisable?: boolean;
|
|
238
240
|
/** Vô hiệu hóa nút chèn sau */
|
package/dist/index.d.ts
CHANGED
|
@@ -237,6 +237,8 @@ type IFTableEditPaging = {
|
|
|
237
237
|
};
|
|
238
238
|
/** Cấu hình các nút thao tác trên bảng */
|
|
239
239
|
type IFTableEditButton = {
|
|
240
|
+
/** Vô hiệu hóa nút thêm nhiều dòng */
|
|
241
|
+
disableAddMulti?: boolean;
|
|
240
242
|
/** Vô hiệu hóa nút xóa tất cả */
|
|
241
243
|
deleteAllDisable?: boolean;
|
|
242
244
|
/** Vô hiệu hóa nút chèn sau */
|
package/dist/index.js
CHANGED
|
@@ -39800,13 +39800,15 @@ const SettingColumn = (props) => {
|
|
|
39800
39800
|
|
|
39801
39801
|
const ToolbarBottom = ({ handleAdd, handleDuplicate, handleInsertBefore, handleInsertAfter, handleDeleteAll, setOpenPopupSetupColumn, focusRow, editDisable, addDisable, buttonSetting, toolbarSetting, headerColumns }) => {
|
|
39802
39802
|
const { t } = reactI18next.useTranslation();
|
|
39803
|
-
return (jsxRuntime.jsx("div", { id: "table_custom_bottom_toolbar", className: "r-toolbar r-toolbar-bottom", role: "toolbar", "aria-disabled": "false", "aria-haspopup": "false", "aria-orientation": "horizontal", children: jsxRuntime.jsxs("div", { className: "r-toolbar-items", children: [jsxRuntime.jsxs("div", { className: "r-toolbar-left", children: [jsxRuntime.jsxs("div", { className: classNames$1('r-toolbar-item d-flex', { 'd-none': editDisable || addDisable }), "aria-disabled": "false", children: [jsxRuntime.jsx(Button$1$1, { color:
|
|
39804
|
-
|
|
39803
|
+
return (jsxRuntime.jsx("div", { id: "table_custom_bottom_toolbar", className: "r-toolbar r-toolbar-bottom", role: "toolbar", "aria-disabled": "false", "aria-haspopup": "false", "aria-orientation": "horizontal", children: jsxRuntime.jsxs("div", { className: "r-toolbar-items", children: [jsxRuntime.jsxs("div", { className: "r-toolbar-left", children: [jsxRuntime.jsxs("div", { className: classNames$1('r-toolbar-item d-flex', { 'd-none': editDisable || addDisable }), "aria-disabled": "false", children: [jsxRuntime.jsx(Button$1$1, { color: "success", outline: true, onClick: () => handleAdd(1), className: "d-flex", children: t('Add item') }), !!buttonSetting?.disableAddMulti && (jsxRuntime.jsxs(UncontrolledDropdown, { className: "nav-item", children: [jsxRuntime.jsx(DropdownToggle$1, { tag: "div", className: "me-0 d-flex", children: jsxRuntime.jsx(Button$1$1, { type: "button", color: "success", outline: true, style: { marginLeft: -1 }, className: "px-25", children: jsxRuntime.jsx("svg", { fill: "#28c76f", height: "15", width: "20", viewBox: "0 0 20 20", children: jsxRuntime.jsx("path", { d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" }) }) }) }), jsxRuntime.jsxs(DropdownMenu$1, { className: "formula-dropdown icon-dropdown p-0", children: [jsxRuntime.jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(10), children: "10 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(20), children: "20 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(30), children: "30 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(40), children: "40 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(50), children: "50 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(100), children: "100 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(1000), children: "1000 h\u00E0ng" })] })] }))] }), (focusRow ?? -1) > -1 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1$1, { color: "success", outline: true, onClick: () => {
|
|
39804
|
+
handleDuplicate();
|
|
39805
|
+
}, className: "d-flex", children: t('Duplicate') }) }), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1$1, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t('Insert item before') }) }), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.insertAfterDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1$1, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t('Insert item after') }) })] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " })), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item', { 'd-none': editDisable || buttonSetting?.deleteAllDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1$1, { color: "primary", outline: true, onClick: handleDeleteAll, className: "d-flex", children: t('Delete all item') }) }), toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
|
|
39806
|
+
return item.align === 'left' ? (jsxRuntime.jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`)) : ('');
|
|
39805
39807
|
})] }), jsxRuntime.jsx("div", { className: "r-toolbar-center", children: toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
|
|
39806
|
-
return
|
|
39808
|
+
return item.align === 'center' ? (jsxRuntime.jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-center-${index}`)) : ('');
|
|
39807
39809
|
}) }), jsxRuntime.jsxs("div", { className: "r-toolbar-right", children: [toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
|
|
39808
|
-
return
|
|
39809
|
-
}), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item me-25', { 'd-none': headerColumns.length > 1 }), "aria-disabled": "false", children: jsxRuntime.jsx(SvgSettings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item me-25', { 'd-none': editDisable || addDisable }), "aria-disabled": "false", children: jsxRuntime.jsxs(UncontrolledDropdown, { className:
|
|
39810
|
+
return item.align === 'right' ? (jsxRuntime.jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-right-${index}`)) : ('');
|
|
39811
|
+
}), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item me-25', { 'd-none': headerColumns.length > 1 }), "aria-disabled": "false", children: jsxRuntime.jsx(SvgSettings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item me-25', { 'd-none': editDisable || addDisable }), "aria-disabled": "false", children: jsxRuntime.jsxs(UncontrolledDropdown, { className: "dropdown-user nav-item", children: [jsxRuntime.jsx(DropdownToggle$1, { tag: "div", color: "primary", onClick: (e) => e.preventDefault(), children: jsxRuntime.jsx(SvgInfo, { className: "cursor-pointer text-primary" }) }), jsxRuntime.jsx(DropdownMenu$1, { className: "formula-dropdown icon-dropdown", children: jsxRuntime.jsxs("ul", { className: "mb-0 pe-50", children: [jsxRuntime.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" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Ch\u1ECDn \u00F4 v\u00E0 Ctrl + V \u0111\u1EC3 d\u00E1n th\u00F4ng tin t\u1EEB excel" }), jsxRuntime.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" }), jsxRuntime.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" }), jsxRuntime.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" }), jsxRuntime.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" })] }) })] }) })] })] }) }));
|
|
39810
39812
|
};
|
|
39811
39813
|
|
|
39812
39814
|
const TableEdit = React$5.forwardRef((props, ref) => {
|
|
@@ -68698,7 +68700,7 @@ const RenderContentCol = (props) => {
|
|
|
68698
68700
|
// ✅ Format dữ liệu theo loại cột
|
|
68699
68701
|
if (col.type === 'numeric') {
|
|
68700
68702
|
value = formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) ?? 0;
|
|
68701
|
-
if (!zeroVisiable && (value === '0' || value === 0)) {
|
|
68703
|
+
if (!zeroVisiable && !(row?.sortOrder < 0 || row?.sortOrder > 100000) && (value === '0' || value === 0)) {
|
|
68702
68704
|
value = '';
|
|
68703
68705
|
}
|
|
68704
68706
|
}
|
|
@@ -68772,12 +68774,12 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
|
|
|
68772
68774
|
const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? 'id';
|
|
68773
68775
|
const [contentColumns, setContentColumns] = React$5.useState([]);
|
|
68774
68776
|
const [groupColumns, setGroupColumns] = React$5.useState([]);
|
|
68775
|
-
const [expandsAll, setExpandsAll] = React$5.useState();
|
|
68777
|
+
const [expandsAll, setExpandsAll] = React$5.useState(true);
|
|
68776
68778
|
React$5.useEffect(() => {
|
|
68777
68779
|
if (groupSetting?.groupColumns) {
|
|
68778
68780
|
setGroupColumns([...groupSetting.groupColumns]);
|
|
68779
68781
|
}
|
|
68780
|
-
setExpandsAll(
|
|
68782
|
+
setExpandsAll(true);
|
|
68781
68783
|
}, [groupSetting?.groupColumns]);
|
|
68782
68784
|
const { levels: headerColumns, flatVisble, objHeaderWidthFixLeft, objHeaderWidthFixRight, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight } = React$5.useMemo(() => {
|
|
68783
68785
|
const rs = calculateTableStructure(columns, settingColumns?.value);
|
|
@@ -68996,7 +68998,7 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
|
|
|
68996
68998
|
const firstColSpan = flatVisble.length > 6 ? 3 : Math.floor(flatVisble.length / 2);
|
|
68997
68999
|
const RenderContent = ({ datas, level = 0 }) => {
|
|
68998
69000
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: datas.map((row, indexRow) => {
|
|
68999
|
-
const [expand, setExpand] = React$5.useState(row.expand ??
|
|
69001
|
+
const [expand, setExpand] = React$5.useState(row.expand ?? true);
|
|
69000
69002
|
React$5.useEffect(() => {
|
|
69001
69003
|
if (expandsAll !== undefined) {
|
|
69002
69004
|
setExpand(expandsAll);
|
|
@@ -69039,7 +69041,7 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
|
|
|
69039
69041
|
sumValue = '';
|
|
69040
69042
|
}
|
|
69041
69043
|
}
|
|
69042
|
-
return (jsxRuntime.jsx("td", { className: "r-rowcell r-cell-sum-group", children: jsxRuntime.jsx("div", { className: "r-rowcell-div", style: { justifyContent: colSum.textAlign ? colSum.textAlign : 'left' }, children: (haveSum || colSum.haveSum === true) && Number(sumValue) < 0 ?
|
|
69044
|
+
return (jsxRuntime.jsx("td", { className: "r-rowcell r-cell-sum-group", children: jsxRuntime.jsx("div", { className: "r-rowcell-div", style: { justifyContent: colSum.textAlign ? colSum.textAlign : 'left' }, children: (haveSum || colSum.haveSum === true) && Number(sumValue) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] }) : sumValue }) }, `group-sum-cell-${level}-${indexRow}-${indexCol}`));
|
|
69043
69045
|
})] }), expand && jsxRuntime.jsx(RenderContent, { datas: row.children, level: level + 1 })] }, `row-${level}-${indexRow}`));
|
|
69044
69046
|
}
|
|
69045
69047
|
else {
|
|
@@ -69078,7 +69080,7 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
|
|
|
69078
69080
|
left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
|
|
69079
69081
|
right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
|
|
69080
69082
|
textAlign: col.textAlign ? col.textAlign : 'left'
|
|
69081
|
-
}, children: jsxRuntime.jsx("div", { className: "r-footer-div", children: (item || col.haveSum === true) && Number(sumValue) < 0 ?
|
|
69083
|
+
}, children: jsxRuntime.jsx("div", { className: "r-footer-div", children: (item || col.haveSum === true) && Number(sumValue) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] }) : sumValue }) }, `summarycell-${indexCol}`));
|
|
69082
69084
|
}) })) })] }), (viewData.length ?? 0) === 0 && !isLoading && (jsxRuntime.jsxs("div", { className: "r-no-data", children: [jsxRuntime.jsx("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsxs("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [jsxRuntime.jsx("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }), jsxRuntime.jsxs("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [jsxRuntime.jsx("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" }), jsxRuntime.jsx("path", { d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z", fill: "#fafafa" })] })] }) }), t('No data available.')] })), isLoading && (jsxRuntime.jsx("div", { className: "r-loading-overlay", children: jsxRuntime.jsxs("div", { className: "r-loading", children: [jsxRuntime.jsx(Spinner$1, { className: "me-1" }), t('Loading...')] }) }))] })] }), pagingSetting?.allowPaging && (jsxRuntime.jsx(PagingComponent, { gridRef: gridRef, onChangePage: onChangePage, pageSize: pagingSetting?.pageSize ?? 0, currentPage: pagingSetting?.currentPage ?? 0, pageOptions: pagingSetting?.pageOptions ?? [20, 30, 50, 100], totalItem: pagingSetting?.totalItem ?? 0, onChangePageSize: onChangePageSize })), jsxRuntime.jsx(SettingColumn, { gridRef: gridRef, handleSidebar: () => {
|
|
69083
69085
|
setOpenPopupSetupColumn(!openPopupSetupColumn);
|
|
69084
69086
|
}, settingColumns: settingColumns, openSidebar: openPopupSetupColumn, column: [...contentColumns], resetDefaultColumns: resetDefaultColumns, setColumn: (newColumns) => {
|