react-table-edit 1.5.36 → 1.5.37
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/index.js +183 -63
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +183 -63
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -68737,7 +68737,7 @@ const UnExpandAllIcon = ({ className, color = '#7F7F7F', size = 24, onClick, sty
|
|
|
68737
68737
|
};
|
|
68738
68738
|
|
|
68739
68739
|
const RenderContentCol = (props) => {
|
|
68740
|
-
const { col, indexCol, indexRow, isSelected, row, zeroVisiable, formatSetting, idTable, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, selectedRows, setSelectedRows, handleCloseContext, handleDoubleClick, fieldKey, isMulti } = props;
|
|
68740
|
+
const { col, indexCol, indexRow, isSelected, row, zeroVisiable, formatSetting, idTable, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, selectedRows, setSelectedRows, handleCloseContext, handleDoubleClick, fieldKey, isMulti, } = props;
|
|
68741
68741
|
const cellId = `content-${idTable}-row${indexRow}col-${indexCol}`;
|
|
68742
68742
|
const checkOverflow = () => {
|
|
68743
68743
|
const element = document.getElementById(cellId);
|
|
@@ -68745,9 +68745,13 @@ const RenderContentCol = (props) => {
|
|
|
68745
68745
|
};
|
|
68746
68746
|
const RenderElement = () => {
|
|
68747
68747
|
if (col.field === '#' || col.type === '#') {
|
|
68748
|
-
return (jsxRuntime.jsx("div", { className: classNames$1('r-rowcell-div cursor-pointer text-center', {
|
|
68749
|
-
|
|
68750
|
-
|
|
68748
|
+
return (jsxRuntime.jsx("div", { className: classNames$1('r-rowcell-div cursor-pointer text-center', {
|
|
68749
|
+
'r-active-cell': isSelected,
|
|
68750
|
+
}), style: {
|
|
68751
|
+
fontWeight: row.sortOrder < 0 || row.sortOrder > 100000 || row.haveBoldType
|
|
68752
|
+
? 600
|
|
68753
|
+
: 400,
|
|
68754
|
+
fontStyle: row.haveItalicType ? 'italic' : 'normal',
|
|
68751
68755
|
}, onDoubleClick: (e) => {
|
|
68752
68756
|
e.preventDefault();
|
|
68753
68757
|
handleCloseContext();
|
|
@@ -68755,7 +68759,17 @@ const RenderContentCol = (props) => {
|
|
|
68755
68759
|
}, children: indexRow + 1 }));
|
|
68756
68760
|
}
|
|
68757
68761
|
else if (col.type === 'checkbox' || col.field === 'checkbox') {
|
|
68758
|
-
return (jsxRuntime.jsx("div", { className: classNames$1('r-rowcell-div cursor-pointer', {
|
|
68762
|
+
return (jsxRuntime.jsx("div", { className: classNames$1('r-rowcell-div cursor-pointer', {
|
|
68763
|
+
'r-active-cell': isSelected,
|
|
68764
|
+
}), style: {
|
|
68765
|
+
display: 'flex',
|
|
68766
|
+
justifyContent: col.textAlign === 'center'
|
|
68767
|
+
? 'center'
|
|
68768
|
+
: col.textAlign === 'right'
|
|
68769
|
+
? 'flex-end'
|
|
68770
|
+
: 'flex-start',
|
|
68771
|
+
alignItems: 'center',
|
|
68772
|
+
}, onClick: (e) => {
|
|
68759
68773
|
const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
|
|
68760
68774
|
if (index > -1) {
|
|
68761
68775
|
if (isMulti) {
|
|
@@ -68781,8 +68795,11 @@ const RenderContentCol = (props) => {
|
|
|
68781
68795
|
let value = row[col.field];
|
|
68782
68796
|
// ✅ Format dữ liệu theo loại cột
|
|
68783
68797
|
if (col.type === 'numeric') {
|
|
68784
|
-
value =
|
|
68785
|
-
|
|
68798
|
+
value =
|
|
68799
|
+
formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) ?? 0;
|
|
68800
|
+
if (!zeroVisiable &&
|
|
68801
|
+
!(row?.sortOrder < 0 || row?.sortOrder > 100000) &&
|
|
68802
|
+
(value === '0' || value === 0)) {
|
|
68786
68803
|
value = '';
|
|
68787
68804
|
}
|
|
68788
68805
|
}
|
|
@@ -68790,42 +68807,63 @@ const RenderContentCol = (props) => {
|
|
|
68790
68807
|
value = value ? formatDateTime(value, formatSetting?.dateFormat) : '';
|
|
68791
68808
|
}
|
|
68792
68809
|
else if (col.type === 'datetime') {
|
|
68793
|
-
value = value
|
|
68810
|
+
value = value
|
|
68811
|
+
? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm')
|
|
68812
|
+
: '';
|
|
68794
68813
|
}
|
|
68795
68814
|
if (col.template) {
|
|
68796
68815
|
value = col.template(row, indexRow) ?? '';
|
|
68797
68816
|
}
|
|
68798
68817
|
const isNegative = col.type === 'numeric' && Number(row[col.field]) < 0;
|
|
68799
|
-
const textColor = isNegative
|
|
68800
|
-
|
|
68801
|
-
|
|
68802
|
-
const
|
|
68803
|
-
|
|
68804
|
-
|
|
68805
|
-
|
|
68818
|
+
const textColor = isNegative
|
|
68819
|
+
? (formatSetting?.colorNegative ?? 'red')
|
|
68820
|
+
: undefined;
|
|
68821
|
+
const prefix = isNegative ? (formatSetting?.prefixNegative ?? '-') : '';
|
|
68822
|
+
const suffix = isNegative ? (formatSetting?.suffixNegative ?? '') : '';
|
|
68823
|
+
const displayText = isNegative
|
|
68824
|
+
? `${prefix}${value}${suffix}`
|
|
68825
|
+
: (value ?? '');
|
|
68826
|
+
return (jsxRuntime.jsxs("div", { className: classNames$1('r-rowcell-div cursor-pointer', {
|
|
68827
|
+
'r-active-cell': isSelected,
|
|
68828
|
+
}), style: {
|
|
68829
|
+
fontWeight: row.sortOrder < 0 || row.sortOrder > 100000 || row.haveBoldType
|
|
68830
|
+
? 600
|
|
68831
|
+
: 400,
|
|
68832
|
+
fontStyle: row.haveItalicType ? 'italic' : 'normal',
|
|
68806
68833
|
}, onDoubleClick: (e) => {
|
|
68807
68834
|
e.preventDefault();
|
|
68808
68835
|
handleCloseContext();
|
|
68809
68836
|
handleDoubleClick?.(row, col);
|
|
68810
68837
|
}, children: [jsxRuntime.jsx("div", { className: "r-cell-text", style: {
|
|
68811
68838
|
display: 'flex',
|
|
68812
|
-
justifyContent: col.textAlign === 'center'
|
|
68813
|
-
|
|
68839
|
+
justifyContent: col.textAlign === 'center'
|
|
68840
|
+
? 'center'
|
|
68841
|
+
: col.textAlign === 'right'
|
|
68842
|
+
? 'flex-end'
|
|
68843
|
+
: 'flex-start',
|
|
68844
|
+
alignItems: 'center',
|
|
68814
68845
|
}, children: jsxRuntime.jsx("div", { id: cellId, style: {
|
|
68815
68846
|
color: textColor,
|
|
68816
68847
|
overflow: 'hidden',
|
|
68817
68848
|
textOverflow: 'ellipsis',
|
|
68818
68849
|
whiteSpace: 'pre',
|
|
68819
|
-
maxWidth: '100%'
|
|
68850
|
+
maxWidth: '100%',
|
|
68820
68851
|
}, children: displayText }) }), checkOverflow() && (jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: cellId, placement: "top", children: jsxRuntime.jsx("div", { style: { color: textColor }, onClick: (e) => {
|
|
68821
68852
|
e.stopPropagation();
|
|
68822
68853
|
e.preventDefault();
|
|
68823
68854
|
}, children: displayText }) }))] }));
|
|
68824
68855
|
}
|
|
68825
68856
|
};
|
|
68826
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: col.visible !== false && col.isGroup !== true && (jsxRuntime.jsx("td", { className: classNames$1(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, {
|
|
68857
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: col.visible !== false && col.isGroup !== true && (jsxRuntime.jsx("td", { className: classNames$1(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, {
|
|
68858
|
+
'fixed-last': (col.fixedType === 'left' &&
|
|
68859
|
+
indexCol === lastObjWidthFixLeft) ||
|
|
68860
|
+
(col.fixedType === 'right' &&
|
|
68861
|
+
indexCol === fisrtObjWidthFixRight),
|
|
68862
|
+
}, { 'r-active': isSelected }), style: {
|
|
68827
68863
|
left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
|
|
68828
|
-
right: col.fixedType === 'right'
|
|
68864
|
+
right: col.fixedType === 'right'
|
|
68865
|
+
? objWidthFixRight[indexCol]
|
|
68866
|
+
: undefined,
|
|
68829
68867
|
}, onClick: (e) => {
|
|
68830
68868
|
if (e.target.nodeName === 'DIV' || e.target.nodeName === 'TD') {
|
|
68831
68869
|
const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
|
|
@@ -68846,12 +68884,11 @@ const RenderContentCol = (props) => {
|
|
|
68846
68884
|
setSelectedRows([row]);
|
|
68847
68885
|
}
|
|
68848
68886
|
}
|
|
68849
|
-
e.stopPropagation();
|
|
68850
68887
|
}
|
|
68851
68888
|
}, children: RenderElement() }, `col-${indexRow}-${indexCol}`)) }));
|
|
68852
68889
|
};
|
|
68853
68890
|
|
|
68854
|
-
const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoading, formatSetting, querySetting, pagingSetting, searchSetting, columnsAggregate, toolbarSetting, selectedItem, setSelectedItem, handleSelect, saveSettingColumn, resetDefaultColumns, settingColumns, headerComponent, groupSetting, zeroVisiable, isMulti, handleDoubleClick, contextMenuItems, handleContextMenuClick }) => {
|
|
68891
|
+
const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoading, formatSetting, querySetting, pagingSetting, searchSetting, columnsAggregate, toolbarSetting, selectedItem, setSelectedItem, handleSelect, saveSettingColumn, resetDefaultColumns, settingColumns, headerComponent, groupSetting, zeroVisiable, isMulti, handleDoubleClick, contextMenuItems, handleContextMenuClick, }) => {
|
|
68855
68892
|
const { t } = reactI18next.useTranslation();
|
|
68856
68893
|
const gridRef = React$5.useRef(null);
|
|
68857
68894
|
const [openPopupSetupColumn, setOpenPopupSetupColumn] = React$5.useState(false);
|
|
@@ -68859,7 +68896,8 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
|
|
|
68859
68896
|
const [orderBy, setOrderBy] = React$5.useState([]);
|
|
68860
68897
|
const [filterBy, setFilterBy] = React$5.useState([]);
|
|
68861
68898
|
const [searchTerm, setSearchTerm] = React$5.useState('');
|
|
68862
|
-
const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ??
|
|
68899
|
+
const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ??
|
|
68900
|
+
'id';
|
|
68863
68901
|
const [contentColumns, setContentColumns] = React$5.useState([]);
|
|
68864
68902
|
const [groupColumns, setGroupColumns] = React$5.useState([]);
|
|
68865
68903
|
const [expandsAll, setExpandsAll] = React$5.useState(true);
|
|
@@ -68878,7 +68916,7 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
|
|
|
68878
68916
|
}
|
|
68879
68917
|
setExpandsAll(true);
|
|
68880
68918
|
}, [groupSetting?.groupColumns]);
|
|
68881
|
-
const { levels: headerColumns, objHeaderWidthFixLeft, objHeaderWidthFixRight, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight } = React$5.useMemo(() => {
|
|
68919
|
+
const { levels: headerColumns, objHeaderWidthFixLeft, objHeaderWidthFixRight, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight, } = React$5.useMemo(() => {
|
|
68882
68920
|
const rs = calculateTableStructure(columns, settingColumns?.value, groupSetting?.groupColumns);
|
|
68883
68921
|
setContentColumns(rs.flat);
|
|
68884
68922
|
return rs;
|
|
@@ -68907,7 +68945,10 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
|
|
|
68907
68945
|
if (searchTerm) {
|
|
68908
68946
|
datas = datas.filter((row) => {
|
|
68909
68947
|
return searchSetting?.keyField?.some((key) => {
|
|
68910
|
-
return row[key]
|
|
68948
|
+
return row[key]
|
|
68949
|
+
?.toString()
|
|
68950
|
+
.toLowerCase()
|
|
68951
|
+
.includes(searchTerm.trim().toLowerCase());
|
|
68911
68952
|
});
|
|
68912
68953
|
});
|
|
68913
68954
|
}
|
|
@@ -68916,7 +68957,10 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
|
|
|
68916
68957
|
return filterBy.every((filter) => {
|
|
68917
68958
|
const { key, value, ope } = filter;
|
|
68918
68959
|
const rowValue = row[key];
|
|
68919
|
-
if (rowValue === undefined ||
|
|
68960
|
+
if (rowValue === undefined ||
|
|
68961
|
+
rowValue === null ||
|
|
68962
|
+
value === undefined ||
|
|
68963
|
+
value === null) {
|
|
68920
68964
|
return false;
|
|
68921
68965
|
}
|
|
68922
68966
|
const valStr = String(rowValue).toLowerCase();
|
|
@@ -68979,10 +69023,19 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
|
|
|
68979
69023
|
}
|
|
68980
69024
|
};
|
|
68981
69025
|
const searchTemplate = () => {
|
|
68982
|
-
return (jsxRuntime.jsx("div", { className: "me-50 r-search", children: jsxRuntime.jsx(ReactInput, { style: { width: '230px' }, value: searchSetting?.searchTerm !== undefined
|
|
69026
|
+
return (jsxRuntime.jsx("div", { className: "me-50 r-search", children: jsxRuntime.jsx(ReactInput, { style: { width: '230px' }, value: searchSetting?.searchTerm !== undefined
|
|
69027
|
+
? searchSetting?.searchTerm
|
|
69028
|
+
: searchTerm, setSearchTerm: searchSetting?.setSearchTerm
|
|
69029
|
+
? searchSetting?.setSearchTerm
|
|
69030
|
+
: setSearchTerm, placeholder: t('Search'), onKeyPress: handleKeyPress }) }));
|
|
68983
69031
|
};
|
|
68984
69032
|
const groupbtnTemplate = () => {
|
|
68985
|
-
return (jsxRuntime.jsxs(UncontrolledDropdown, { children: [jsxRuntime.jsx(DropdownToggle$1, { tag: "div", id: "group-dropdown-toggle", style: { position: 'relative' }, onClick: (e) => e.preventDefault(), children: jsxRuntime.jsx(GroupIcon, { color: "#7F7F7F", size: 24 }) }), jsxRuntime.jsxs(DropdownMenu$1, { className: "formula-dropdown icon-dropdown p-1", children: [jsxRuntime.jsx("div", { className: "mb-1", style: { fontSize: 16, fontWeight: 500 }, children: "Nh\u00F3m d\u1EEF li\u1EC7u theo c\u1ED9t" }), jsxRuntime.jsxs("div", { className: 'form-group', children: [jsxRuntime.jsx(Label$1, { id: `label-group-1`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 1" }), jsxRuntime.jsx("div", { className: "form-input", children: jsxRuntime.jsx(SelectTable, { options: contentColumns, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[0]
|
|
69033
|
+
return (jsxRuntime.jsxs(UncontrolledDropdown, { children: [jsxRuntime.jsx(DropdownToggle$1, { tag: "div", id: "group-dropdown-toggle", style: { position: 'relative' }, onClick: (e) => e.preventDefault(), children: jsxRuntime.jsx(GroupIcon, { color: "#7F7F7F", size: 24 }) }), jsxRuntime.jsxs(DropdownMenu$1, { className: "formula-dropdown icon-dropdown p-1", children: [jsxRuntime.jsx("div", { className: "mb-1", style: { fontSize: 16, fontWeight: 500 }, children: "Nh\u00F3m d\u1EEF li\u1EC7u theo c\u1ED9t" }), jsxRuntime.jsxs("div", { className: 'form-group', children: [jsxRuntime.jsx(Label$1, { id: `label-group-1`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 1" }), jsxRuntime.jsx("div", { className: "form-input", children: jsxRuntime.jsx(SelectTable, { options: contentColumns, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[0]
|
|
69034
|
+
? {
|
|
69035
|
+
headerText: t(contentColumns.find((x) => x.field === groupColumns[0])?.headerText ??
|
|
69036
|
+
contentColumns.find((x) => x.field === groupColumns[0])?.headerText),
|
|
69037
|
+
}
|
|
69038
|
+
: undefined, onChange: (val) => {
|
|
68986
69039
|
if (val) {
|
|
68987
69040
|
groupColumns[0] = val.field;
|
|
68988
69041
|
}
|
|
@@ -68990,7 +69043,12 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
|
|
|
68990
69043
|
groupColumns.pop();
|
|
68991
69044
|
}
|
|
68992
69045
|
setGroupColumns([...groupColumns]);
|
|
68993
|
-
}, isClearable: groupColumns?.length === 1 }) })] }), jsxRuntime.jsxs("div", { className: 'form-group', children: [jsxRuntime.jsx(Label$1, { id: `label-group-2`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 2" }), jsxRuntime.jsx("div", { className: "form-input", children: jsxRuntime.jsx(SelectTable, { options: contentColumns, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[1]
|
|
69046
|
+
}, isClearable: groupColumns?.length === 1 }) })] }), jsxRuntime.jsxs("div", { className: 'form-group', children: [jsxRuntime.jsx(Label$1, { id: `label-group-2`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 2" }), jsxRuntime.jsx("div", { className: "form-input", children: jsxRuntime.jsx(SelectTable, { options: contentColumns, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[1]
|
|
69047
|
+
? {
|
|
69048
|
+
headerText: t(contentColumns.find((x) => x.field === groupColumns[1])?.headerText ??
|
|
69049
|
+
contentColumns.find((x) => x.field === groupColumns[1])?.headerText),
|
|
69050
|
+
}
|
|
69051
|
+
: undefined, onChange: (val) => {
|
|
68994
69052
|
if (val) {
|
|
68995
69053
|
groupColumns[1] = val.field;
|
|
68996
69054
|
}
|
|
@@ -68998,7 +69056,12 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
|
|
|
68998
69056
|
groupColumns.pop();
|
|
68999
69057
|
}
|
|
69000
69058
|
setGroupColumns([...groupColumns]);
|
|
69001
|
-
}, isClearable: groupColumns?.length === 2 }) })] }), jsxRuntime.jsxs("div", { className: 'form-group', children: [jsxRuntime.jsx(Label$1, { id: `label-group-3`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 3" }), jsxRuntime.jsx("div", { className: "form-input", children: jsxRuntime.jsx(SelectTable, { options: contentColumns, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[2]
|
|
69059
|
+
}, isClearable: groupColumns?.length === 2 }) })] }), jsxRuntime.jsxs("div", { className: 'form-group', children: [jsxRuntime.jsx(Label$1, { id: `label-group-3`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 3" }), jsxRuntime.jsx("div", { className: "form-input", children: jsxRuntime.jsx(SelectTable, { options: contentColumns, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[2]
|
|
69060
|
+
? {
|
|
69061
|
+
headerText: t(contentColumns.find((x) => x.field === groupColumns[2])?.headerText ??
|
|
69062
|
+
contentColumns.find((x) => x.field === groupColumns[2])?.headerText),
|
|
69063
|
+
}
|
|
69064
|
+
: undefined, onChange: (val) => {
|
|
69002
69065
|
if (groupSetting) {
|
|
69003
69066
|
if (val) {
|
|
69004
69067
|
groupColumns[2] = val.field;
|
|
@@ -69009,7 +69072,9 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
|
|
|
69009
69072
|
setGroupColumns([...groupColumns]);
|
|
69010
69073
|
}
|
|
69011
69074
|
}, isClearable: groupColumns?.length === 3 }) })] }), jsxRuntime.jsxs("div", { className: "border-top d-flex justify-content-end mt-1", children: [jsxRuntime.jsx(Button$1$1, { color: "primary", className: "mt-1 me-50 rounded", size: "sm", onClick: () => {
|
|
69012
|
-
groupSetting?.onGroup({
|
|
69075
|
+
groupSetting?.onGroup({
|
|
69076
|
+
columnGrouped: groupColumns.filter((x) => x),
|
|
69077
|
+
});
|
|
69013
69078
|
document.getElementById('group-dropdown-toggle')?.click();
|
|
69014
69079
|
}, children: `${t('Apply')}` }), jsxRuntime.jsx(Button$1$1, { color: "secondary", outline: true, className: "mt-1 rounded", size: "sm", onClick: () => {
|
|
69015
69080
|
groupSetting?.onGroup({ columnGrouped: [] });
|
|
@@ -69017,14 +69082,16 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
|
|
|
69017
69082
|
}, children: `${t('Delete')}` })] })] })] }));
|
|
69018
69083
|
};
|
|
69019
69084
|
const chooseColumnsTemplate = () => {
|
|
69020
|
-
return jsxRuntime.jsx(SvgSettings, { className: "r-toolbar-icon", fontSize: 20, color: "#7F7F7F", onClick: () => setOpenPopupSetupColumn(true) });
|
|
69085
|
+
return (jsxRuntime.jsx(SvgSettings, { className: "r-toolbar-icon", fontSize: 20, color: "#7F7F7F", onClick: () => setOpenPopupSetupColumn(true) }));
|
|
69021
69086
|
};
|
|
69022
69087
|
const expandTemplate = () => {
|
|
69023
69088
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!expandsAll && (jsxRuntime.jsx(ExpandAllIcon, { onClick: () => {
|
|
69024
69089
|
setExpandsAll(true);
|
|
69025
|
-
}, color: "#7F7F7F", size: 24 })), expandsAll && jsxRuntime.jsx(UnExpandAllIcon, { onClick: () => setExpandsAll(false), color: "#7F7F7F", size: 24 })] }));
|
|
69090
|
+
}, color: "#7F7F7F", size: 24 })), expandsAll && (jsxRuntime.jsx(UnExpandAllIcon, { onClick: () => setExpandsAll(false), color: "#7F7F7F", size: 24 }))] }));
|
|
69026
69091
|
};
|
|
69027
|
-
const defaultToolbarOption = searchSetting?.searchEnable
|
|
69092
|
+
const defaultToolbarOption = searchSetting?.searchEnable
|
|
69093
|
+
? [{ template: searchTemplate, align: 'left' }]
|
|
69094
|
+
: [];
|
|
69028
69095
|
if (groupSetting) {
|
|
69029
69096
|
defaultToolbarOption.push({ template: groupbtnTemplate, align: 'left' });
|
|
69030
69097
|
}
|
|
@@ -69033,7 +69100,10 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
|
|
|
69033
69100
|
}
|
|
69034
69101
|
let toolbarTopOption = [];
|
|
69035
69102
|
if (toolbarSetting?.toolbarOptions) {
|
|
69036
|
-
toolbarTopOption = [
|
|
69103
|
+
toolbarTopOption = [
|
|
69104
|
+
...defaultToolbarOption,
|
|
69105
|
+
...toolbarSetting?.toolbarOptions,
|
|
69106
|
+
];
|
|
69037
69107
|
}
|
|
69038
69108
|
else {
|
|
69039
69109
|
toolbarTopOption = [...defaultToolbarOption];
|
|
@@ -69062,11 +69132,11 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
|
|
|
69062
69132
|
}
|
|
69063
69133
|
};
|
|
69064
69134
|
React$5.useEffect(() => {
|
|
69065
|
-
console.log(selectedRows);
|
|
69066
|
-
console.log(isMulti);
|
|
69067
69135
|
if (setSelectedItem) {
|
|
69068
69136
|
if (isMulti) {
|
|
69069
|
-
if (dataSource &&
|
|
69137
|
+
if (dataSource &&
|
|
69138
|
+
selectedRows &&
|
|
69139
|
+
selectedRows?.length !== selectedItem?.length) {
|
|
69070
69140
|
setSelectedItem([...selectedRows]);
|
|
69071
69141
|
if (handleSelect) {
|
|
69072
69142
|
handleSelect([...selectedRows]);
|
|
@@ -69075,7 +69145,8 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
|
|
|
69075
69145
|
}
|
|
69076
69146
|
else {
|
|
69077
69147
|
if (dataSource && selectedRows?.length > 0) {
|
|
69078
|
-
if (!selectedItem ||
|
|
69148
|
+
if (!selectedItem ||
|
|
69149
|
+
selectedItem[fieldKey] !== selectedRows[0][fieldKey]) {
|
|
69079
69150
|
setSelectedItem({ ...selectedRows[0] });
|
|
69080
69151
|
if (handleSelect) {
|
|
69081
69152
|
handleSelect({ ...selectedRows[0] });
|
|
@@ -69094,7 +69165,8 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
|
|
|
69094
69165
|
React$5.useEffect(() => {
|
|
69095
69166
|
if (!isMulti) {
|
|
69096
69167
|
if (dataSource && selectedItem && selectedItem[fieldKey]) {
|
|
69097
|
-
if (selectedRows?.length === 0 ||
|
|
69168
|
+
if (selectedRows?.length === 0 ||
|
|
69169
|
+
selectedItem[fieldKey] !== selectedRows[0][fieldKey]) {
|
|
69098
69170
|
setSelectedRows([selectedItem]);
|
|
69099
69171
|
}
|
|
69100
69172
|
}
|
|
@@ -69103,7 +69175,9 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
|
|
|
69103
69175
|
}
|
|
69104
69176
|
}
|
|
69105
69177
|
else {
|
|
69106
|
-
if (dataSource &&
|
|
69178
|
+
if (dataSource &&
|
|
69179
|
+
selectedItem &&
|
|
69180
|
+
selectedRows?.length !== selectedItem.length) {
|
|
69107
69181
|
setSelectedRows(selectedItem ? [...selectedItem] : []);
|
|
69108
69182
|
}
|
|
69109
69183
|
}
|
|
@@ -69121,44 +69195,68 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
|
|
|
69121
69195
|
const col = contentColumns.find((x) => x.field === row.field);
|
|
69122
69196
|
let value = row[col.field];
|
|
69123
69197
|
if (col.type === 'numeric') {
|
|
69124
|
-
value =
|
|
69198
|
+
value =
|
|
69199
|
+
formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) ?? 0;
|
|
69125
69200
|
}
|
|
69126
69201
|
else if (col.type === 'date') {
|
|
69127
|
-
value = value
|
|
69202
|
+
value = value
|
|
69203
|
+
? formatDateTime(value, formatSetting?.dateFormat)
|
|
69204
|
+
: '';
|
|
69128
69205
|
}
|
|
69129
69206
|
else if (col.type === 'datetime') {
|
|
69130
|
-
value = value
|
|
69207
|
+
value = value
|
|
69208
|
+
? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm')
|
|
69209
|
+
: '';
|
|
69131
69210
|
}
|
|
69132
69211
|
if (col.template) {
|
|
69133
69212
|
value = col.template(row, indexRow) ?? '';
|
|
69134
69213
|
}
|
|
69135
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("tr", { "aria-rowindex": indexRow + 1, role: "row", className: "r-row", children: [jsxRuntime.jsx("td", { className: "r-rowcell r-cell-group", colSpan: 3, children: jsxRuntime.jsxs("div", { className: "r-rowcell-div", children: [jsxRuntime.jsx(SvgChevronRight, { style: {
|
|
69214
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("tr", { "aria-rowindex": indexRow + 1, role: "row", className: "r-row", children: [jsxRuntime.jsx("td", { className: "r-rowcell r-cell-group", colSpan: 3, children: jsxRuntime.jsxs("div", { className: "r-rowcell-div", children: [jsxRuntime.jsx(SvgChevronRight, { style: {
|
|
69215
|
+
marginLeft: level * 20,
|
|
69216
|
+
transform: expand ? 'rotate(90deg)' : 'rotate(0deg)',
|
|
69217
|
+
}, fontSize: 15, onClick: () => {
|
|
69136
69218
|
setExpand(!expand);
|
|
69137
69219
|
setExpandsAll(undefined);
|
|
69138
69220
|
row.expand = !expand;
|
|
69139
69221
|
} }), t(col.headerDisplay ?? col.headerText), ": ", value, " (", row.children.length, ")"] }) }), contentColumns.map((colSum, indexCol) => {
|
|
69140
|
-
if (indexCol <= firstColSpan ||
|
|
69222
|
+
if (indexCol <= firstColSpan ||
|
|
69223
|
+
colSum.visible === false ||
|
|
69224
|
+
colSum.isGroup === true) {
|
|
69141
69225
|
return;
|
|
69142
69226
|
}
|
|
69143
69227
|
let sumValue = row[colSum.field];
|
|
69144
|
-
const haveSum = row[colSum.field] !== undefined &&
|
|
69145
|
-
|
|
69228
|
+
const haveSum = row[colSum.field] !== undefined &&
|
|
69229
|
+
row[colSum.field] !== null;
|
|
69230
|
+
if (!haveSum &&
|
|
69231
|
+
colSum.haveSum === true &&
|
|
69232
|
+
colSum.type === 'numeric') {
|
|
69146
69233
|
sumValue = row.children.reduce(function (accumulator, currentValue) {
|
|
69147
|
-
return Number(accumulator ?? 0) +
|
|
69234
|
+
return (Number(accumulator ?? 0) +
|
|
69235
|
+
Number(currentValue[colSum.field] ?? 0));
|
|
69148
69236
|
}, 0);
|
|
69149
69237
|
}
|
|
69150
69238
|
if (colSum.type === 'numeric') {
|
|
69151
69239
|
sumValue = formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', colSum.numericSettings?.fraction, true, false);
|
|
69152
|
-
if (!zeroVisiable &&
|
|
69240
|
+
if (!zeroVisiable &&
|
|
69241
|
+
(sumValue === '0' || sumValue === 0)) {
|
|
69153
69242
|
sumValue = '';
|
|
69154
69243
|
}
|
|
69155
69244
|
}
|
|
69156
|
-
return (jsxRuntime.jsx("td", { className: "r-rowcell r-cell-sum-group", children: jsxRuntime.jsx("div", { className: "r-rowcell-div", style: {
|
|
69157
|
-
|
|
69245
|
+
return (jsxRuntime.jsx("td", { className: "r-rowcell r-cell-sum-group", children: jsxRuntime.jsx("div", { className: "r-rowcell-div", style: {
|
|
69246
|
+
justifyContent: colSum.textAlign
|
|
69247
|
+
? colSum.textAlign
|
|
69248
|
+
: 'left',
|
|
69249
|
+
}, children: (haveSum || colSum.haveSum === true) &&
|
|
69250
|
+
Number(row[colSum.field] ?? '0') < 0 ? (jsxRuntime.jsxs("div", { style: {
|
|
69251
|
+
color: formatSetting?.colorNegative ?? 'red',
|
|
69252
|
+
}, children: [' ', `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] })) : (sumValue) }) }, `group-sum-cell-${level}-${indexRow}-${indexCol}`));
|
|
69253
|
+
})] }), expand && (jsxRuntime.jsx(RenderContent, { datas: row.children, level: level + 1 }))] }, `row-${level}-${indexRow}`));
|
|
69158
69254
|
}
|
|
69159
69255
|
else {
|
|
69160
69256
|
const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
|
|
69161
|
-
return (jsxRuntime.jsx("tr", { id: `row-content-${indexRow}`, "aria-rowindex": indexRow + 1, role: "row", className: classNames$1('r-row', {
|
|
69257
|
+
return (jsxRuntime.jsx("tr", { id: `row-content-${indexRow}`, "aria-rowindex": indexRow + 1, role: "row", className: classNames$1('r-row', {
|
|
69258
|
+
'r-last-row': level === 0 && indexRow === viewData.length - 1,
|
|
69259
|
+
}), onContextMenu: (e) => {
|
|
69162
69260
|
e.preventDefault();
|
|
69163
69261
|
handleContextMenu(e, row);
|
|
69164
69262
|
}, children: contentColumns.map((column, indexCol) => (jsxRuntime.jsx(RenderContentCol, { idTable: idTable, col: column, fieldKey: fieldKey, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, isMulti: isMulti, selectedRows: selectedRows, setSelectedRows: setSelectedRows, formatSetting: formatSetting, indexCol: indexCol, indexRow: indexRow, isSelected: isSelected, row: row, zeroVisiable: zeroVisiable, handleCloseContext: handleCloseContext, handleDoubleClick: handleDoubleClick }, indexCol))) }, `row-content-${indexRow}`));
|
|
@@ -69173,7 +69271,7 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
|
|
|
69173
69271
|
x: e.clientX,
|
|
69174
69272
|
y: e.clientY,
|
|
69175
69273
|
row,
|
|
69176
|
-
show: true
|
|
69274
|
+
show: true,
|
|
69177
69275
|
});
|
|
69178
69276
|
}, 100);
|
|
69179
69277
|
};
|
|
@@ -69188,7 +69286,10 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
|
|
|
69188
69286
|
virtualDivRef.current.style.height = '0px';
|
|
69189
69287
|
}
|
|
69190
69288
|
}, [context]);
|
|
69191
|
-
return (jsxRuntime.jsxs("div", { className: "r-table-edit r-virtualized-table", children: [jsxRuntime.jsxs("div", { className: "r-grid", children: [toolbarSetting?.showTopToolbar && jsxRuntime.jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), headerComponent && headerComponent(), jsxRuntime.jsxs("div", { ref: gridRef, className: "r-gridtable", style: {
|
|
69289
|
+
return (jsxRuntime.jsxs("div", { className: "r-table-edit r-virtualized-table", children: [jsxRuntime.jsxs("div", { className: "r-grid", children: [toolbarSetting?.showTopToolbar && (jsxRuntime.jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption })), headerComponent && headerComponent(), jsxRuntime.jsxs("div", { ref: gridRef, className: "r-gridtable", style: {
|
|
69290
|
+
height: `${height ? `${height}px` : 'auto'}`,
|
|
69291
|
+
position: 'relative',
|
|
69292
|
+
}, children: [jsxRuntime.jsxs("table", { role: "presentation", style: { width: '100%' }, children: [jsxRuntime.jsx(RenderColGroup, { contentColumns: contentColumns }), jsxRuntime.jsx("thead", { className: "r-gridheader", role: "rowgroup", children: headerColumns.map((rowColumn, indexParent) => {
|
|
69192
69293
|
return (jsxRuntime.jsx("tr", { className: "r-row", role: "row", children: rowColumn.map((col, index) => (jsxRuntime.jsx(HeaderTableCol, { col: col, idTable: idTable ?? '', dataSource: dataSource, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, selectEnable: true, selectedRows: selectedRows, setSelectedRows: setSelectedRows, container: gridRef, filterBy: filterBy, orderBy: orderBy, optionsFilter: querySetting?.optionsFilter, allowFiltering: querySetting?.allowFiltering, allowSorting: querySetting?.allowSorting, formatSetting: formatSetting, changeFilter: (val) => {
|
|
69193
69294
|
setFilterBy([...val]);
|
|
69194
69295
|
if (querySetting?.changeFilter) {
|
|
@@ -69206,20 +69307,32 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
|
|
|
69206
69307
|
}
|
|
69207
69308
|
const item = columnsAggregate?.find((x) => x.field === col.field);
|
|
69208
69309
|
let sumValue = item?.value;
|
|
69209
|
-
if (!item &&
|
|
69310
|
+
if (!item &&
|
|
69311
|
+
col.haveSum === true &&
|
|
69312
|
+
col.type === 'numeric') {
|
|
69210
69313
|
sumValue = viewData.reduce(function (accumulator, currentValue) {
|
|
69211
|
-
return Number(accumulator ?? 0) +
|
|
69314
|
+
return (Number(accumulator ?? 0) +
|
|
69315
|
+
Number(currentValue[col.field] ?? 0));
|
|
69212
69316
|
}, 0);
|
|
69213
69317
|
}
|
|
69214
69318
|
if (col.type === 'numeric') {
|
|
69215
69319
|
sumValue = formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false);
|
|
69216
69320
|
}
|
|
69217
69321
|
return (jsxRuntime.jsx("td", { className: classNames$1(`p-0 px-50 r-footer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }), style: {
|
|
69218
|
-
left: col.fixedType === 'left'
|
|
69219
|
-
|
|
69220
|
-
|
|
69221
|
-
|
|
69222
|
-
|
|
69322
|
+
left: col.fixedType === 'left'
|
|
69323
|
+
? objWidthFixLeft[indexCol]
|
|
69324
|
+
: undefined,
|
|
69325
|
+
right: col.fixedType === 'right'
|
|
69326
|
+
? objWidthFixRight[indexCol]
|
|
69327
|
+
: undefined,
|
|
69328
|
+
textAlign: col.textAlign ? col.textAlign : 'left',
|
|
69329
|
+
}, children: jsxRuntime.jsx("div", { className: "r-footer-div", children: (item || col.haveSum === true) &&
|
|
69330
|
+
Number(item?.value ?? '0') < 0 ? (jsxRuntime.jsxs("div", { style: {
|
|
69331
|
+
color: formatSetting?.colorNegative ?? 'red',
|
|
69332
|
+
}, children: [' ', `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] })) : (sumValue) }) }, `summarycell-${indexCol}`));
|
|
69333
|
+
}) })) })] }), jsxRuntime.jsx("div", { ref: virtualDivRef }), context &&
|
|
69334
|
+
(contextMenuItems?.length ?? 0) > 0 &&
|
|
69335
|
+
handleContextMenuClick && (jsxRuntime.jsx(Popover$1, { className: "r-context-popover", placement: "right-start", isOpen: context.show, target: virtualDivRef.current, toggle: handleCloseContext, fade: false, children: jsxRuntime.jsx(PopoverBody$1, { children: contextMenuItems?.map((item, index) => {
|
|
69223
69336
|
return (jsxRuntime.jsxs("div", { className: "r-context-item", onClick: () => {
|
|
69224
69337
|
handleCloseContext();
|
|
69225
69338
|
handleContextMenuClick?.(item, context.row);
|
|
@@ -69228,7 +69341,14 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
|
|
|
69228
69341
|
setOpenPopupSetupColumn(!openPopupSetupColumn);
|
|
69229
69342
|
}, settingColumns: settingColumns, openSidebar: openPopupSetupColumn, column: [...contentColumns], resetDefaultColumns: resetDefaultColumns, setColumn: (newColumns) => {
|
|
69230
69343
|
if (saveSettingColumn) {
|
|
69231
|
-
saveSettingColumn(newColumns.map((x, index) => ({
|
|
69344
|
+
saveSettingColumn(newColumns.map((x, index) => ({
|
|
69345
|
+
field: x.field,
|
|
69346
|
+
headerText: x.headerDisplay,
|
|
69347
|
+
visible: x.visible,
|
|
69348
|
+
fixedType: x.fixedType,
|
|
69349
|
+
width: x.width,
|
|
69350
|
+
sortOrder: index + 1,
|
|
69351
|
+
})));
|
|
69232
69352
|
}
|
|
69233
69353
|
} })] }));
|
|
69234
69354
|
};
|