react-table-edit 1.5.22 → 1.5.24
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/gourp-col.d.ts +5 -3
- package/dist/component/table/header.d.ts +4 -2
- package/dist/component/table/setting-column.d.ts +1 -1
- package/dist/component/table-view/content.d.ts +4 -2
- package/dist/component/type/index.d.ts +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +34 -34
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +34 -34
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -36777,9 +36777,9 @@ const FooterCol = ({ col, indexCol, dataSource, objWidthFix, formatSetting }) =>
|
|
|
36777
36777
|
}, children: jsx("div", { className: "r-footer-div", children: col.haveSum === true && col.type === "numeric" && (jsx(Fragment$1, { children: Number(sumValue) >= 0 ? (jsx(Fragment$1, { children: formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ",", formatSetting?.thousandSeparator ?? ".", col.numericSettings?.fraction, true, false) })) : (jsx("div", { style: { color: formatSetting?.colorNegative ?? "red" }, children: `${formatSetting?.prefixNegative ?? "-"}${formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ",", formatSetting?.thousandSeparator ?? ".", col.numericSettings?.fraction, true, false)}${formatSetting?.suffixNegative ?? ""}` })) })) }) })) }, `summarycell-${indexCol}`));
|
|
36778
36778
|
};
|
|
36779
36779
|
|
|
36780
|
-
const RenderColGroup = ({ contentColumns,
|
|
36780
|
+
const RenderColGroup = ({ contentColumns, groupSetting }) => (jsx("colgroup", { children: contentColumns.map((col, index) => {
|
|
36781
36781
|
return (col.visible !== false &&
|
|
36782
|
-
(visibleGroupColumn || !groupColumns?.includes(col.field)) && (jsx("col", { style: {
|
|
36782
|
+
(groupSetting?.visibleGroupColumn || !groupSetting?.groupColumns?.includes(col.field)) && (jsx("col", { style: {
|
|
36783
36783
|
width: typeof col.width === 'number' ? `${col.width}px` : col.width || undefined,
|
|
36784
36784
|
minWidth: typeof col.minWidth === 'number' ? `${col.minWidth}px` : col.minWidth || undefined,
|
|
36785
36785
|
maxWidth: typeof col.maxWidth === 'number' ? `${col.maxWidth}px` : col.maxWidth || undefined
|
|
@@ -38958,7 +38958,7 @@ const DateRangeFilterComponent = ({ fieldFilter, filterBy, handleSave }) => {
|
|
|
38958
38958
|
};
|
|
38959
38959
|
|
|
38960
38960
|
const HeaderTableCol = (props) => {
|
|
38961
|
-
const { selectEnable, dataSource, setSelectedRows, col, indexCol, indexParent, objHeaderWidthFixLeft, objHeaderWidthFixRight, totalCount, selectedRows, columns, orderBy, changeFilter, filterBy, changeOrder, allowFiltering, allowSorting, container, fisrtObjWidthFixRight, lastObjWidthFixLeft, setContentColumns, formatSetting, optionsFilter, idTable, isMulti,
|
|
38961
|
+
const { selectEnable, dataSource, setSelectedRows, col, indexCol, indexParent, objHeaderWidthFixLeft, objHeaderWidthFixRight, totalCount, selectedRows, columns, orderBy, changeFilter, filterBy, changeOrder, allowFiltering, allowSorting, container, fisrtObjWidthFixRight, lastObjWidthFixLeft, setContentColumns, formatSetting, optionsFilter, idTable, isMulti, groupSetting } = props;
|
|
38962
38962
|
const { t } = useTranslation();
|
|
38963
38963
|
const headerRef = useRef(null);
|
|
38964
38964
|
const order = orderBy.find((item) => item.key === col.field);
|
|
@@ -38977,7 +38977,7 @@ const HeaderTableCol = (props) => {
|
|
|
38977
38977
|
const checkOverflow = () => {
|
|
38978
38978
|
return headerRef.current && headerRef.current.scrollHeight > headerRef.current.clientHeight;
|
|
38979
38979
|
};
|
|
38980
|
-
return (jsx(Fragment, { children: col.visible !== false && (visibleGroupColumn || !groupColumns?.includes(col.field)) && (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: true }, 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: {
|
|
38980
|
+
return (jsx(Fragment, { children: col.visible !== false && (groupSetting?.visibleGroupColumn || !groupSetting?.groupColumns?.includes(col.field)) && (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: true }, 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: {
|
|
38981
38981
|
top: `${indexParent * 42}px`,
|
|
38982
38982
|
left: col.fixedType === 'left' ? objHeaderWidthFixLeft[`${indexParent}-${indexCol ?? 0}`] : undefined,
|
|
38983
38983
|
right: col.fixedType === 'right' ? objHeaderWidthFixRight[`${indexParent}-${indexCol ?? 0}`] : undefined
|
|
@@ -39685,7 +39685,7 @@ const SettingColumn = (props) => {
|
|
|
39685
39685
|
// const [indexFocus, setIndexFocus] = useState<number>()
|
|
39686
39686
|
useEffect(() => {
|
|
39687
39687
|
if (openSidebar) {
|
|
39688
|
-
setDataSource([...column.map(x => ({ ...x }))]);
|
|
39688
|
+
setDataSource([...column.map((x) => ({ ...x }))]);
|
|
39689
39689
|
}
|
|
39690
39690
|
}, [openSidebar]);
|
|
39691
39691
|
const handleCancel = () => {
|
|
@@ -39705,9 +39705,9 @@ const SettingColumn = (props) => {
|
|
|
39705
39705
|
const handleWindowResize = () => {
|
|
39706
39706
|
setWindowSize(getWindowSize());
|
|
39707
39707
|
};
|
|
39708
|
-
window.addEventListener(
|
|
39708
|
+
window.addEventListener('resize', handleWindowResize);
|
|
39709
39709
|
return () => {
|
|
39710
|
-
window.removeEventListener(
|
|
39710
|
+
window.removeEventListener('resize', handleWindowResize);
|
|
39711
39711
|
};
|
|
39712
39712
|
}, []);
|
|
39713
39713
|
const handleResetColumns = () => {
|
|
@@ -39717,7 +39717,7 @@ const SettingColumn = (props) => {
|
|
|
39717
39717
|
handleSidebar();
|
|
39718
39718
|
setDataSource([]);
|
|
39719
39719
|
};
|
|
39720
|
-
const
|
|
39720
|
+
const VisibleTemplate = ({ index, item }) => {
|
|
39721
39721
|
return (jsx(Input$1, { defaultChecked: item.visible ?? true, disabled: item.field === 'command' || item.field === '#' || item.field === 'checkbox' || item.visibleLocked, type: "checkbox", style: { height: 18 }, className: " cursor-pointer", onChange: (e) => {
|
|
39722
39722
|
if (dataSource) {
|
|
39723
39723
|
dataSource[index].visible = e.target.checked;
|
|
@@ -39725,9 +39725,9 @@ const SettingColumn = (props) => {
|
|
|
39725
39725
|
}
|
|
39726
39726
|
} }));
|
|
39727
39727
|
};
|
|
39728
|
-
const
|
|
39729
|
-
let textValue = t(item.headerDisplay ??
|
|
39730
|
-
return (jsx(Input$1, { defaultValue: textValue, className: classNames$1(
|
|
39728
|
+
const HeaderDisplayTemplate = ({ index, item }) => {
|
|
39729
|
+
let textValue = t(item.headerDisplay ?? item.headerText ?? '');
|
|
39730
|
+
return (jsx(Input$1, { defaultValue: textValue, className: classNames$1(''), onChange: (e) => {
|
|
39731
39731
|
textValue = e.target?.value;
|
|
39732
39732
|
}, onBlur: () => {
|
|
39733
39733
|
if (dataSource) {
|
|
@@ -39736,25 +39736,28 @@ const SettingColumn = (props) => {
|
|
|
39736
39736
|
}
|
|
39737
39737
|
} }));
|
|
39738
39738
|
};
|
|
39739
|
-
const
|
|
39740
|
-
const optionsFix = [
|
|
39741
|
-
|
|
39739
|
+
const FixColumnTemplate = ({ index, item }) => {
|
|
39740
|
+
const optionsFix = [
|
|
39741
|
+
{ label: 'Trái', value: 'left' },
|
|
39742
|
+
{ label: 'Phải', value: 'right' }
|
|
39743
|
+
];
|
|
39744
|
+
return (jsx(SelectTable, { component: gridRef, options: optionsFix, textAlign: 'left', isClearable: true, onChange: (val) => {
|
|
39742
39745
|
if (dataSource) {
|
|
39743
39746
|
dataSource[index].fixedType = val?.value;
|
|
39744
39747
|
setDataSource([...dataSource]);
|
|
39745
39748
|
}
|
|
39746
|
-
}, value: item.fixedType ? optionsFix.find(x => x.value === item.fixedType) : undefined }));
|
|
39749
|
+
}, value: item.fixedType ? optionsFix.find((x) => x.value === item.fixedType) : undefined }));
|
|
39747
39750
|
};
|
|
39748
|
-
const
|
|
39751
|
+
const WidthColumnTemplate = ({ index, item }) => {
|
|
39749
39752
|
const numericFormatProps = {
|
|
39750
|
-
value: !isNullOrUndefined$1(item.width) ? item.width?.toString() :
|
|
39753
|
+
value: !isNullOrUndefined$1(item.width) ? item.width?.toString() : '',
|
|
39751
39754
|
thousandSeparator: checkThousandSeparator(formatSetting?.thousandSeparator, formatSetting?.decimalSeparator),
|
|
39752
39755
|
decimalSeparator: checkDecimalSeparator(formatSetting?.thousandSeparator, formatSetting?.decimalSeparator),
|
|
39753
39756
|
allowNegative: false,
|
|
39754
39757
|
decimalScale: 0
|
|
39755
39758
|
};
|
|
39756
|
-
let floatValue = parseFloat(item.width?.toString() ??
|
|
39757
|
-
return (jsx(NumericFormat, { style: { textAlign: 'right', height: 29, width: '100%' }, ...numericFormatProps, defaultValue: formartNumberic(item.width?.toString() ?? '0', formatSetting?.decimalSeparator ??
|
|
39759
|
+
let floatValue = parseFloat(item.width?.toString() ?? '0');
|
|
39760
|
+
return (jsx(NumericFormat, { style: { textAlign: 'right', height: 29, width: '100%' }, ...numericFormatProps, defaultValue: formartNumberic(item.width?.toString() ?? '0', formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', 0), className: classNames$1('form-control'), onValueChange: (values) => {
|
|
39758
39761
|
floatValue = values?.floatValue;
|
|
39759
39762
|
}, onFocus: (e) => {
|
|
39760
39763
|
e.target.setSelectionRange(0, e.target.innerText.length - 1);
|
|
@@ -39767,9 +39770,9 @@ const SettingColumn = (props) => {
|
|
|
39767
39770
|
}
|
|
39768
39771
|
} }));
|
|
39769
39772
|
};
|
|
39770
|
-
return (jsxs(Sidebar, { open: openSidebar, toggleSidebar: handleCancel, width: 900, children: [jsx(ModalHeader, { typeModal:
|
|
39771
|
-
return jsx(Fragment$1, { children: jsxs("div", { className:
|
|
39772
|
-
}) }) })] }), jsxs("div", { style: { boxShadow:
|
|
39773
|
+
return (jsxs(Sidebar, { open: openSidebar, toggleSidebar: handleCancel, width: 900, children: [jsx(ModalHeader, { typeModal: 'Edit', handleModal: handleCancel, title: 'Column setup' }), jsxs("div", { className: "r-setting-container", children: [jsxs("div", { style: { fontWeight: 700, color: '#000' }, className: "r-setting-row r-setting-header me-75", children: [jsx("span", { className: "r-setting-cell", style: { width: 30 } }), jsx("span", { className: "r-setting-cell", style: { width: 200 }, children: t('Column name') }), jsx("span", { className: "r-setting-cell", style: { flex: 1 }, children: t('Column name display') }), jsx("span", { className: "r-setting-cell", style: { width: 80, textAlign: 'center' }, children: t('Display') }), jsx("span", { className: "r-setting-cell", style: { width: 100 }, children: t('Fix the column') }), jsx("span", { className: "r-setting-cell", style: { width: 110 }, children: t('Column width(px)') })] }), jsx("div", { className: "r-setting-content", style: { height: windowSize.innerHeight - 140 }, children: jsx(dist.exports.ReactSortable, { tag: "div", list: dataSource, handle: ".drag-icon", setList: (newState) => setDataSource(newState), children: dataSource.map((item, index) => {
|
|
39774
|
+
return (jsx(Fragment$1, { children: jsxs("div", { className: "r-setting-row", children: [jsx("div", { className: "r-setting-cell", style: { width: 30 }, children: jsx(SvgDragDrop, { fontSize: 12, className: "drag-icon cursor-move" }) }), jsx("div", { className: "r-setting-cell", style: { width: 200 }, children: t(item.headerText ?? '') }), jsx("div", { className: "r-setting-cell", style: { flex: 1 }, children: jsx(HeaderDisplayTemplate, { item: item, index: index }) }), jsx("div", { className: "r-setting-cell", style: { width: 80, textAlign: 'center' }, children: jsx(VisibleTemplate, { item: item, index: index }) }), jsx("div", { className: "r-setting-cell", style: { width: 100 }, children: jsx(FixColumnTemplate, { item: item, index: index }) }), jsx("div", { className: "r-setting-cell", style: { width: 110 }, children: jsx(WidthColumnTemplate, { item: item, index: index }) })] }) }));
|
|
39775
|
+
}) }) })] }), jsxs("div", { style: { boxShadow: '0 4px 24px 0 rgb(34 41 47 / 10%)' }, className: "d-flex justify-content-between align-items-center w-100 py-75 px-1", children: [jsx("div", { children: settingColumns?.updatedDate && (jsxs("p", { children: [jsxs("strong", { children: [t('Update date'), ": "] }), " ", jsx("span", { children: settingColumns.updatedDate ? formatDateTime(settingColumns.updatedDate, 'DD/MM/yyyy HH:mm') : '' }), jsxs("strong", { className: "ms-2", children: [t('Editor'), ": "] }), " ", jsx("span", { children: settingColumns.updatedByName })] })) }), jsxs("div", { children: [resetDefaultColumns && (jsx(Button$1$1, { color: "primary", onClick: () => messageBoxConfirm(t, handleResetColumns, {}, 'Do you want to reset the default settings?'), className: "me-1", children: t('Reset') })), jsx(Button$1$1, { color: "primary", onClick: handleSubmit, className: "me-1", children: t('Confirm') }), jsx(Button$1$1, { color: "secondary", onClick: handleCancel, outline: true, children: t('Close') })] })] })] }));
|
|
39773
39776
|
};
|
|
39774
39777
|
|
|
39775
39778
|
const ToolbarBottom = ({ handleAdd, handleDuplicate, handleInsertBefore, handleInsertAfter, handleDeleteAll, setOpenPopupSetupColumn, focusRow, editDisable, addDisable, buttonSetting, toolbarSetting, headerColumns }) => {
|
|
@@ -68640,7 +68643,7 @@ const UnExpandAllIcon = ({ className, color = '#7F7F7F', size = 24, onClick, sty
|
|
|
68640
68643
|
};
|
|
68641
68644
|
|
|
68642
68645
|
const RenderContentCol = (props) => {
|
|
68643
|
-
const { col, indexCol, indexRow, isSelected, row, zeroVisiable,
|
|
68646
|
+
const { col, indexCol, indexRow, isSelected, row, zeroVisiable, groupSetting, formatSetting, idTable, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, selectedRows, selectEnable, setSelectedRows, fieldKey, isMulti } = props;
|
|
68644
68647
|
const cellId = `content-${idTable}-row${indexRow}col-${indexCol}`;
|
|
68645
68648
|
const checkOverflow = () => {
|
|
68646
68649
|
const element = document.getElementById(cellId);
|
|
@@ -68710,7 +68713,7 @@ const RenderContentCol = (props) => {
|
|
|
68710
68713
|
}, children: displayText }) }), checkOverflow() && (jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: cellId, placement: "top", children: jsx("div", { style: { color: textColor }, children: displayText }) }))] }));
|
|
68711
68714
|
}
|
|
68712
68715
|
};
|
|
68713
|
-
return (jsx(Fragment$1, { children: col.visible !== false && (visibleGroupColumn || !groupColumns?.includes(col.field)) && (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 }), style: {
|
|
68716
|
+
return (jsx(Fragment$1, { children: col.visible !== false && (groupSetting?.visibleGroupColumn || !groupSetting?.groupColumns?.includes(col.field)) && (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 }), style: {
|
|
68714
68717
|
left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
|
|
68715
68718
|
right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined
|
|
68716
68719
|
}, onClick: (e) => {
|
|
@@ -68763,7 +68766,7 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
|
|
|
68763
68766
|
setContentColumns(rs.flat);
|
|
68764
68767
|
return rs;
|
|
68765
68768
|
}, [columns, settingColumns]);
|
|
68766
|
-
const optionGroupColumns = useMemo(() => contentColumns.filter((x) => !groupColumns.includes(x.field)).map((x) => ({ ...x, headerDisplay: t(x.headerDisplay ?? x.headerText) })), [groupColumns, contentColumns]);
|
|
68769
|
+
const optionGroupColumns = useMemo(() => contentColumns.filter((x) => !groupColumns.includes(x.field)).map((x) => ({ ...x, headerDisplay: t(x.columnGroupText ?? x.headerDisplay ?? x.headerText) })), [groupColumns, contentColumns]);
|
|
68767
68770
|
const firstColSpan = useMemo(() => {
|
|
68768
68771
|
let count = 0;
|
|
68769
68772
|
let index = 3;
|
|
@@ -69016,10 +69019,7 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
|
|
|
69016
69019
|
setExpandsAll(undefined);
|
|
69017
69020
|
row.expand = !expand;
|
|
69018
69021
|
} }), t(col.headerDisplay ?? col.headerText), ": ", value, " (", row.children.length, ")"] }) }), contentColumns.map((colSum, indexCol) => {
|
|
69019
|
-
|
|
69020
|
-
console.log(firstColSpan);
|
|
69021
|
-
console.log(!groupSetting?.visibleGroupColumn && groupColumns?.includes(colSum.field));
|
|
69022
|
-
if (indexCol < firstColSpan || colSum.visible === false || (!groupSetting?.visibleGroupColumn && groupColumns?.includes(colSum.field))) {
|
|
69022
|
+
if (indexCol <= firstColSpan || colSum.visible === false || (!groupSetting?.visibleGroupColumn && groupColumns?.includes(colSum.field))) {
|
|
69023
69023
|
return;
|
|
69024
69024
|
}
|
|
69025
69025
|
let sumValue = row[colSum.field];
|
|
@@ -69035,16 +69035,16 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
|
|
|
69035
69035
|
sumValue = '';
|
|
69036
69036
|
}
|
|
69037
69037
|
}
|
|
69038
|
-
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}`));
|
|
69038
|
+
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}`));
|
|
69039
69039
|
})] }), expand && jsx(RenderContent, { datas: row.children, level: level + 1 })] }, `row-${level}-${indexRow}`));
|
|
69040
69040
|
}
|
|
69041
69041
|
else {
|
|
69042
69042
|
const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
|
|
69043
|
-
return (jsx("tr", { "aria-rowindex": indexRow + 1, role: "row", className: "r-row", children: contentColumns.map((column, indexCol) => (jsx(RenderContentCol, { idTable: idTable, col: column, fieldKey: fieldKey, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, isMulti: isMutil ?? false, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, formatSetting: formatSetting, indexCol: indexCol, indexRow: indexRow, isSelected: isSelected, row: row, zeroVisiable: zeroVisiable,
|
|
69043
|
+
return (jsx("tr", { "aria-rowindex": indexRow + 1, role: "row", className: "r-row", children: contentColumns.map((column, indexCol) => (jsx(RenderContentCol, { idTable: idTable, col: column, fieldKey: fieldKey, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, isMulti: isMutil ?? false, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, formatSetting: formatSetting, indexCol: indexCol, indexRow: indexRow, isSelected: isSelected, row: row, zeroVisiable: zeroVisiable, groupSetting: groupSetting }, indexCol))) }, `row-content-${indexRow}`));
|
|
69044
69044
|
}
|
|
69045
69045
|
}) }));
|
|
69046
69046
|
};
|
|
69047
|
-
return (jsxs("div", { className: "r-table-edit r-virtualized-table", children: [jsxs("div", { className: "r-grid", children: [toolbarSetting?.showTopToolbar && jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), headerComponent && headerComponent(), jsxs("div", { ref: gridRef, className: "r-gridtable", style: { height: `${height ? `${height}px` : 'auto'}` }, children: [jsxs("table", { role: "presentation", style: { width: '100%' }, children: [jsx(RenderColGroup, { contentColumns: contentColumns,
|
|
69047
|
+
return (jsxs("div", { className: "r-table-edit r-virtualized-table", children: [jsxs("div", { className: "r-grid", children: [toolbarSetting?.showTopToolbar && jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), headerComponent && headerComponent(), jsxs("div", { ref: gridRef, className: "r-gridtable", style: { height: `${height ? `${height}px` : 'auto'}` }, children: [jsxs("table", { role: "presentation", style: { width: '100%' }, children: [jsx(RenderColGroup, { contentColumns: contentColumns, groupSetting: groupSetting }), jsx("thead", { className: "r-gridheader", role: "rowgroup", children: headerColumns.map((rowColumn, indexParent) => {
|
|
69048
69048
|
return (jsx("tr", { className: "r-row", role: "row", children: rowColumn.map((col, index) => (jsx(HeaderTableCol, { 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: gridRef, filterBy: filterBy, orderBy: orderBy, optionsFilter: querySetting.optionsFilter, allowFiltering: querySetting.allowFiltering, allowSorting: querySetting.allowSorting, formatSetting: formatSetting, changeFilter: (val) => {
|
|
69049
69049
|
setFilterBy([...val]);
|
|
69050
69050
|
if (querySetting?.changeFilter) {
|
|
@@ -69055,7 +69055,7 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
|
|
|
69055
69055
|
if (querySetting?.changeOrder) {
|
|
69056
69056
|
querySetting.changeOrder(val);
|
|
69057
69057
|
}
|
|
69058
|
-
}, columns: contentColumns,
|
|
69058
|
+
}, columns: contentColumns, groupSetting: groupSetting, setContentColumns: setContentColumns, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, totalCount: dataSource?.length ?? 0 }, `header-${indexParent}-${index}`))) }, `header-${-indexParent}`));
|
|
69059
69059
|
}) }), jsx("tbody", { className: "r-gridcontent", role: "rowgroup", children: jsx(RenderContent, { datas: viewData }) }), jsx("tfoot", { className: "r-gridfoot", children: (columnsAggregate?.length ?? 0) > 0 && (jsx("tr", { className: "r-row", children: contentColumns.map((col, indexCol) => {
|
|
69060
69060
|
if (col.visible === false || (!groupSetting?.visibleGroupColumn && groupColumns.includes(col.field))) {
|
|
69061
69061
|
return;
|
|
@@ -69074,7 +69074,7 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
|
|
|
69074
69074
|
left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
|
|
69075
69075
|
right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
|
|
69076
69076
|
textAlign: col.textAlign ? col.textAlign : 'left'
|
|
69077
|
-
}, 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}`));
|
|
69077
|
+
}, 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}`));
|
|
69078
69078
|
}) })) })] }), (viewData.length ?? 0) === 0 && !isLoading && (jsxs("div", { className: "r-no-data", children: [jsx("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: jsxs("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [jsx("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }), jsxs("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [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" }), 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 && (jsx("div", { className: "r-loading-overlay", children: jsxs("div", { className: "r-loading", children: [jsx(Spinner$1, { className: "me-1" }), t('Loading...')] }) }))] })] }), pagingSetting?.allowPaging && (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 })), jsx(SettingColumn, { gridRef: gridRef, handleSidebar: () => {
|
|
69079
69079
|
setOpenPopupSetupColumn(!openPopupSetupColumn);
|
|
69080
69080
|
}, settingColumns: settingColumns, openSidebar: openPopupSetupColumn, column: [...contentColumns], resetDefaultColumns: resetDefaultColumns, setColumn: (newColumns) => {
|