react-table-edit 1.4.24 → 1.4.26
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/table/button-handle.d.ts +1 -1
- package/dist/component/table/header.d.ts +2 -2
- package/dist/component/table/key-handlers.d.ts +1 -1
- package/dist/component/utils.d.ts +4 -2
- package/dist/index.d.ts +4 -2
- package/dist/index.js +63 -43
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +63 -43
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -19290,15 +19290,31 @@ const calculateTableStructure = (columns) => {
|
|
|
19290
19290
|
const flat = [];
|
|
19291
19291
|
const objWidthFixLeft = {};
|
|
19292
19292
|
const objWidthFixRight = {};
|
|
19293
|
+
const objHeaderWidthFixRight = {};
|
|
19294
|
+
const objHeaderWidthFixLeft = {};
|
|
19293
19295
|
let maxDepth = 0;
|
|
19294
19296
|
// Tính depth tối đa
|
|
19295
19297
|
const calculateDepth = (cols, depth = 1) => (Math.max(...cols.map(col => (col.columns?.length ? calculateDepth(col.columns, depth + 1) : depth))));
|
|
19296
19298
|
maxDepth = calculateDepth(columns);
|
|
19297
19299
|
let leftTotal = 0;
|
|
19298
19300
|
let rightTotal = 0;
|
|
19301
|
+
// Tính tổng width của các cột cố định phải
|
|
19302
|
+
const calcTotalRightWidth = (cols) => {
|
|
19303
|
+
cols.forEach(col => {
|
|
19304
|
+
if (col.columns?.length) {
|
|
19305
|
+
calcTotalRightWidth(col.columns);
|
|
19306
|
+
}
|
|
19307
|
+
else {
|
|
19308
|
+
if (col.fixedType === 'right' && col.visible !== false) {
|
|
19309
|
+
rightTotal += col.width ?? 40;
|
|
19310
|
+
}
|
|
19311
|
+
}
|
|
19312
|
+
});
|
|
19313
|
+
};
|
|
19314
|
+
calcTotalRightWidth(columns);
|
|
19299
19315
|
const traverse = (cols, level = 0) => {
|
|
19300
19316
|
levels[level] = levels[level] || [];
|
|
19301
|
-
return cols.reduce((colspanSum, col) => {
|
|
19317
|
+
return cols.reduce((colspanSum, col, indexCol) => {
|
|
19302
19318
|
const hasChildren = (col.columns?.length ?? 0) > 0;
|
|
19303
19319
|
const colspan = hasChildren ? traverse(col.columns, level + 1) : 1;
|
|
19304
19320
|
const cell = {
|
|
@@ -19308,21 +19324,27 @@ const calculateTableStructure = (columns) => {
|
|
|
19308
19324
|
rowspan: hasChildren ? 1 : maxDepth - level
|
|
19309
19325
|
};
|
|
19310
19326
|
levels[level].push(cell);
|
|
19327
|
+
const headerKey = `${level}-${indexCol}`;
|
|
19328
|
+
if (col.fixedType === 'left' && col.visible !== false) {
|
|
19329
|
+
objHeaderWidthFixLeft[headerKey] = leftTotal;
|
|
19330
|
+
}
|
|
19311
19331
|
if (!hasChildren) {
|
|
19312
|
-
const visible = col.visible !== false;
|
|
19313
19332
|
const index = flat.length;
|
|
19314
19333
|
const width = col.width ?? 40;
|
|
19315
19334
|
cell.index = index;
|
|
19316
19335
|
flat.push(cell);
|
|
19317
|
-
if (col.fixedType === 'left' && visible) {
|
|
19336
|
+
if (col.fixedType === 'left' && col.visible !== false) {
|
|
19318
19337
|
objWidthFixLeft[index] = leftTotal;
|
|
19319
19338
|
leftTotal += width;
|
|
19320
19339
|
}
|
|
19321
|
-
if (col.fixedType === 'right' && visible) {
|
|
19340
|
+
if (col.fixedType === 'right' && col.visible !== false) {
|
|
19341
|
+
rightTotal -= width;
|
|
19322
19342
|
objWidthFixRight[index] = rightTotal;
|
|
19323
|
-
rightTotal += width;
|
|
19324
19343
|
}
|
|
19325
19344
|
}
|
|
19345
|
+
if (col.fixedType === 'right' && col.visible !== false) {
|
|
19346
|
+
objHeaderWidthFixRight[headerKey] = rightTotal;
|
|
19347
|
+
}
|
|
19326
19348
|
return colspanSum + colspan;
|
|
19327
19349
|
}, 0);
|
|
19328
19350
|
};
|
|
@@ -19330,9 +19352,8 @@ const calculateTableStructure = (columns) => {
|
|
|
19330
19352
|
const flatVisble = flat.filter((e) => e.visible !== false);
|
|
19331
19353
|
const lastObjWidthFixLeft = Math.max(...Object.keys(objWidthFixLeft).map(Number), 0);
|
|
19332
19354
|
const fisrtObjWidthFixRight = Math.min(...Object.keys(objWidthFixRight).map(Number), flat.length);
|
|
19333
|
-
const
|
|
19334
|
-
const
|
|
19335
|
-
const lastEdit = editableColumns[editableColumns.length - 1];
|
|
19355
|
+
const indexFirstEdit = flat.findIndex((item) => item.editEnable && item.visible !== false && !item.disabledCondition) + 1;
|
|
19356
|
+
const indexLastEdit = flat.findLastIndex((item) => item.editEnable && item.visible !== false && !item.disabledCondition) + 1;
|
|
19336
19357
|
return {
|
|
19337
19358
|
levels,
|
|
19338
19359
|
flat,
|
|
@@ -19341,8 +19362,10 @@ const calculateTableStructure = (columns) => {
|
|
|
19341
19362
|
objWidthFixRight,
|
|
19342
19363
|
lastObjWidthFixLeft,
|
|
19343
19364
|
fisrtObjWidthFixRight,
|
|
19344
|
-
|
|
19345
|
-
|
|
19365
|
+
objHeaderWidthFixRight,
|
|
19366
|
+
objHeaderWidthFixLeft,
|
|
19367
|
+
indexFirstEdit,
|
|
19368
|
+
indexLastEdit
|
|
19346
19369
|
};
|
|
19347
19370
|
};
|
|
19348
19371
|
|
|
@@ -41788,7 +41811,7 @@ var css_248z$1 = ".react-resizable {\n position: relative;\n}\n.react-resizable
|
|
|
41788
41811
|
styleInject(css_248z$1);
|
|
41789
41812
|
|
|
41790
41813
|
const HeaderTableCol$1 = (props) => {
|
|
41791
|
-
const { selectEnable, dataSource, setSelectedRows, col, indexCol, indexParent,
|
|
41814
|
+
const { selectEnable, dataSource, setSelectedRows, col, indexCol, indexParent, objHeaderWidthFixLeft, objHeaderWidthFixRight, totalCount, selectedRows, columns, setColumns, orderBy, changeFilter, filterBy, changeOrder, allowFilter, allowOrder, container, fisrtObjWidthFixRight, lastObjWidthFixLeft, formatSetting, optionsFilter, idTable, isMulti } = props;
|
|
41792
41815
|
const { t } = useTranslation();
|
|
41793
41816
|
const headerRef = useRef(null);
|
|
41794
41817
|
const order = orderBy.find((item) => item.key === col.field);
|
|
@@ -41816,8 +41839,8 @@ const HeaderTableCol$1 = (props) => {
|
|
|
41816
41839
|
};
|
|
41817
41840
|
return (jsx(Fragment, { children: col.visible !== false && (jsx(Resizable, { className: "r-resize", width: typeof col.width === 'number' ? col.width : Number((col.width ?? "").replaceAll(new RegExp(`[^0-9]`, "g"), '')), height: 0, onResize: handleResize, draggableOpts: { enableUserSelectHack: false }, children: jsx("th", { rowSpan: col.rowspan !== 1 ? col.rowspan : 1, colSpan: col.columns?.filter(x => x.visible !== false)?.length ?? 1, className: classNames$1(`r-headercell fix-${col.fixedType}`, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'cell-fixed': col.fixedType }), style: {
|
|
41818
41841
|
top: `${indexParent * 42}px`,
|
|
41819
|
-
left: col.fixedType === 'left' ?
|
|
41820
|
-
right: col.fixedType === 'right' ?
|
|
41842
|
+
left: col.fixedType === 'left' ? objHeaderWidthFixLeft[`${indexParent}-${indexCol ?? 0}`] : undefined,
|
|
41843
|
+
right: col.fixedType === 'right' ? objHeaderWidthFixRight[`${indexParent}-${indexCol ?? 0}`] : undefined
|
|
41821
41844
|
}, children: jsxs("div", { style: { justifyContent: 'space-between' }, onClick: () => {
|
|
41822
41845
|
if (order) {
|
|
41823
41846
|
if (order.direction === 'asc') {
|
|
@@ -41841,7 +41864,7 @@ const HeaderTableCol$1 = (props) => {
|
|
|
41841
41864
|
setSelectedRows([]);
|
|
41842
41865
|
}
|
|
41843
41866
|
}
|
|
41844
|
-
} })), col.field !== 'checkbox' && jsxs(Fragment$1, { children: [jsxs("div", { className: 'header-content', style: { justifyContent: col.textAlign ?? 'left' }, children: [jsx("span", { id: `header-${idTable}-${indexParent}-${indexCol}`, ref: headerRef, className: 'text-content', children: t(col.headerText ?? '') }), checkOverflow() && jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `header-${idTable}-${indexParent}-${indexCol}`, children: t(col.headerText ?? '') })] }), col.field !== '#' && col.field !== 'command' && jsxs("div", { className: 'd-flex', children: [allowOrder && order?.direction === 'asc' && jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: 'ms-25', width: "10", height: "10", viewBox: "0 0 16 18", fill: "none", children: [jsx("g", { "clip-path": "url(#clip0_520_6)", children: 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" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_520_6", children: jsx("rect", { width: "16", height: "18", fill: "white" }) }) })] }), allowOrder && order?.direction === 'desc' && jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: 'ms-25', width: "10", height: "10", viewBox: "0 0 16 18", fill: "none", children: [jsx("g", { "clip-path": "url(#clip0_520_2)", children: 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" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_520_2", children: jsx("rect", { width: "16", height: "18", fill: "white" }) }) })] }), allowFilter && jsxs(Dropdown$1, { isOpen: openFilter, toggle: (e) => {
|
|
41867
|
+
} })), col.field !== 'checkbox' && jsxs(Fragment$1, { children: [jsxs("div", { className: 'header-content', style: { justifyContent: col.textAlign ?? 'left' }, children: [jsx("span", { id: `header-${idTable}-${indexParent}-${indexCol}`, ref: headerRef, className: 'text-content', children: t(col.headerText ?? '') }), checkOverflow() && jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `header-${idTable}-${indexParent}-${indexCol}`, children: t(col.headerText ?? '') })] }), col.field !== '#' && col.field !== 'command' && jsxs("div", { className: 'd-flex', children: [allowOrder && order?.direction === 'asc' && jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: 'ms-25', width: "10", height: "10", viewBox: "0 0 16 18", fill: "none", children: [jsx("g", { "clip-path": "url(#clip0_520_6)", children: 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" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_520_6", children: jsx("rect", { width: "16", height: "18", fill: "white" }) }) })] }), allowOrder && order?.direction === 'desc' && jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: 'ms-25', width: "10", height: "10", viewBox: "0 0 16 18", fill: "none", children: [jsx("g", { "clip-path": "url(#clip0_520_2)", children: 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" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_520_2", children: jsx("rect", { width: "16", height: "18", fill: "white" }) }) })] }), allowFilter && (col.columns?.length ?? 0) === 0 && col.allowFilter !== false && jsxs(Dropdown$1, { isOpen: openFilter, toggle: (e) => {
|
|
41845
41868
|
setOpenFilter(!openFilter);
|
|
41846
41869
|
e.stopPropagation();
|
|
41847
41870
|
}, onClick: (e) => {
|
|
@@ -41918,7 +41941,7 @@ const RenderFilterElement$1 = ({ filter, optionsFilter, formatSetting, filterBy,
|
|
|
41918
41941
|
handleSave();
|
|
41919
41942
|
e.stopPropagation();
|
|
41920
41943
|
}
|
|
41921
|
-
}, children: [((!column.filterType && column.editType === 'numeric') || column.filterType === 'numeric') ? jsxs(Fragment$1, { children: [RenderNumberFilter(), " "] }) : (column.filterType === 'select' ? jsxs(Fragment$1, { children: [RenderSelectFilter(), " "] }) : RenderStringFilter()), jsxs("div", { className: 'd-flex justify-content-end', children: [jsx(Button$1, { color: 'primary', style: { borderRadius: 3 }, className: 'me-50 py-25 px-50 fw-bold', onClick: handleSave, children: t('Filter') }), jsx(Button$1, { className: 'py-25 px-50
|
|
41944
|
+
}, children: [((!column.filterType && column.editType === 'numeric') || column.filterType === 'numeric') ? jsxs(Fragment$1, { children: [RenderNumberFilter(), " "] }) : (column.filterType === 'select' ? jsxs(Fragment$1, { children: [RenderSelectFilter(), " "] }) : RenderStringFilter()), jsxs("div", { className: 'd-flex justify-content-end', children: [jsx(Button$1, { color: 'primary', style: { borderRadius: 3 }, className: 'me-50 py-25 px-50 fw-bold', onClick: handleSave, children: t('Filter') }), jsx(Button$1, { className: 'py-25 px-50 fw-bold', color: 'white', style: { borderRadius: 3, borderWidth: 0 }, onClick: () => {
|
|
41922
41945
|
if (filterBy) {
|
|
41923
41946
|
changeFilter(filterBy.filter((x) => x.key !== column.field));
|
|
41924
41947
|
}
|
|
@@ -42315,7 +42338,7 @@ const RenderToolbarTop = ({ toolbarTopOption }) => {
|
|
|
42315
42338
|
}) })] }) }));
|
|
42316
42339
|
};
|
|
42317
42340
|
|
|
42318
|
-
const handleAdd = (dataSource, tableElement,
|
|
42341
|
+
const handleAdd = (dataSource, tableElement, indexFirstEdit,
|
|
42319
42342
|
/*eslint-disable*/
|
|
42320
42343
|
changeDataSource, pagingSetting, setIndexFocus, focusNewElement,
|
|
42321
42344
|
/*eslint-enable*/
|
|
@@ -42327,7 +42350,7 @@ numberOfRows) => {
|
|
|
42327
42350
|
}
|
|
42328
42351
|
if (tableElement) {
|
|
42329
42352
|
setIndexFocus(lengthData);
|
|
42330
|
-
focusNewElement(
|
|
42353
|
+
focusNewElement(indexFirstEdit, lengthData + 1, true);
|
|
42331
42354
|
}
|
|
42332
42355
|
};
|
|
42333
42356
|
const handleDuplicate = async (dataSource, indexFocus, fieldKey, defaultValue, fieldUniKey,
|
|
@@ -42525,8 +42548,8 @@ const handleArrowDown = (e, params) => {
|
|
|
42525
42548
|
}
|
|
42526
42549
|
};
|
|
42527
42550
|
const handleTab = (e, params) => {
|
|
42528
|
-
const { indexCol,
|
|
42529
|
-
if (indexCol ===
|
|
42551
|
+
const { indexCol, indexLastEdit, indexRow, totalCount, moveIndexRowToNewPage, pagingClient, pagingSetting, setIndexFocus, focusNewElement } = params;
|
|
42552
|
+
if (indexCol === indexLastEdit) {
|
|
42530
42553
|
if (indexRow === totalCount) {
|
|
42531
42554
|
moveIndexRowToNewPage();
|
|
42532
42555
|
}
|
|
@@ -42729,7 +42752,7 @@ const TableEdit = forwardRef((props, ref) => {
|
|
|
42729
42752
|
pagingSetting.setCurrentPage(1);
|
|
42730
42753
|
}
|
|
42731
42754
|
}, [dataSource]);
|
|
42732
|
-
const { levels: headerColumns, flatVisble, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight,
|
|
42755
|
+
const { levels: headerColumns, flatVisble, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight, objHeaderWidthFixLeft, objHeaderWidthFixRight, indexFirstEdit: indexFirstEdit, indexLastEdit: indexLastEdit } = useMemo(() => {
|
|
42733
42756
|
const obj = calculateTableStructure(columns);
|
|
42734
42757
|
setContentColumns(obj.flat);
|
|
42735
42758
|
return obj;
|
|
@@ -43063,13 +43086,13 @@ const TableEdit = forwardRef((props, ref) => {
|
|
|
43063
43086
|
}
|
|
43064
43087
|
if (tableElement) {
|
|
43065
43088
|
setIndexFocus(totalCount);
|
|
43066
|
-
focusNewElement(
|
|
43089
|
+
focusNewElement(indexFirstEdit, totalCount + 1, true);
|
|
43067
43090
|
}
|
|
43068
43091
|
};
|
|
43069
43092
|
const checkKeyDown = (e, row, col, indexRow, indexCol) => {
|
|
43070
43093
|
const idElement = `${idTable}-col${indexCol}-row${indexRow}`;
|
|
43071
43094
|
const params = {
|
|
43072
|
-
|
|
43095
|
+
indexLastEdit,
|
|
43073
43096
|
contentColumns,
|
|
43074
43097
|
dataSource,
|
|
43075
43098
|
addDisable,
|
|
@@ -43358,14 +43381,14 @@ const TableEdit = forwardRef((props, ref) => {
|
|
|
43358
43381
|
}, [selectedItem]);
|
|
43359
43382
|
const renderContentCol = (col, row, indexRow, indexCol, isSelected) => {
|
|
43360
43383
|
if (col.field === 'command') {
|
|
43361
|
-
return (col.visible !== false && jsx("td", { className: classNames$1(`r-rowcell p-0 fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
|
|
43384
|
+
return (col.visible !== false && jsx("td", { role: "gridcell", "aria-colindex": indexCol, className: classNames$1(`r-rowcell p-0 fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
|
|
43362
43385
|
left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
|
|
43363
43386
|
right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
|
|
43364
43387
|
textAlign: col.textAlign ? col.textAlign : 'left',
|
|
43365
43388
|
}, children: jsx("div", { className: "r-rowcell-div command", children: jsx(CommandElement, { commandItems: col.commandItems ?? [], handleCommandClick: handleCommandClick, indexRow: indexRow, rowData: row, setIndexFocus: setIndexFocus, indexFocus: indexFocus }) }) }, `col-${indexRow}-${indexCol}`));
|
|
43366
43389
|
}
|
|
43367
43390
|
else if (col.field === '#') {
|
|
43368
|
-
return (col.visible !== false && jsx("td", { className: classNames$1(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), tabIndex: Number(`${indexRow}${indexCol}`), style: {
|
|
43391
|
+
return (col.visible !== false && jsx("td", { role: "gridcell", "aria-colindex": indexCol, className: classNames$1(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), tabIndex: Number(`${indexRow}${indexCol}`), style: {
|
|
43369
43392
|
left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
|
|
43370
43393
|
right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
|
|
43371
43394
|
textAlign: 'center',
|
|
@@ -43403,7 +43426,7 @@ const TableEdit = forwardRef((props, ref) => {
|
|
|
43403
43426
|
}, children: jsx("div", { className: "r-rowcell-div", children: indexRow + 1 }) }, `col-${indexRow}-${indexCol}`));
|
|
43404
43427
|
}
|
|
43405
43428
|
else if (col.field === 'checkbox') {
|
|
43406
|
-
return (jsx("td", { className: classNames$1(`r-rowcell p-0 fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
|
|
43429
|
+
return (jsx("td", { role: "gridcell", "aria-colindex": indexCol, className: classNames$1(`r-rowcell p-0 fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
|
|
43407
43430
|
left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
|
|
43408
43431
|
right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
|
|
43409
43432
|
}, children: jsx("div", { className: "r-rowcell-div cursor-pointer", style: { alignItems: 'center' }, onClick: (e) => {
|
|
@@ -43443,7 +43466,7 @@ const TableEdit = forwardRef((props, ref) => {
|
|
|
43443
43466
|
}
|
|
43444
43467
|
const typeDis = !editDisable && (indexFocus === indexRow || col.editType === 'checkbox') && (!col.disabledCondition || !col.disabledCondition(row)) ? (col.editEnable ? 1 : (col.template ? 2 : 3)) : (col.template ? 2 : 3);
|
|
43445
43468
|
const errorMessage = typeDis === 1 || col.field === '' || !col.validate ? '' : col.validate(row[col.field], row);
|
|
43446
|
-
return (jsx(Fragment, { children: col.visible !== false && jsx("td", { className: classNames$1(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
|
|
43469
|
+
return (jsx(Fragment, { children: col.visible !== false && jsx("td", { role: "gridcell", "aria-colindex": indexCol, className: classNames$1(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
|
|
43447
43470
|
left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
|
|
43448
43471
|
right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
|
|
43449
43472
|
}, onClick: (e) => {
|
|
@@ -43541,33 +43564,30 @@ const TableEdit = forwardRef((props, ref) => {
|
|
|
43541
43564
|
});
|
|
43542
43565
|
return isFilterMatch && isSearchMatch;
|
|
43543
43566
|
}
|
|
43544
|
-
const renderData = () => {
|
|
43545
|
-
return (dataSource.map((row, indexRow) => {
|
|
43546
|
-
const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
|
|
43547
|
-
const flagSearch = checkRowMatch(row, filterBy, searchSetting?.searchTerm !== undefined ? searchSetting?.searchTerm : searchTerm, searchSetting?.keyField ?? []);
|
|
43548
|
-
if (flagSearch) {
|
|
43549
|
-
const flagDisplay = !pagingClient || ((indexRow + 1) > ((pagingSetting.pageSize ?? 0) * ((pagingSetting.currentPage ?? 0) - 1)) && (indexRow + 1) <= ((pagingSetting.pageSize ?? 0) * ((pagingSetting.currentPage ?? 0))));
|
|
43550
|
-
return (flagDisplay && jsx(Fragment$1, { children: jsx("tr", { className: classNames$1('r-row'), children: contentColumns.map((col, indexCol) => renderContentCol(col, row, indexRow, indexCol, isSelected)) }, `row-${indexRow}`) }));
|
|
43551
|
-
}
|
|
43552
|
-
}));
|
|
43553
|
-
};
|
|
43554
43567
|
useEffect(() => {
|
|
43555
43568
|
if (pagingClient && pagingSetting?.setCurrentPage && (searchSetting?.searchTerm !== undefined ? searchSetting?.searchTerm : searchTerm)) {
|
|
43556
43569
|
pagingSetting?.setCurrentPage(1);
|
|
43557
43570
|
}
|
|
43558
43571
|
}, [searchTerm, searchSetting?.searchTerm]);
|
|
43559
|
-
return (jsxs(Fragment, { children: [jsxs("div", { className: "react-table-edit", children: [jsxs("div", { className: 'r-grid', ref: gridRef, children: [toolbarSetting?.showTopToolbar && jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), jsx("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : 'auto'}`, minHeight: `${minHeight ? `${minHeight}px` : ''}`, maxHeight: `${maxHeight ? `${maxHeight}px` : '400px'}` }, children: jsxs("table", { style: { width: '100%' }, children: [jsx(RenderColGroup, { contentColumns: flatVisble }), jsx("thead", { className: 'r-gridheader', children: headerColumns.map((element, indexParent) => {
|
|
43572
|
+
return (jsxs(Fragment, { children: [jsxs("div", { className: "react-table-edit", children: [jsxs("div", { className: 'r-grid', ref: gridRef, children: [toolbarSetting?.showTopToolbar && jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), jsx("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : 'auto'}`, minHeight: `${minHeight ? `${minHeight}px` : ''}`, maxHeight: `${maxHeight ? `${maxHeight}px` : '400px'}` }, children: jsxs("table", { style: { width: '100%' }, role: "presentation", children: [jsx(RenderColGroup, { contentColumns: flatVisble }), jsx("thead", { className: 'r-gridheader', role: "rowgroup", children: headerColumns.map((element, indexParent) => {
|
|
43560
43573
|
return (jsx("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
|
|
43561
|
-
return (jsx(HeaderTableCol$1, { col: col, idTable: idTable ?? '', dataSource: dataSource, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false,
|
|
43574
|
+
return (jsx(HeaderTableCol$1, { col: col, idTable: idTable ?? '', dataSource: dataSource, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, container: tableElement, filterBy: filterBy, orderBy: orderBy, optionsFilter: optionsFilter, allowFilter: allowFilter, allowOrder: allowOrder, formatSetting: formatSetting, changeFilter: (val) => {
|
|
43562
43575
|
setFilterBy([...val]);
|
|
43563
43576
|
}, changeOrder: (val) => {
|
|
43564
43577
|
setOrderBy([...val]);
|
|
43565
43578
|
}, columns: contentColumns, setColumns: setContentColumns, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, totalCount: totalCount }, `header-${indexParent}-${index}`));
|
|
43566
43579
|
}) }, `header-${-indexParent}`));
|
|
43567
|
-
}) }), jsx("tbody", { className: 'r-gridcontent',
|
|
43580
|
+
}) }), jsx("tbody", { className: 'r-gridcontent', role: "rowgroup", children: dataSource.map((row, indexRow) => {
|
|
43581
|
+
const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
|
|
43582
|
+
const flagSearch = checkRowMatch(row, filterBy, searchSetting?.searchTerm !== undefined ? searchSetting?.searchTerm : searchTerm, searchSetting?.keyField ?? []);
|
|
43583
|
+
if (flagSearch) {
|
|
43584
|
+
const flagDisplay = !pagingClient || ((indexRow + 1) > ((pagingSetting.pageSize ?? 0) * ((pagingSetting.currentPage ?? 0) - 1)) && (indexRow + 1) <= ((pagingSetting.pageSize ?? 0) * ((pagingSetting.currentPage ?? 0))));
|
|
43585
|
+
return (flagDisplay && jsx(Fragment$1, { children: jsx("tr", { "aria-rowindex": indexRow + 1, role: "row", className: classNames$1('r-row'), children: contentColumns.map((col, indexCol) => renderContentCol(col, row, indexRow, indexCol, isSelected)) }, `row-${indexRow}`) }));
|
|
43586
|
+
}
|
|
43587
|
+
}) }), jsx("tfoot", { className: "r-gridfoot", children: haveSum == true ? jsx("tr", { className: 'r-row', children: contentColumns.map((col, index) => {
|
|
43568
43588
|
return (renderFooterCol(col, index));
|
|
43569
43589
|
}) }) : jsx(Fragment$1, {}) })] }) }), toolbarSetting?.showBottomToolbar && jsx(ToolbarBottom, { handleAdd: (numberOfRows) => {
|
|
43570
|
-
handleAdd(dataSource, tableElement.current,
|
|
43590
|
+
handleAdd(dataSource, tableElement.current, indexFirstEdit, changeDataSource, pagingSetting, setIndexFocus, focusNewElement, numberOfRows);
|
|
43571
43591
|
}, handleDuplicate: () => {
|
|
43572
43592
|
handleDuplicate(dataSource, indexFocus, fieldKey, defaultValue, fieldUniKey, changeDataSource, tableElement, totalCount, toolbarSetting, buttonSetting, editDisable, addDisable, onDuplicate);
|
|
43573
43593
|
}, handleInsertAfter: () => {
|
|
@@ -65769,7 +65789,7 @@ const VirtualTable = ({ idTable, dataSource, rowHeight = 33, height = 400, colum
|
|
|
65769
65789
|
}
|
|
65770
65790
|
}
|
|
65771
65791
|
};
|
|
65772
|
-
return (jsxs("div", { className: "react-table-edit r-virtualized-table", children: [jsxs("div", { className: 'r-grid', children: [toolbarSetting?.showTopToolbar && jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), jsxs("div", { ref: gridRef, className: "r-gridtable", onScroll: handleScroll, style: { height: `${height ? `${height}px` : 'auto'}` }, children: [jsxs("table", { style: { width: '100%' }, children: [jsx(RenderColGroup, { contentColumns: flatVisble }), jsx("thead", { className: 'r-gridheader', children: headerColumns.map((rowColumn, indexParent) => (jsx("tr", { className: "r-row", role: "row", children: rowColumn.map((column, indexColumn) => (jsx(HeaderTableCol, { idTable: idTable, col: column, dataSource: dataSource, indexCol: indexColumn, indexParent: indexParent, isMulti: isMutil ?? false, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, columns: contentColumns, setColumns: setColumns, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, orderBy: orderBy, allowFilter: allowFilter, allowOrder: allowOrder, filterBy: filterBy, optionsFilter: optionsFilter, changeFilter: (val) => {
|
|
65792
|
+
return (jsxs("div", { className: "react-table-edit r-virtualized-table", children: [jsxs("div", { className: 'r-grid', children: [toolbarSetting?.showTopToolbar && jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), jsxs("div", { ref: gridRef, className: "r-gridtable", onScroll: handleScroll, style: { height: `${height ? `${height}px` : 'auto'}` }, children: [jsxs("table", { role: "presentation", style: { width: '100%' }, children: [jsx(RenderColGroup, { contentColumns: flatVisble }), jsx("thead", { className: 'r-gridheader', role: "rowgroup", children: headerColumns.map((rowColumn, indexParent) => (jsx("tr", { className: "r-row", role: "row", children: rowColumn.map((column, indexColumn) => (jsx(HeaderTableCol, { idTable: idTable, col: column, dataSource: dataSource, indexCol: indexColumn, indexParent: indexParent, isMulti: isMutil ?? false, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, columns: contentColumns, setColumns: setColumns, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, orderBy: orderBy, allowFilter: allowFilter, allowOrder: allowOrder, filterBy: filterBy, optionsFilter: optionsFilter, changeFilter: (val) => {
|
|
65773
65793
|
setFilterBy([...val]);
|
|
65774
65794
|
if (changeFilter) {
|
|
65775
65795
|
changeFilter(val);
|
|
@@ -65779,10 +65799,10 @@ const VirtualTable = ({ idTable, dataSource, rowHeight = 33, height = 400, colum
|
|
|
65779
65799
|
if (changeOrder) {
|
|
65780
65800
|
changeOrder(val);
|
|
65781
65801
|
}
|
|
65782
|
-
}, container: gridRef, totalCount: dataSource.length }, `header-${indexParent}-${indexColumn}`))) }, indexParent))) }), jsxs("tbody", { className: 'r-gridcontent', children: [adjustedStartIndex > 0 && (jsx("tr", { style: { height: adjustedStartIndex * rowHeight }, children: jsx("td", { style: { padding: 0 }, colSpan: flatVisble.length }) })), visibleData.map((row, index) => {
|
|
65802
|
+
}, container: gridRef, totalCount: dataSource.length }, `header-${indexParent}-${indexColumn}`))) }, `header-${-indexParent}`))) }), jsxs("tbody", { className: 'r-gridcontent', role: "rowgroup", children: [adjustedStartIndex > 0 && (jsx("tr", { style: { height: adjustedStartIndex * rowHeight }, children: jsx("td", { style: { padding: 0 }, colSpan: flatVisble.length }) })), visibleData.map((row, index) => {
|
|
65783
65803
|
const indexRow = index + startIndex;
|
|
65784
65804
|
const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
|
|
65785
|
-
return (jsx("tr", { className:
|
|
65805
|
+
return (jsx("tr", { "aria-rowindex": indexRow + 1, role: "row", className: 'r-row', children: contentColumns.map((column, indexCol) => (jsx(RenderContentCol, { idTable: idTable, col: column, fieldKey: 'field', objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, isMulti: isMutil ?? false, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, formatSetting: formatSetting, handleCommandClick: handleCommandClick, indexCol: indexCol, indexRow: indexRow, isSelected: isSelected, row: row }, indexCol))) }, `row-content-${indexRow}`));
|
|
65786
65806
|
}), dataSource.length > adjustedEndIndex && (jsx("tr", { style: { height: (dataSource.length - adjustedEndIndex) * rowHeight }, children: jsx("td", { style: { padding: 0 }, colSpan: flatVisble.length }) }))] }), dataSource.length > 0 && jsx("tfoot", { className: "r-gridfoot", children: (columnsAggregate?.length ?? 0) > 0 ? jsx("tr", { className: 'r-row', children: contentColumns.map((col, indexCol) => {
|
|
65787
65807
|
const item = columnsAggregate?.find((x) => x.field === col.field);
|
|
65788
65808
|
let sumValue = item?.value;
|