react-table-edit 1.5.23 → 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-view/content.d.ts +4 -2
- package/dist/index.js +11 -11
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +11 -11
- 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;
|
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
|
|
@@ -68672,7 +68672,7 @@ const UnExpandAllIcon = ({ className, color = '#7F7F7F', size = 24, onClick, sty
|
|
|
68672
68672
|
};
|
|
68673
68673
|
|
|
68674
68674
|
const RenderContentCol = (props) => {
|
|
68675
|
-
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;
|
|
68676
68676
|
const cellId = `content-${idTable}-row${indexRow}col-${indexCol}`;
|
|
68677
68677
|
const checkOverflow = () => {
|
|
68678
68678
|
const element = document.getElementById(cellId);
|
|
@@ -68742,7 +68742,7 @@ const RenderContentCol = (props) => {
|
|
|
68742
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 }) }))] }));
|
|
68743
68743
|
}
|
|
68744
68744
|
};
|
|
68745
|
-
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: {
|
|
68746
68746
|
left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
|
|
68747
68747
|
right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined
|
|
68748
68748
|
}, onClick: (e) => {
|
|
@@ -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) => {
|