react-table-edit 1.4.11 → 1.4.12
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/header.d.ts +2 -1
- package/dist/index.js +28 -22
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +28 -22
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -41708,7 +41708,7 @@ var css_248z$1 = ".react-resizable {\n position: relative;\n}\n.react-resizable
|
|
|
41708
41708
|
styleInject(css_248z$1);
|
|
41709
41709
|
|
|
41710
41710
|
const HeaderTableCol = (props) => {
|
|
41711
|
-
const { selectEnable, dataSource, setSelectedRows, col, indexCol, indexParent,
|
|
41711
|
+
const { selectEnable, dataSource, setSelectedRows, col, indexCol, indexParent, objWidthFixLeft, objWidthFixRight, totalCount, selectedRows, column, setColumn, isMulti } = props;
|
|
41712
41712
|
const { t } = useTranslation();
|
|
41713
41713
|
const handleResize = (e, { size }) => {
|
|
41714
41714
|
// Update the column width here
|
|
@@ -41727,8 +41727,8 @@ const HeaderTableCol = (props) => {
|
|
|
41727
41727
|
};
|
|
41728
41728
|
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 : undefined, colSpan: col.columns?.filter(x => x.visible !== false)?.length ?? 1, className: classnames(`r-headercell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }), style: {
|
|
41729
41729
|
top: `${indexParent * 42}px`,
|
|
41730
|
-
left: col.fixedType === 'left' ?
|
|
41731
|
-
right: col.fixedType === 'right' ?
|
|
41730
|
+
left: col.fixedType === 'left' ? objWidthFixLeft[col.index ?? 0] : undefined,
|
|
41731
|
+
right: col.fixedType === 'right' ? objWidthFixRight[col.index ?? 0] : undefined,
|
|
41732
41732
|
width: col.width ? typeof col.width === 'number' ? col.width : col.width?.includes('px') || col.width?.includes('%') ? col.width : `${col.width}px` : 'auto',
|
|
41733
41733
|
minWidth: col.fixedType ? col.width : col.minWidth ? typeof col.minWidth === 'number' ? col.minWidth : col.minWidth?.includes('px') || col.minWidth?.includes('%') ? col.minWidth : `${col.minWidth}px` : 'auto',
|
|
41734
41734
|
maxWidth: col.fixedType ? col.width : col.maxWidth ? typeof col.maxWidth === 'number' ? col.maxWidth : col.maxWidth?.includes('px') || col.maxWidth?.includes('%') ? col.maxWidth : `${col.maxWidth}px` : 'auto'
|
|
@@ -42487,7 +42487,10 @@ const TableEdit = forwardRef((props, ref) => {
|
|
|
42487
42487
|
const [levelCol, setLevelCol] = useState(0);
|
|
42488
42488
|
const [columnFistEdit, setColumnFistEdit] = useState(0);
|
|
42489
42489
|
const [columnLastEdit, setColumnlastEdit] = useState(0);
|
|
42490
|
-
const [
|
|
42490
|
+
const [objWidthFixRight, setObjWidthFixRight] = useState({});
|
|
42491
|
+
const [objWidthFixLeft, setObjWidthFixLeft] = useState({});
|
|
42492
|
+
const [lastObjWidthFixLeft, setLastObjWidthFixLeft] = useState(0);
|
|
42493
|
+
const [fisrtObjWidthFixRight, setFisrtObjWidthFixRight] = useState(0);
|
|
42491
42494
|
const [openPopupSetupColumn, setOpenPopupSetupColumn] = useState(false);
|
|
42492
42495
|
const [searchTerm, setSearchTerm] = useState('');
|
|
42493
42496
|
const tableElement = useRef(null);
|
|
@@ -42514,12 +42517,14 @@ const TableEdit = forwardRef((props, ref) => {
|
|
|
42514
42517
|
headerColumns[0][index].fixedType = item.fixedType;
|
|
42515
42518
|
}
|
|
42516
42519
|
if (item.fixedType === 'left' && item.visible !== false) {
|
|
42517
|
-
|
|
42520
|
+
setLastObjWidthFixLeft(index);
|
|
42521
|
+
objWidthFixLeft[index] = letfWidthFix;
|
|
42518
42522
|
letfWidthFix += Number(item.width ?? 40);
|
|
42519
42523
|
}
|
|
42520
42524
|
const lasColumn = contentColumns[contentColumns.length - 1 - index];
|
|
42521
42525
|
if (lasColumn.fixedType === 'right' && lasColumn.visible !== false) {
|
|
42522
|
-
|
|
42526
|
+
setFisrtObjWidthFixRight(contentColumns.length - 1 - index);
|
|
42527
|
+
objWidthFixRight[contentColumns.length - 1 - index] = rightWidthFix;
|
|
42523
42528
|
rightWidthFix += Number(lasColumn.width ?? 40);
|
|
42524
42529
|
}
|
|
42525
42530
|
if (item.editEnable && (item.visible !== false) && (!item.disabledCondition)) {
|
|
@@ -42532,7 +42537,8 @@ const TableEdit = forwardRef((props, ref) => {
|
|
|
42532
42537
|
if (levelCol === 1) {
|
|
42533
42538
|
setHeaderColumns([...headerColumns]);
|
|
42534
42539
|
}
|
|
42535
|
-
|
|
42540
|
+
setObjWidthFixLeft(objWidthFixLeft);
|
|
42541
|
+
setObjWidthFixRight(objWidthFixRight);
|
|
42536
42542
|
setColumnFistEdit(indexFirst + 1);
|
|
42537
42543
|
setColumnlastEdit(indexlast + 1);
|
|
42538
42544
|
}, [contentColumns]);
|
|
@@ -43208,16 +43214,16 @@ const TableEdit = forwardRef((props, ref) => {
|
|
|
43208
43214
|
}, [selectedItem]);
|
|
43209
43215
|
const renderContentCol = (col, row, indexRow, indexCol, isSelected) => {
|
|
43210
43216
|
if (col.field === 'command') {
|
|
43211
|
-
return (col.visible !== false && jsx("td", { className: classnames(`r-rowcell p-0 fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
|
|
43212
|
-
left: col.fixedType === 'left' ?
|
|
43213
|
-
right: col.fixedType === 'right' ?
|
|
43217
|
+
return (col.visible !== false && jsx("td", { className: classnames(`r-rowcell p-0 fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'cell-fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
|
|
43218
|
+
left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
|
|
43219
|
+
right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
|
|
43214
43220
|
textAlign: col.textAlign ? col.textAlign : 'left',
|
|
43215
43221
|
}, 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}`));
|
|
43216
43222
|
}
|
|
43217
43223
|
else if (col.field === '#') {
|
|
43218
|
-
return (col.visible !== false && jsx("td", { className: classnames(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), tabIndex: Number(`${indexRow}${indexCol}`), style: {
|
|
43219
|
-
left: col.fixedType === 'left' ?
|
|
43220
|
-
right: col.fixedType === 'right' ?
|
|
43224
|
+
return (col.visible !== false && jsx("td", { className: classnames(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'cell-fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), tabIndex: Number(`${indexRow}${indexCol}`), style: {
|
|
43225
|
+
left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
|
|
43226
|
+
right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
|
|
43221
43227
|
textAlign: 'center',
|
|
43222
43228
|
}, onCopy: (e) => {
|
|
43223
43229
|
if (!editDisable && (e.target.nodeName === 'DIV' || e.target.nodeName === 'TD')) {
|
|
@@ -43253,9 +43259,9 @@ const TableEdit = forwardRef((props, ref) => {
|
|
|
43253
43259
|
}, children: jsx("div", { className: "r-rowcell-div", children: indexRow + 1 }) }, `col-${indexRow}-${indexCol}`));
|
|
43254
43260
|
}
|
|
43255
43261
|
else if (col.field === 'checkbox') {
|
|
43256
|
-
return (jsx("td", { className: classnames(`r-rowcell p-0 fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
|
|
43257
|
-
left: col.fixedType === 'left' ?
|
|
43258
|
-
right: col.fixedType === 'right' ?
|
|
43262
|
+
return (jsx("td", { className: classnames(`r-rowcell p-0 fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'cell-fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
|
|
43263
|
+
left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
|
|
43264
|
+
right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
|
|
43259
43265
|
}, children: jsx("div", { className: "r-rowcell-div cursor-pointer", style: { alignItems: 'center' }, onClick: (e) => {
|
|
43260
43266
|
if (selectEnable) {
|
|
43261
43267
|
const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
|
|
@@ -43293,9 +43299,9 @@ const TableEdit = forwardRef((props, ref) => {
|
|
|
43293
43299
|
}
|
|
43294
43300
|
const typeDis = !editDisable && (indexFocus === indexRow || col.editType === 'checkbox') && (!col.disabledCondition || !col.disabledCondition(row)) ? (col.editEnable ? 1 : (col.template ? 2 : 3)) : (col.template ? 2 : 3);
|
|
43295
43301
|
const errorMessage = typeDis === 1 || col.field === '' || !col.validate ? '' : col.validate(row[col.field], row);
|
|
43296
|
-
return (jsx(Fragment, { children: col.visible !== false && jsx("td", { className: classnames(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
|
|
43297
|
-
left: col.fixedType === 'left' ?
|
|
43298
|
-
right: col.fixedType === 'right' ?
|
|
43302
|
+
return (jsx(Fragment, { children: col.visible !== false && jsx("td", { className: classnames(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'cell-fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
|
|
43303
|
+
left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
|
|
43304
|
+
right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
|
|
43299
43305
|
}, onClick: (e) => {
|
|
43300
43306
|
if (e.target.nodeName === 'DIV' || e.target.nodeName === 'TD') {
|
|
43301
43307
|
if (!editDisable && indexRow != indexFocus) {
|
|
@@ -43344,8 +43350,8 @@ const TableEdit = forwardRef((props, ref) => {
|
|
|
43344
43350
|
const renderFooterCol = (col, indexCol) => {
|
|
43345
43351
|
const sumValue = (col.haveSum === true && col.editType === "numeric") ? dataSource.reduce(function (accumulator, currentValue) { return (Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0)); }, 0) : 0;
|
|
43346
43352
|
return (jsx(Fragment, { children: (col.visible !== false) && jsx("td", { className: classnames(`p-0 px-50 r-footer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }), style: {
|
|
43347
|
-
left: col.fixedType === 'left' ?
|
|
43348
|
-
right: col.fixedType === 'right' ?
|
|
43353
|
+
left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
|
|
43354
|
+
right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
|
|
43349
43355
|
textAlign: col.textAlign ? col.textAlign : 'left'
|
|
43350
43356
|
}, children: jsxs("div", { className: "r-footer-div", children: [col.haveSum === true && col.editType === "numeric" && (Number(sumValue) >= 0) && jsx(Fragment$1, { children: formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) }), col.haveSum === true && col.editType === "numeric" && (Number(sumValue) < 0) && jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false)}${formatSetting?.suffixNegative ?? ''}`] })] }) }) }, `summarycell-${indexCol}`));
|
|
43351
43357
|
};
|
|
@@ -43378,7 +43384,7 @@ const TableEdit = forwardRef((props, ref) => {
|
|
|
43378
43384
|
}, [searchTerm, searchSetting?.searchTerm]);
|
|
43379
43385
|
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("thead", { className: 'r-gridheader', children: headerColumns.map((element, indexParent) => {
|
|
43380
43386
|
return (jsx("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
|
|
43381
|
-
return (jsx(HeaderTableCol, { col: col, dataSource: dataSource, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false,
|
|
43387
|
+
return (jsx(HeaderTableCol, { col: col, dataSource: dataSource, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, column: contentColumns, setColumn: setContentColumns, totalCount: totalCount }, `header-${indexParent}-${index}`));
|
|
43382
43388
|
}) }, `header-${-indexParent}`));
|
|
43383
43389
|
}) }), jsx("tbody", { className: 'r-gridcontent', children: renderData() }), jsx("tfoot", { className: "r-gridfoot", children: haveSum == true ? jsx("tr", { className: 'r-row', children: contentColumns.map((col, index) => {
|
|
43384
43390
|
return (renderFooterCol(col, index));
|