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
|
@@ -10,7 +10,8 @@ type IFDataProps = {
|
|
|
10
10
|
setColumn: Dispatch<SetStateAction<IHeaderColumnTable[]>>;
|
|
11
11
|
indexCol: number;
|
|
12
12
|
indexParent: number;
|
|
13
|
-
|
|
13
|
+
objWidthFixLeft: any;
|
|
14
|
+
objWidthFixRight: any;
|
|
14
15
|
totalCount: number;
|
|
15
16
|
selectedRows: any[];
|
|
16
17
|
isMulti: boolean;
|
package/dist/index.js
CHANGED
|
@@ -41736,7 +41736,7 @@ var css_248z$1 = ".react-resizable {\n position: relative;\n}\n.react-resizable
|
|
|
41736
41736
|
styleInject(css_248z$1);
|
|
41737
41737
|
|
|
41738
41738
|
const HeaderTableCol = (props) => {
|
|
41739
|
-
const { selectEnable, dataSource, setSelectedRows, col, indexCol, indexParent,
|
|
41739
|
+
const { selectEnable, dataSource, setSelectedRows, col, indexCol, indexParent, objWidthFixLeft, objWidthFixRight, totalCount, selectedRows, column, setColumn, isMulti } = props;
|
|
41740
41740
|
const { t } = reactI18next.useTranslation();
|
|
41741
41741
|
const handleResize = (e, { size }) => {
|
|
41742
41742
|
// Update the column width here
|
|
@@ -41755,8 +41755,8 @@ const HeaderTableCol = (props) => {
|
|
|
41755
41755
|
};
|
|
41756
41756
|
return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && (jsxRuntime.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: jsxRuntime.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: {
|
|
41757
41757
|
top: `${indexParent * 42}px`,
|
|
41758
|
-
left: col.fixedType === 'left' ?
|
|
41759
|
-
right: col.fixedType === 'right' ?
|
|
41758
|
+
left: col.fixedType === 'left' ? objWidthFixLeft[col.index ?? 0] : undefined,
|
|
41759
|
+
right: col.fixedType === 'right' ? objWidthFixRight[col.index ?? 0] : undefined,
|
|
41760
41760
|
width: col.width ? typeof col.width === 'number' ? col.width : col.width?.includes('px') || col.width?.includes('%') ? col.width : `${col.width}px` : 'auto',
|
|
41761
41761
|
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',
|
|
41762
41762
|
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'
|
|
@@ -42515,7 +42515,10 @@ const TableEdit = React$5.forwardRef((props, ref) => {
|
|
|
42515
42515
|
const [levelCol, setLevelCol] = React$5.useState(0);
|
|
42516
42516
|
const [columnFistEdit, setColumnFistEdit] = React$5.useState(0);
|
|
42517
42517
|
const [columnLastEdit, setColumnlastEdit] = React$5.useState(0);
|
|
42518
|
-
const [
|
|
42518
|
+
const [objWidthFixRight, setObjWidthFixRight] = React$5.useState({});
|
|
42519
|
+
const [objWidthFixLeft, setObjWidthFixLeft] = React$5.useState({});
|
|
42520
|
+
const [lastObjWidthFixLeft, setLastObjWidthFixLeft] = React$5.useState(0);
|
|
42521
|
+
const [fisrtObjWidthFixRight, setFisrtObjWidthFixRight] = React$5.useState(0);
|
|
42519
42522
|
const [openPopupSetupColumn, setOpenPopupSetupColumn] = React$5.useState(false);
|
|
42520
42523
|
const [searchTerm, setSearchTerm] = React$5.useState('');
|
|
42521
42524
|
const tableElement = React$5.useRef(null);
|
|
@@ -42542,12 +42545,14 @@ const TableEdit = React$5.forwardRef((props, ref) => {
|
|
|
42542
42545
|
headerColumns[0][index].fixedType = item.fixedType;
|
|
42543
42546
|
}
|
|
42544
42547
|
if (item.fixedType === 'left' && item.visible !== false) {
|
|
42545
|
-
|
|
42548
|
+
setLastObjWidthFixLeft(index);
|
|
42549
|
+
objWidthFixLeft[index] = letfWidthFix;
|
|
42546
42550
|
letfWidthFix += Number(item.width ?? 40);
|
|
42547
42551
|
}
|
|
42548
42552
|
const lasColumn = contentColumns[contentColumns.length - 1 - index];
|
|
42549
42553
|
if (lasColumn.fixedType === 'right' && lasColumn.visible !== false) {
|
|
42550
|
-
|
|
42554
|
+
setFisrtObjWidthFixRight(contentColumns.length - 1 - index);
|
|
42555
|
+
objWidthFixRight[contentColumns.length - 1 - index] = rightWidthFix;
|
|
42551
42556
|
rightWidthFix += Number(lasColumn.width ?? 40);
|
|
42552
42557
|
}
|
|
42553
42558
|
if (item.editEnable && (item.visible !== false) && (!item.disabledCondition)) {
|
|
@@ -42560,7 +42565,8 @@ const TableEdit = React$5.forwardRef((props, ref) => {
|
|
|
42560
42565
|
if (levelCol === 1) {
|
|
42561
42566
|
setHeaderColumns([...headerColumns]);
|
|
42562
42567
|
}
|
|
42563
|
-
|
|
42568
|
+
setObjWidthFixLeft(objWidthFixLeft);
|
|
42569
|
+
setObjWidthFixRight(objWidthFixRight);
|
|
42564
42570
|
setColumnFistEdit(indexFirst + 1);
|
|
42565
42571
|
setColumnlastEdit(indexlast + 1);
|
|
42566
42572
|
}, [contentColumns]);
|
|
@@ -43236,16 +43242,16 @@ const TableEdit = React$5.forwardRef((props, ref) => {
|
|
|
43236
43242
|
}, [selectedItem]);
|
|
43237
43243
|
const renderContentCol = (col, row, indexRow, indexCol, isSelected) => {
|
|
43238
43244
|
if (col.field === 'command') {
|
|
43239
|
-
return (col.visible !== false && jsxRuntime.jsx("td", { className: classnames(`r-rowcell p-0 fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
|
|
43240
|
-
left: col.fixedType === 'left' ?
|
|
43241
|
-
right: col.fixedType === 'right' ?
|
|
43245
|
+
return (col.visible !== false && jsxRuntime.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: {
|
|
43246
|
+
left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
|
|
43247
|
+
right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
|
|
43242
43248
|
textAlign: col.textAlign ? col.textAlign : 'left',
|
|
43243
43249
|
}, children: jsxRuntime.jsx("div", { className: "r-rowcell-div command", children: jsxRuntime.jsx(CommandElement, { commandItems: col.commandItems ?? [], handleCommandClick: handleCommandClick, indexRow: indexRow, rowData: row, setIndexFocus: setIndexFocus, indexFocus: indexFocus }) }) }, `col-${indexRow}-${indexCol}`));
|
|
43244
43250
|
}
|
|
43245
43251
|
else if (col.field === '#') {
|
|
43246
|
-
return (col.visible !== false && jsxRuntime.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: {
|
|
43247
|
-
left: col.fixedType === 'left' ?
|
|
43248
|
-
right: col.fixedType === 'right' ?
|
|
43252
|
+
return (col.visible !== false && jsxRuntime.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: {
|
|
43253
|
+
left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
|
|
43254
|
+
right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
|
|
43249
43255
|
textAlign: 'center',
|
|
43250
43256
|
}, onCopy: (e) => {
|
|
43251
43257
|
if (!editDisable && (e.target.nodeName === 'DIV' || e.target.nodeName === 'TD')) {
|
|
@@ -43281,9 +43287,9 @@ const TableEdit = React$5.forwardRef((props, ref) => {
|
|
|
43281
43287
|
}, children: jsxRuntime.jsx("div", { className: "r-rowcell-div", children: indexRow + 1 }) }, `col-${indexRow}-${indexCol}`));
|
|
43282
43288
|
}
|
|
43283
43289
|
else if (col.field === 'checkbox') {
|
|
43284
|
-
return (jsxRuntime.jsx("td", { className: classnames(`r-rowcell p-0 fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
|
|
43285
|
-
left: col.fixedType === 'left' ?
|
|
43286
|
-
right: col.fixedType === 'right' ?
|
|
43290
|
+
return (jsxRuntime.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: {
|
|
43291
|
+
left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
|
|
43292
|
+
right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
|
|
43287
43293
|
}, children: jsxRuntime.jsx("div", { className: "r-rowcell-div cursor-pointer", style: { alignItems: 'center' }, onClick: (e) => {
|
|
43288
43294
|
if (selectEnable) {
|
|
43289
43295
|
const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
|
|
@@ -43321,9 +43327,9 @@ const TableEdit = React$5.forwardRef((props, ref) => {
|
|
|
43321
43327
|
}
|
|
43322
43328
|
const typeDis = !editDisable && (indexFocus === indexRow || col.editType === 'checkbox') && (!col.disabledCondition || !col.disabledCondition(row)) ? (col.editEnable ? 1 : (col.template ? 2 : 3)) : (col.template ? 2 : 3);
|
|
43323
43329
|
const errorMessage = typeDis === 1 || col.field === '' || !col.validate ? '' : col.validate(row[col.field], row);
|
|
43324
|
-
return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && jsxRuntime.jsx("td", { className: classnames(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
|
|
43325
|
-
left: col.fixedType === 'left' ?
|
|
43326
|
-
right: col.fixedType === 'right' ?
|
|
43330
|
+
return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && jsxRuntime.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: {
|
|
43331
|
+
left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
|
|
43332
|
+
right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
|
|
43327
43333
|
}, onClick: (e) => {
|
|
43328
43334
|
if (e.target.nodeName === 'DIV' || e.target.nodeName === 'TD') {
|
|
43329
43335
|
if (!editDisable && indexRow != indexFocus) {
|
|
@@ -43372,8 +43378,8 @@ const TableEdit = React$5.forwardRef((props, ref) => {
|
|
|
43372
43378
|
const renderFooterCol = (col, indexCol) => {
|
|
43373
43379
|
const sumValue = (col.haveSum === true && col.editType === "numeric") ? dataSource.reduce(function (accumulator, currentValue) { return (Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0)); }, 0) : 0;
|
|
43374
43380
|
return (jsxRuntime.jsx(React$5.Fragment, { children: (col.visible !== false) && jsxRuntime.jsx("td", { className: classnames(`p-0 px-50 r-footer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }), style: {
|
|
43375
|
-
left: col.fixedType === 'left' ?
|
|
43376
|
-
right: col.fixedType === 'right' ?
|
|
43381
|
+
left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
|
|
43382
|
+
right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
|
|
43377
43383
|
textAlign: col.textAlign ? col.textAlign : 'left'
|
|
43378
43384
|
}, children: jsxRuntime.jsxs("div", { className: "r-footer-div", children: [col.haveSum === true && col.editType === "numeric" && (Number(sumValue) >= 0) && jsxRuntime.jsx(jsxRuntime.Fragment, { children: formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) }), col.haveSum === true && col.editType === "numeric" && (Number(sumValue) < 0) && jsxRuntime.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}`));
|
|
43379
43385
|
};
|
|
@@ -43406,7 +43412,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
|
|
|
43406
43412
|
}, [searchTerm, searchSetting?.searchTerm]);
|
|
43407
43413
|
return (jsxRuntime.jsxs(React$5.Fragment, { children: [jsxRuntime.jsxs("div", { className: "react-table-edit", children: [jsxRuntime.jsxs("div", { className: 'r-grid', ref: gridRef, children: [toolbarSetting?.showTopToolbar && jsxRuntime.jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), jsxRuntime.jsx("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : 'auto'}`, minHeight: `${minHeight ? `${minHeight}px` : ''}`, maxHeight: `${maxHeight ? `${maxHeight}px` : '400px'}` }, children: jsxRuntime.jsxs("table", { style: { width: '100%' }, children: [jsxRuntime.jsx("thead", { className: 'r-gridheader', children: headerColumns.map((element, indexParent) => {
|
|
43408
43414
|
return (jsxRuntime.jsx("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
|
|
43409
|
-
return (jsxRuntime.jsx(HeaderTableCol, { col: col, dataSource: dataSource, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false,
|
|
43415
|
+
return (jsxRuntime.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}`));
|
|
43410
43416
|
}) }, `header-${-indexParent}`));
|
|
43411
43417
|
}) }), jsxRuntime.jsx("tbody", { className: 'r-gridcontent', children: renderData() }), jsxRuntime.jsx("tfoot", { className: "r-gridfoot", children: haveSum == true ? jsxRuntime.jsx("tr", { className: 'r-row', children: contentColumns.map((col, index) => {
|
|
43412
43418
|
return (renderFooterCol(col, index));
|