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
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { IColumnTable } from '../type';
|
|
2
2
|
type IFProps = {
|
|
3
3
|
contentColumns: IColumnTable[];
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
groupSetting?: {
|
|
5
|
+
visibleGroupColumn?: boolean;
|
|
6
|
+
groupColumns: string[];
|
|
7
|
+
};
|
|
6
8
|
};
|
|
7
|
-
export declare const RenderColGroup: ({ contentColumns,
|
|
9
|
+
export declare const RenderColGroup: ({ contentColumns, groupSetting }: IFProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
10
|
export {};
|
|
@@ -24,8 +24,10 @@ type IFDataProps = {
|
|
|
24
24
|
container: any;
|
|
25
25
|
optionsFilter: any;
|
|
26
26
|
formatSetting?: IFTableEditFormat;
|
|
27
|
-
|
|
28
|
-
|
|
27
|
+
groupSetting?: {
|
|
28
|
+
visibleGroupColumn?: boolean;
|
|
29
|
+
groupColumns: string[];
|
|
30
|
+
};
|
|
29
31
|
setColumns?: (columns: IHeaderColumnTable[]) => void;
|
|
30
32
|
changeFilter: (data: IFFilterTable[]) => void;
|
|
31
33
|
setContentColumns: (col: any[]) => void;
|
|
@@ -16,8 +16,10 @@ type IContentColProps = {
|
|
|
16
16
|
isMulti?: boolean;
|
|
17
17
|
fieldKey: string;
|
|
18
18
|
zeroVisiable?: boolean;
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
groupSetting?: {
|
|
20
|
+
visibleGroupColumn?: boolean;
|
|
21
|
+
groupColumns: string[];
|
|
22
|
+
};
|
|
21
23
|
setSelectedRows: (value: any[]) => void;
|
|
22
24
|
};
|
|
23
25
|
export declare const RenderContentCol: (props: IContentColProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -151,6 +151,8 @@ export type IColumnTable = {
|
|
|
151
151
|
headerText?: string;
|
|
152
152
|
/** Tiêu đề hiển thị trên giao diện */
|
|
153
153
|
headerDisplay?: string;
|
|
154
|
+
/** Tiêu đề hiển thị trên giao diện nhóm*/
|
|
155
|
+
columnGroupText?: string;
|
|
154
156
|
/** Khóa chính */
|
|
155
157
|
isPrimarykey?: boolean;
|
|
156
158
|
/** Duy nhất trong bảng */
|
package/dist/index.d.ts
CHANGED
|
@@ -155,6 +155,8 @@ type IColumnTable = {
|
|
|
155
155
|
headerText?: string;
|
|
156
156
|
/** Tiêu đề hiển thị trên giao diện */
|
|
157
157
|
headerDisplay?: string;
|
|
158
|
+
/** Tiêu đề hiển thị trên giao diện nhóm*/
|
|
159
|
+
columnGroupText?: string;
|
|
158
160
|
/** Khóa chính */
|
|
159
161
|
isPrimarykey?: boolean;
|
|
160
162
|
/** Duy nhất trong bảng */
|
package/dist/index.js
CHANGED
|
@@ -36806,9 +36806,9 @@ const FooterCol = ({ col, indexCol, dataSource, objWidthFix, formatSetting }) =>
|
|
|
36806
36806
|
}, children: jsxRuntime.jsx("div", { className: "r-footer-div", children: col.haveSum === true && col.type === "numeric" && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: Number(sumValue) >= 0 ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ",", formatSetting?.thousandSeparator ?? ".", col.numericSettings?.fraction, true, false) })) : (jsxRuntime.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}`));
|
|
36807
36807
|
};
|
|
36808
36808
|
|
|
36809
|
-
const RenderColGroup = ({ contentColumns,
|
|
36809
|
+
const RenderColGroup = ({ contentColumns, groupSetting }) => (jsxRuntime.jsx("colgroup", { children: contentColumns.map((col, index) => {
|
|
36810
36810
|
return (col.visible !== false &&
|
|
36811
|
-
(visibleGroupColumn || !groupColumns?.includes(col.field)) && (jsxRuntime.jsx("col", { style: {
|
|
36811
|
+
(groupSetting?.visibleGroupColumn || !groupSetting?.groupColumns?.includes(col.field)) && (jsxRuntime.jsx("col", { style: {
|
|
36812
36812
|
width: typeof col.width === 'number' ? `${col.width}px` : col.width || undefined,
|
|
36813
36813
|
minWidth: typeof col.minWidth === 'number' ? `${col.minWidth}px` : col.minWidth || undefined,
|
|
36814
36814
|
maxWidth: typeof col.maxWidth === 'number' ? `${col.maxWidth}px` : col.maxWidth || undefined
|
|
@@ -38987,7 +38987,7 @@ const DateRangeFilterComponent = ({ fieldFilter, filterBy, handleSave }) => {
|
|
|
38987
38987
|
};
|
|
38988
38988
|
|
|
38989
38989
|
const HeaderTableCol = (props) => {
|
|
38990
|
-
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,
|
|
38990
|
+
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;
|
|
38991
38991
|
const { t } = reactI18next.useTranslation();
|
|
38992
38992
|
const headerRef = React$5.useRef(null);
|
|
38993
38993
|
const order = orderBy.find((item) => item.key === col.field);
|
|
@@ -39006,7 +39006,7 @@ const HeaderTableCol = (props) => {
|
|
|
39006
39006
|
const checkOverflow = () => {
|
|
39007
39007
|
return headerRef.current && headerRef.current.scrollHeight > headerRef.current.clientHeight;
|
|
39008
39008
|
};
|
|
39009
|
-
return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && (visibleGroupColumn || !groupColumns?.includes(col.field)) && (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: true }, children: jsxRuntime.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: {
|
|
39009
|
+
return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && (groupSetting?.visibleGroupColumn || !groupSetting?.groupColumns?.includes(col.field)) && (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: true }, children: jsxRuntime.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: {
|
|
39010
39010
|
top: `${indexParent * 42}px`,
|
|
39011
39011
|
left: col.fixedType === 'left' ? objHeaderWidthFixLeft[`${indexParent}-${indexCol ?? 0}`] : undefined,
|
|
39012
39012
|
right: col.fixedType === 'right' ? objHeaderWidthFixRight[`${indexParent}-${indexCol ?? 0}`] : undefined
|
|
@@ -39714,7 +39714,7 @@ const SettingColumn = (props) => {
|
|
|
39714
39714
|
// const [indexFocus, setIndexFocus] = useState<number>()
|
|
39715
39715
|
React$5.useEffect(() => {
|
|
39716
39716
|
if (openSidebar) {
|
|
39717
|
-
setDataSource([...column.map(x => ({ ...x }))]);
|
|
39717
|
+
setDataSource([...column.map((x) => ({ ...x }))]);
|
|
39718
39718
|
}
|
|
39719
39719
|
}, [openSidebar]);
|
|
39720
39720
|
const handleCancel = () => {
|
|
@@ -39734,9 +39734,9 @@ const SettingColumn = (props) => {
|
|
|
39734
39734
|
const handleWindowResize = () => {
|
|
39735
39735
|
setWindowSize(getWindowSize());
|
|
39736
39736
|
};
|
|
39737
|
-
window.addEventListener(
|
|
39737
|
+
window.addEventListener('resize', handleWindowResize);
|
|
39738
39738
|
return () => {
|
|
39739
|
-
window.removeEventListener(
|
|
39739
|
+
window.removeEventListener('resize', handleWindowResize);
|
|
39740
39740
|
};
|
|
39741
39741
|
}, []);
|
|
39742
39742
|
const handleResetColumns = () => {
|
|
@@ -39746,7 +39746,7 @@ const SettingColumn = (props) => {
|
|
|
39746
39746
|
handleSidebar();
|
|
39747
39747
|
setDataSource([]);
|
|
39748
39748
|
};
|
|
39749
|
-
const
|
|
39749
|
+
const VisibleTemplate = ({ index, item }) => {
|
|
39750
39750
|
return (jsxRuntime.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) => {
|
|
39751
39751
|
if (dataSource) {
|
|
39752
39752
|
dataSource[index].visible = e.target.checked;
|
|
@@ -39754,9 +39754,9 @@ const SettingColumn = (props) => {
|
|
|
39754
39754
|
}
|
|
39755
39755
|
} }));
|
|
39756
39756
|
};
|
|
39757
|
-
const
|
|
39758
|
-
let textValue = t(item.headerDisplay ??
|
|
39759
|
-
return (jsxRuntime.jsx(Input$1, { defaultValue: textValue, className: classNames$1(
|
|
39757
|
+
const HeaderDisplayTemplate = ({ index, item }) => {
|
|
39758
|
+
let textValue = t(item.headerDisplay ?? item.headerText ?? '');
|
|
39759
|
+
return (jsxRuntime.jsx(Input$1, { defaultValue: textValue, className: classNames$1(''), onChange: (e) => {
|
|
39760
39760
|
textValue = e.target?.value;
|
|
39761
39761
|
}, onBlur: () => {
|
|
39762
39762
|
if (dataSource) {
|
|
@@ -39765,25 +39765,28 @@ const SettingColumn = (props) => {
|
|
|
39765
39765
|
}
|
|
39766
39766
|
} }));
|
|
39767
39767
|
};
|
|
39768
|
-
const
|
|
39769
|
-
const optionsFix = [
|
|
39770
|
-
|
|
39768
|
+
const FixColumnTemplate = ({ index, item }) => {
|
|
39769
|
+
const optionsFix = [
|
|
39770
|
+
{ label: 'Trái', value: 'left' },
|
|
39771
|
+
{ label: 'Phải', value: 'right' }
|
|
39772
|
+
];
|
|
39773
|
+
return (jsxRuntime.jsx(SelectTable, { component: gridRef, options: optionsFix, textAlign: 'left', isClearable: true, onChange: (val) => {
|
|
39771
39774
|
if (dataSource) {
|
|
39772
39775
|
dataSource[index].fixedType = val?.value;
|
|
39773
39776
|
setDataSource([...dataSource]);
|
|
39774
39777
|
}
|
|
39775
|
-
}, value: item.fixedType ? optionsFix.find(x => x.value === item.fixedType) : undefined }));
|
|
39778
|
+
}, value: item.fixedType ? optionsFix.find((x) => x.value === item.fixedType) : undefined }));
|
|
39776
39779
|
};
|
|
39777
|
-
const
|
|
39780
|
+
const WidthColumnTemplate = ({ index, item }) => {
|
|
39778
39781
|
const numericFormatProps = {
|
|
39779
|
-
value: !isNullOrUndefined$1(item.width) ? item.width?.toString() :
|
|
39782
|
+
value: !isNullOrUndefined$1(item.width) ? item.width?.toString() : '',
|
|
39780
39783
|
thousandSeparator: checkThousandSeparator(formatSetting?.thousandSeparator, formatSetting?.decimalSeparator),
|
|
39781
39784
|
decimalSeparator: checkDecimalSeparator(formatSetting?.thousandSeparator, formatSetting?.decimalSeparator),
|
|
39782
39785
|
allowNegative: false,
|
|
39783
39786
|
decimalScale: 0
|
|
39784
39787
|
};
|
|
39785
|
-
let floatValue = parseFloat(item.width?.toString() ??
|
|
39786
|
-
return (jsxRuntime.jsx(NumericFormat, { style: { textAlign: 'right', height: 29, width: '100%' }, ...numericFormatProps, defaultValue: formartNumberic(item.width?.toString() ?? '0', formatSetting?.decimalSeparator ??
|
|
39788
|
+
let floatValue = parseFloat(item.width?.toString() ?? '0');
|
|
39789
|
+
return (jsxRuntime.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) => {
|
|
39787
39790
|
floatValue = values?.floatValue;
|
|
39788
39791
|
}, onFocus: (e) => {
|
|
39789
39792
|
e.target.setSelectionRange(0, e.target.innerText.length - 1);
|
|
@@ -39796,9 +39799,9 @@ const SettingColumn = (props) => {
|
|
|
39796
39799
|
}
|
|
39797
39800
|
} }));
|
|
39798
39801
|
};
|
|
39799
|
-
return (jsxRuntime.jsxs(Sidebar, { open: openSidebar, toggleSidebar: handleCancel, width: 900, children: [jsxRuntime.jsx(ModalHeader, { typeModal:
|
|
39800
|
-
return jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className:
|
|
39801
|
-
}) }) })] }), jsxRuntime.jsxs("div", { style: { boxShadow:
|
|
39802
|
+
return (jsxRuntime.jsxs(Sidebar, { open: openSidebar, toggleSidebar: handleCancel, width: 900, children: [jsxRuntime.jsx(ModalHeader, { typeModal: 'Edit', handleModal: handleCancel, title: 'Column setup' }), jsxRuntime.jsxs("div", { className: "r-setting-container", children: [jsxRuntime.jsxs("div", { style: { fontWeight: 700, color: '#000' }, className: "r-setting-row r-setting-header me-75", children: [jsxRuntime.jsx("span", { className: "r-setting-cell", style: { width: 30 } }), jsxRuntime.jsx("span", { className: "r-setting-cell", style: { width: 200 }, children: t('Column name') }), jsxRuntime.jsx("span", { className: "r-setting-cell", style: { flex: 1 }, children: t('Column name display') }), jsxRuntime.jsx("span", { className: "r-setting-cell", style: { width: 80, textAlign: 'center' }, children: t('Display') }), jsxRuntime.jsx("span", { className: "r-setting-cell", style: { width: 100 }, children: t('Fix the column') }), jsxRuntime.jsx("span", { className: "r-setting-cell", style: { width: 110 }, children: t('Column width(px)') })] }), jsxRuntime.jsx("div", { className: "r-setting-content", style: { height: windowSize.innerHeight - 140 }, children: jsxRuntime.jsx(dist.exports.ReactSortable, { tag: "div", list: dataSource, handle: ".drag-icon", setList: (newState) => setDataSource(newState), children: dataSource.map((item, index) => {
|
|
39803
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "r-setting-row", children: [jsxRuntime.jsx("div", { className: "r-setting-cell", style: { width: 30 }, children: jsxRuntime.jsx(SvgDragDrop, { fontSize: 12, className: "drag-icon cursor-move" }) }), jsxRuntime.jsx("div", { className: "r-setting-cell", style: { width: 200 }, children: t(item.headerText ?? '') }), jsxRuntime.jsx("div", { className: "r-setting-cell", style: { flex: 1 }, children: jsxRuntime.jsx(HeaderDisplayTemplate, { item: item, index: index }) }), jsxRuntime.jsx("div", { className: "r-setting-cell", style: { width: 80, textAlign: 'center' }, children: jsxRuntime.jsx(VisibleTemplate, { item: item, index: index }) }), jsxRuntime.jsx("div", { className: "r-setting-cell", style: { width: 100 }, children: jsxRuntime.jsx(FixColumnTemplate, { item: item, index: index }) }), jsxRuntime.jsx("div", { className: "r-setting-cell", style: { width: 110 }, children: jsxRuntime.jsx(WidthColumnTemplate, { item: item, index: index }) })] }) }));
|
|
39804
|
+
}) }) })] }), jsxRuntime.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: [jsxRuntime.jsx("div", { children: settingColumns?.updatedDate && (jsxRuntime.jsxs("p", { children: [jsxRuntime.jsxs("strong", { children: [t('Update date'), ": "] }), " ", jsxRuntime.jsx("span", { children: settingColumns.updatedDate ? formatDateTime(settingColumns.updatedDate, 'DD/MM/yyyy HH:mm') : '' }), jsxRuntime.jsxs("strong", { className: "ms-2", children: [t('Editor'), ": "] }), " ", jsxRuntime.jsx("span", { children: settingColumns.updatedByName })] })) }), jsxRuntime.jsxs("div", { children: [resetDefaultColumns && (jsxRuntime.jsx(Button$1$1, { color: "primary", onClick: () => messageBoxConfirm(t, handleResetColumns, {}, 'Do you want to reset the default settings?'), className: "me-1", children: t('Reset') })), jsxRuntime.jsx(Button$1$1, { color: "primary", onClick: handleSubmit, className: "me-1", children: t('Confirm') }), jsxRuntime.jsx(Button$1$1, { color: "secondary", onClick: handleCancel, outline: true, children: t('Close') })] })] })] }));
|
|
39802
39805
|
};
|
|
39803
39806
|
|
|
39804
39807
|
const ToolbarBottom = ({ handleAdd, handleDuplicate, handleInsertBefore, handleInsertAfter, handleDeleteAll, setOpenPopupSetupColumn, focusRow, editDisable, addDisable, buttonSetting, toolbarSetting, headerColumns }) => {
|
|
@@ -68669,7 +68672,7 @@ const UnExpandAllIcon = ({ className, color = '#7F7F7F', size = 24, onClick, sty
|
|
|
68669
68672
|
};
|
|
68670
68673
|
|
|
68671
68674
|
const RenderContentCol = (props) => {
|
|
68672
|
-
const { col, indexCol, indexRow, isSelected, row, zeroVisiable,
|
|
68675
|
+
const { col, indexCol, indexRow, isSelected, row, zeroVisiable, groupSetting, formatSetting, idTable, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, selectedRows, selectEnable, setSelectedRows, fieldKey, isMulti } = props;
|
|
68673
68676
|
const cellId = `content-${idTable}-row${indexRow}col-${indexCol}`;
|
|
68674
68677
|
const checkOverflow = () => {
|
|
68675
68678
|
const element = document.getElementById(cellId);
|
|
@@ -68739,7 +68742,7 @@ const RenderContentCol = (props) => {
|
|
|
68739
68742
|
}, children: displayText }) }), checkOverflow() && (jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: cellId, placement: "top", children: jsxRuntime.jsx("div", { style: { color: textColor }, children: displayText }) }))] }));
|
|
68740
68743
|
}
|
|
68741
68744
|
};
|
|
68742
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: col.visible !== false && (visibleGroupColumn || !groupColumns?.includes(col.field)) && (jsxRuntime.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: {
|
|
68745
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: col.visible !== false && (groupSetting?.visibleGroupColumn || !groupSetting?.groupColumns?.includes(col.field)) && (jsxRuntime.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: {
|
|
68743
68746
|
left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
|
|
68744
68747
|
right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined
|
|
68745
68748
|
}, onClick: (e) => {
|
|
@@ -68792,7 +68795,7 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
|
|
|
68792
68795
|
setContentColumns(rs.flat);
|
|
68793
68796
|
return rs;
|
|
68794
68797
|
}, [columns, settingColumns]);
|
|
68795
|
-
const optionGroupColumns = React$5.useMemo(() => contentColumns.filter((x) => !groupColumns.includes(x.field)).map((x) => ({ ...x, headerDisplay: t(x.headerDisplay ?? x.headerText) })), [groupColumns, contentColumns]);
|
|
68798
|
+
const optionGroupColumns = React$5.useMemo(() => contentColumns.filter((x) => !groupColumns.includes(x.field)).map((x) => ({ ...x, headerDisplay: t(x.columnGroupText ?? x.headerDisplay ?? x.headerText) })), [groupColumns, contentColumns]);
|
|
68796
68799
|
const firstColSpan = React$5.useMemo(() => {
|
|
68797
68800
|
let count = 0;
|
|
68798
68801
|
let index = 3;
|
|
@@ -69045,10 +69048,7 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
|
|
|
69045
69048
|
setExpandsAll(undefined);
|
|
69046
69049
|
row.expand = !expand;
|
|
69047
69050
|
} }), t(col.headerDisplay ?? col.headerText), ": ", value, " (", row.children.length, ")"] }) }), contentColumns.map((colSum, indexCol) => {
|
|
69048
|
-
|
|
69049
|
-
console.log(firstColSpan);
|
|
69050
|
-
console.log(!groupSetting?.visibleGroupColumn && groupColumns?.includes(colSum.field));
|
|
69051
|
-
if (indexCol < firstColSpan || colSum.visible === false || (!groupSetting?.visibleGroupColumn && groupColumns?.includes(colSum.field))) {
|
|
69051
|
+
if (indexCol <= firstColSpan || colSum.visible === false || (!groupSetting?.visibleGroupColumn && groupColumns?.includes(colSum.field))) {
|
|
69052
69052
|
return;
|
|
69053
69053
|
}
|
|
69054
69054
|
let sumValue = row[colSum.field];
|
|
@@ -69064,16 +69064,16 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
|
|
|
69064
69064
|
sumValue = '';
|
|
69065
69065
|
}
|
|
69066
69066
|
}
|
|
69067
|
-
return (jsxRuntime.jsx("td", { className: "r-rowcell r-cell-sum-group", children: jsxRuntime.jsx("div", { className: "r-rowcell-div", style: { justifyContent: colSum.textAlign ? colSum.textAlign : 'left' }, children: (haveSum || colSum.haveSum === true) && Number(sumValue) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] }) : sumValue }) }, `group-sum-cell-${level}-${indexRow}-${indexCol}`));
|
|
69067
|
+
return (jsxRuntime.jsx("td", { className: "r-rowcell r-cell-sum-group", children: jsxRuntime.jsx("div", { className: "r-rowcell-div", style: { justifyContent: colSum.textAlign ? colSum.textAlign : 'left' }, children: (haveSum || colSum.haveSum === true) && Number(sumValue) < 0 ? (jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] })) : (sumValue) }) }, `group-sum-cell-${level}-${indexRow}-${indexCol}`));
|
|
69068
69068
|
})] }), expand && jsxRuntime.jsx(RenderContent, { datas: row.children, level: level + 1 })] }, `row-${level}-${indexRow}`));
|
|
69069
69069
|
}
|
|
69070
69070
|
else {
|
|
69071
69071
|
const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
|
|
69072
|
-
return (jsxRuntime.jsx("tr", { "aria-rowindex": indexRow + 1, role: "row", className: "r-row", children: contentColumns.map((column, indexCol) => (jsxRuntime.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,
|
|
69072
|
+
return (jsxRuntime.jsx("tr", { "aria-rowindex": indexRow + 1, role: "row", className: "r-row", children: contentColumns.map((column, indexCol) => (jsxRuntime.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}`));
|
|
69073
69073
|
}
|
|
69074
69074
|
}) }));
|
|
69075
69075
|
};
|
|
69076
|
-
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: { height: `${height ? `${height}px` : 'auto'}` }, children: [jsxRuntime.jsxs("table", { role: "presentation", style: { width: '100%' }, children: [jsxRuntime.jsx(RenderColGroup, { contentColumns: contentColumns,
|
|
69076
|
+
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: { height: `${height ? `${height}px` : 'auto'}` }, children: [jsxRuntime.jsxs("table", { role: "presentation", style: { width: '100%' }, children: [jsxRuntime.jsx(RenderColGroup, { contentColumns: contentColumns, groupSetting: groupSetting }), jsxRuntime.jsx("thead", { className: "r-gridheader", role: "rowgroup", children: headerColumns.map((rowColumn, indexParent) => {
|
|
69077
69077
|
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: 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) => {
|
|
69078
69078
|
setFilterBy([...val]);
|
|
69079
69079
|
if (querySetting?.changeFilter) {
|
|
@@ -69084,7 +69084,7 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
|
|
|
69084
69084
|
if (querySetting?.changeOrder) {
|
|
69085
69085
|
querySetting.changeOrder(val);
|
|
69086
69086
|
}
|
|
69087
|
-
}, columns: contentColumns,
|
|
69087
|
+
}, columns: contentColumns, groupSetting: groupSetting, setContentColumns: setContentColumns, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, totalCount: dataSource?.length ?? 0 }, `header-${indexParent}-${index}`))) }, `header-${-indexParent}`));
|
|
69088
69088
|
}) }), jsxRuntime.jsx("tbody", { className: "r-gridcontent", role: "rowgroup", children: jsxRuntime.jsx(RenderContent, { datas: viewData }) }), jsxRuntime.jsx("tfoot", { className: "r-gridfoot", children: (columnsAggregate?.length ?? 0) > 0 && (jsxRuntime.jsx("tr", { className: "r-row", children: contentColumns.map((col, indexCol) => {
|
|
69089
69089
|
if (col.visible === false || (!groupSetting?.visibleGroupColumn && groupColumns.includes(col.field))) {
|
|
69090
69090
|
return;
|
|
@@ -69103,7 +69103,7 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
|
|
|
69103
69103
|
left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
|
|
69104
69104
|
right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
|
|
69105
69105
|
textAlign: col.textAlign ? col.textAlign : 'left'
|
|
69106
|
-
}, children: jsxRuntime.jsx("div", { className: "r-footer-div", children: (item || col.haveSum === true) && Number(sumValue) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] }) : sumValue }) }, `summarycell-${indexCol}`));
|
|
69106
|
+
}, children: jsxRuntime.jsx("div", { className: "r-footer-div", children: (item || col.haveSum === true) && Number(sumValue) < 0 ? (jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] })) : (sumValue) }) }, `summarycell-${indexCol}`));
|
|
69107
69107
|
}) })) })] }), (viewData.length ?? 0) === 0 && !isLoading && (jsxRuntime.jsxs("div", { className: "r-no-data", children: [jsxRuntime.jsx("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsxs("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [jsxRuntime.jsx("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }), jsxRuntime.jsxs("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [jsxRuntime.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" }), jsxRuntime.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 && (jsxRuntime.jsx("div", { className: "r-loading-overlay", children: jsxRuntime.jsxs("div", { className: "r-loading", children: [jsxRuntime.jsx(Spinner$1, { className: "me-1" }), t('Loading...')] }) }))] })] }), pagingSetting?.allowPaging && (jsxRuntime.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 })), jsxRuntime.jsx(SettingColumn, { gridRef: gridRef, handleSidebar: () => {
|
|
69108
69108
|
setOpenPopupSetupColumn(!openPopupSetupColumn);
|
|
69109
69109
|
}, settingColumns: settingColumns, openSidebar: openPopupSetupColumn, column: [...contentColumns], resetDefaultColumns: resetDefaultColumns, setColumn: (newColumns) => {
|