es-grid-template 1.9.40 → 1.9.41
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/es/group-component/InternalTable.js +10 -0
- package/es/group-component/TableContainerEdit.js +4 -1
- package/es/group-component/hook/utils.d.ts +3 -3
- package/es/group-component/useContext.d.ts +2 -1
- package/es/table-virtuoso/body/TableBodyCell.js +19 -3
- package/es/table-virtuoso/hook/utils.js +4 -0
- package/es/table-virtuoso/style.d.ts +1 -1
- package/es/table-virtuoso/style.js +11 -11
- package/es/table-virtuoso/table/TableWrapper.js +4 -3
- package/lib/group-component/InternalTable.js +10 -0
- package/lib/group-component/TableContainerEdit.js +4 -1
- package/lib/group-component/useContext.d.ts +2 -1
- package/lib/table-virtuoso/body/TableBodyCell.js +19 -3
- package/lib/table-virtuoso/hook/utils.js +4 -0
- package/lib/table-virtuoso/style.d.ts +1 -1
- package/lib/table-virtuoso/style.js +10 -10
- package/lib/table-virtuoso/table/TableWrapper.js +4 -3
- package/package.json +2 -2
|
@@ -166,6 +166,16 @@ const InternalTable = props => {
|
|
|
166
166
|
...a
|
|
167
167
|
});
|
|
168
168
|
}, [columns]);
|
|
169
|
+
|
|
170
|
+
// React.useEffect(() => {
|
|
171
|
+
// const a = getInvisibleColumns(columns)
|
|
172
|
+
|
|
173
|
+
// const bcd = convertToObj(groupColumns)
|
|
174
|
+
|
|
175
|
+
// setColumnVisibility({...a, ...bcd})
|
|
176
|
+
|
|
177
|
+
// }, [columns, groupColumns])
|
|
178
|
+
|
|
169
179
|
const [columnsHiddenKeys, setColumnsHiddenKeys] = useMergedState(undefined, {
|
|
170
180
|
value: undefined
|
|
171
181
|
});
|
|
@@ -2182,7 +2182,10 @@ const TableContainerEdit = props => {
|
|
|
2182
2182
|
originData,
|
|
2183
2183
|
wrapSettings,
|
|
2184
2184
|
recordDoubleClick,
|
|
2185
|
-
selectionSettings
|
|
2185
|
+
selectionSettings: {
|
|
2186
|
+
...selectionSettings,
|
|
2187
|
+
checkboxOnly: true
|
|
2188
|
+
},
|
|
2186
2189
|
isSelectionChange,
|
|
2187
2190
|
setIsSelectionChange,
|
|
2188
2191
|
// onContextMenu,
|
|
@@ -194,10 +194,10 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
|
|
|
194
194
|
value: any;
|
|
195
195
|
rowData: RecordType;
|
|
196
196
|
}) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
|
|
197
|
-
onCellStyles?: Omit<CSSProperties, "
|
|
198
|
-
onCellHeaderStyles?: Omit<CSSProperties, "
|
|
197
|
+
onCellStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
|
|
198
|
+
onCellHeaderStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
|
|
199
199
|
onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
|
|
200
|
-
onCellFooterStyles?: Omit<CSSProperties, "
|
|
200
|
+
onCellFooterStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
|
|
201
201
|
getValue?: (row: any, rowIndex: number) => any;
|
|
202
202
|
getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;
|
|
203
203
|
headerCellProps?: import("./../../grid-component/type").CellProps;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { Dispatch, SetStateAction } from 'react';
|
|
2
|
-
import type { ColumnTable, ExpandableConfig, IFormat, IWrapSettings, Locale, PaginationConfig, RangeState, RecordDoubleClickEventArgs, RowClassName, SelectionSettings, SourceFilter } from "./../grid-component/type";
|
|
2
|
+
import type { ColumnTable, ExpandableConfig, IFormat, IGroupSetting, IWrapSettings, Locale, PaginationConfig, RangeState, RecordDoubleClickEventArgs, RowClassName, SelectionSettings, SourceFilter } from "./../grid-component/type";
|
|
3
3
|
import type { SubmitHandler } from "react-hook-form";
|
|
4
4
|
import type { ExpandedState, Row, Table } from '@tanstack/react-table';
|
|
5
5
|
export type IPositionCell = {
|
|
@@ -84,6 +84,7 @@ export interface IContext<T> {
|
|
|
84
84
|
onRowFooterStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | (() => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
|
|
85
85
|
dataSourceFilter?: SourceFilter[];
|
|
86
86
|
groupColumns?: string[];
|
|
87
|
+
groupSetting?: IGroupSetting;
|
|
87
88
|
}
|
|
88
89
|
export declare const TableContext: import("react").Context<IContext<any>>;
|
|
89
90
|
export type ContextCellChange = {
|
|
@@ -244,7 +244,12 @@ const TableBodyCell = props => {
|
|
|
244
244
|
className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
|
|
245
245
|
})) : /*#__PURE__*/React.createElement("span", {
|
|
246
246
|
className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
|
|
247
|
-
}))),
|
|
247
|
+
}))), isLastLeftPinnedColumn ? /*#__PURE__*/React.createElement("span", {
|
|
248
|
+
className: "ui-rc_cell-content"
|
|
249
|
+
}, renderCellIndex({
|
|
250
|
+
cell,
|
|
251
|
+
pagination
|
|
252
|
+
})) : renderCellIndex({
|
|
248
253
|
cell,
|
|
249
254
|
pagination
|
|
250
255
|
}));
|
|
@@ -335,7 +340,7 @@ const TableBodyCell = props => {
|
|
|
335
340
|
className: classNames(`${prefix}-grid-cell`, {
|
|
336
341
|
// [`${prefix}-grid-cell-ellipsis`]: true,
|
|
337
342
|
|
|
338
|
-
[`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content')),
|
|
343
|
+
[`${prefix}-grid-cell-ellipsis`]: !isLastLeftPinnedColumn && !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content')),
|
|
339
344
|
[`${prefix}-grid-cell-text-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content'),
|
|
340
345
|
// [`${prefix}-grid-cell-selected`]: isCellSelected,
|
|
341
346
|
|
|
@@ -466,6 +471,17 @@ const TableBodyCell = props => {
|
|
|
466
471
|
className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
|
|
467
472
|
})) : /*#__PURE__*/React.createElement("span", {
|
|
468
473
|
className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
|
|
469
|
-
}))), groupValue ? groupValue : cellContent) : /*#__PURE__*/React.createElement(React.Fragment, null,
|
|
474
|
+
}))), groupValue ? groupValue : cellContent) : /*#__PURE__*/React.createElement(React.Fragment, null, isLastLeftPinnedColumn ? /*#__PURE__*/React.createElement("div", {
|
|
475
|
+
className: classNames('ui-rc_cell-content', {
|
|
476
|
+
[`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content')),
|
|
477
|
+
[`${prefix}-grid-cell-text-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content'),
|
|
478
|
+
// [`${prefix}-grid-cell-selected`]: isCellSelected,
|
|
479
|
+
|
|
480
|
+
[`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
|
|
481
|
+
[`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
|
|
482
|
+
[`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center',
|
|
483
|
+
[`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right' || columnMeta.type === 'number'
|
|
484
|
+
})
|
|
485
|
+
}, groupValue ? groupValue : cellContent) : groupValue ? groupValue : cellContent));
|
|
470
486
|
};
|
|
471
487
|
export default TableBodyCell;
|
|
@@ -234,6 +234,10 @@ export function groupArrayByColumns(arr, columns) {
|
|
|
234
234
|
|
|
235
235
|
columns.forEach((column, index) => {
|
|
236
236
|
const value = item[column];
|
|
237
|
+
if (value === null || value === undefined) {
|
|
238
|
+
// Nếu giá trị nhóm là null/undefined thì bỏ qua cột này
|
|
239
|
+
return;
|
|
240
|
+
}
|
|
237
241
|
|
|
238
242
|
// Tạo key unique cho group dựa trên value của cột
|
|
239
243
|
// Tìm existing item ở level hiện tại
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import styled from
|
|
2
|
-
const color =
|
|
3
|
-
const BgColor =
|
|
4
|
-
const rowSelectedBg =
|
|
5
|
-
const cellSelectedBg =
|
|
6
|
-
const borderSelectedColor =
|
|
7
|
-
const tableBorderColor =
|
|
8
|
-
const tableBorderColorDark =
|
|
9
|
-
const BgColorDark =
|
|
10
|
-
const colorDark =
|
|
1
|
+
import styled from 'styled-components';
|
|
2
|
+
const color = '#000000de';
|
|
3
|
+
const BgColor = '#ffffff';
|
|
4
|
+
const rowSelectedBg = '#FEF2EF';
|
|
5
|
+
const cellSelectedBg = '#F3F8FF';
|
|
6
|
+
const borderSelectedColor = '#0550C5';
|
|
7
|
+
const tableBorderColor = '#e0e0e0';
|
|
8
|
+
const tableBorderColorDark = '#44485E';
|
|
9
|
+
const BgColorDark = '#343e59';
|
|
10
|
+
const colorDark = '#e6e4f3e6';
|
|
11
11
|
export const GridStyle = styled.div.withConfig({
|
|
12
12
|
displayName: "GridStyle",
|
|
13
13
|
componentId: "es-grid-template__sc-rs980s-0"
|
|
14
|
-
})(["&.", "-grid{color:", ";font-size:13px;background-color:", ";table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";.", "-grid-thead{&:has(.resizer.isResizing){.", "-grid-cell{touch-action:none;user-select:none;}}.", "-grid-cell{background-color:#ffffff;&:has(.resizer.isResizing){touch-action:none;user-select:none;}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}}}tbody{.", "-grid-row{&.", "-grid-row-parent{.", "-grid-cell{font-weight:600;background-color:#f5f5f5;}}}}.", "-grid-tfoot{z-index:3 !important;.ui-rc-grid-footer-row{.ui-rc-grid-cell{border-top:1px solid ", ";border-bottom:1px solid ", ";font-weight:500;}}}.", "-grid-cell{padding:5px 8px
|
|
14
|
+
})(["&.", "-grid{color:", ";font-size:13px;background-color:", ";table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";.", "-grid-thead{&:has(.resizer.isResizing){.", "-grid-cell{touch-action:none;user-select:none;}}.", "-grid-cell{background-color:#ffffff;&:has(.resizer.isResizing){touch-action:none;user-select:none;}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}}}tbody{.", "-grid-row{&.", "-grid-row-parent{.", "-grid-cell{font-weight:600;background-color:#f5f5f5;}}}}.", "-grid-tfoot{z-index:3 !important;.ui-rc-grid-footer-row{.ui-rc-grid-cell{border-top:1px solid ", ";border-bottom:1px solid ", ";font-weight:500;}}}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-fix-left-last{.", "-grid-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}&::after{position:absolute;top:0;right:0;bottom:-1px;width:30px;transform:translateX(100%);transition:box-shadow 0.3s;content:'';pointer-events:none;box-shadow:inset 10px 0 8px -8px rgba(5,5,5,0.09);}}&.", "-grid-cell-fix-right-first{.", "-grid-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}&::after{position:absolute;top:0;bottom:-1px;left:0;width:30px;transform:translateX(-100%);transition:box-shadow 0.3s;content:'';pointer-events:none;box-shadow:inset -10px 0 8px -8px rgba(5,5,5,0.09);}&::before{content:'';position:absolute;inset-block:0;inset-inline-start:-1px;border-inline-start:1px solid #e0e0e0;}}.class-content:has(*){background:lightblue;}.class-content:not(:has(*)){background:lightgreen;}&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-righ{text-align:right;justify-content:flex-end;}}.", "-grid-cell:not(:has(*)){&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{text-align:right;justify-content:flex-end;}&.", "-grid-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}}&.", "-grid-light{.", "-grid-container{.", "-grid-thead{z-index:3 !important;background-color:", ";font-weight:500;.", "-grid-cell{font-weight:inherit;color:", ";background-color:#ffffff;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";}}tbody{background-color:", ";color:", ";.", "-grid-row{&.ui-rc-grid-row-selected{.", "-grid-cell{background-color:", ";}}}.", "-grid-cell{outline:none;background-color:#ffffff;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-selected{background-color:", " !important;}&.disable{background-color:#f0f0f0;}&.cell-editable{user-select:none;&.cell-border-top{&::after{content:'';position:absolute;top:0px;left:0;height:1px;width:100%;border-top:1px solid ", ";pointer-events:none;z-index:1;}}&.cell-border-bottom{border-bottom:1px solid ", ";}&.cell-border-left{&::before{content:'';position:absolute;top:0;left:0;height:102%;width:1px;border-left:1px solid ", ";pointer-events:none;z-index:1;}}&.cell-border-right{border-inline-end:1px solid ", ";}&.cell-paste-border-top{&::after{content:'';position:absolute;top:0px;left:0;height:1px;width:100%;border-top:1px dashed #949494;pointer-events:none;z-index:1;}&.ui-rc-grid-cell-fix-left-last{&::after{left:-100%;}}&.ui-rc-grid-cell-fix-right-first{&::after{left:100%;}}}&.cell-paste-border-bottom{border-bottom:1px dashed #949494;}&.cell-paste-border-left{&::before{content:'';position:absolute;top:0;left:0;height:102%;width:1px;border-left:1px dashed #949494;pointer-events:none;z-index:1;}}&.cell-paste-border-right{border-inline-end:1px dashed #949494;}.dragging-point{width:6px;height:6px;position:absolute;cursor:crosshair;right:0px;bottom:0px;&.hidden{display:none;}.dot-point{position:absolute;width:6px;height:6px;border-radius:0px;background-color:", ";bottom:0;right:0;}}}&.cell-editing{padding:0;&:focus-visible{outline:none;}.ant-form-item,.ant-row.ant-form-item-row,.ant-col.ant-form-item-control,.ant-form-item-control-input,.ant-form-item-control-input-content,.ant-input{height:100% !important;&:focus-visible{outline:none;}}textarea.ant-input{line-height:1.8;height:36px !important;min-height:36px !important;}input.be-cell-editing,.ant-picker,.ui-rc-select-selector,.ui-rc-table-select-selector{padding-inline:7px;}.", "-checkbox-wrapper{.", "-checkbox{background-color:red;}.", "-checkbox-input{&:focus-visible{outline:none;}}}.ant-input,.ant-picker{border-radius:0;}.ant-color-picker-trigger{height:100%;border-radius:0;.ant-color-picker-color-block{height:100%;width:100%;}}.", "-table-select-single .", "-table-select-selector,.", "-select-single .", "-select-selector,.ui-rc-table-select-selector{border-radius:0 !important;}.", "-table-select-single:not(.", "-table-select-customize-input){.", "-table-select-selector{.", "-table-select-selection-search-input{height:auto;}}}}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}}"], props => props.$prefix, color, BgColor, props => props.$prefix, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, rowSelectedBg, props => props.$prefix, tableBorderColor, tableBorderColor, cellSelectedBg, borderSelectedColor, borderSelectedColor, borderSelectedColor, borderSelectedColor, borderSelectedColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);
|
|
@@ -19,7 +19,8 @@ const TableWrapper = props => {
|
|
|
19
19
|
contextMenuItems: propContextMenuItems,
|
|
20
20
|
contextMenuHidden,
|
|
21
21
|
contextMenuClick,
|
|
22
|
-
contextMenuOpen
|
|
22
|
+
contextMenuOpen,
|
|
23
|
+
summary
|
|
23
24
|
} = props;
|
|
24
25
|
const menuRef = React.useRef(null);
|
|
25
26
|
const {
|
|
@@ -229,7 +230,7 @@ const TableWrapper = props => {
|
|
|
229
230
|
}));
|
|
230
231
|
});
|
|
231
232
|
},
|
|
232
|
-
fixedFooterContent: () => {
|
|
233
|
+
fixedFooterContent: summary ? () => {
|
|
233
234
|
const visibleColumns = table.getVisibleLeafColumns();
|
|
234
235
|
return /*#__PURE__*/React.createElement("tr", {
|
|
235
236
|
className: "ui-rc-grid-footer-row"
|
|
@@ -239,7 +240,7 @@ const TableWrapper = props => {
|
|
|
239
240
|
column: header
|
|
240
241
|
});
|
|
241
242
|
}));
|
|
242
|
-
}
|
|
243
|
+
} : undefined
|
|
243
244
|
})), /*#__PURE__*/React.createElement(Tooltip, {
|
|
244
245
|
id: `${id}-tooltip-content`,
|
|
245
246
|
style: {
|
|
@@ -175,6 +175,16 @@ const InternalTable = props => {
|
|
|
175
175
|
...a
|
|
176
176
|
});
|
|
177
177
|
}, [columns]);
|
|
178
|
+
|
|
179
|
+
// React.useEffect(() => {
|
|
180
|
+
// const a = getInvisibleColumns(columns)
|
|
181
|
+
|
|
182
|
+
// const bcd = convertToObj(groupColumns)
|
|
183
|
+
|
|
184
|
+
// setColumnVisibility({...a, ...bcd})
|
|
185
|
+
|
|
186
|
+
// }, [columns, groupColumns])
|
|
187
|
+
|
|
178
188
|
const [columnsHiddenKeys, setColumnsHiddenKeys] = (0, _useMergedState.default)(undefined, {
|
|
179
189
|
value: undefined
|
|
180
190
|
});
|
|
@@ -2190,7 +2190,10 @@ const TableContainerEdit = props => {
|
|
|
2190
2190
|
originData,
|
|
2191
2191
|
wrapSettings,
|
|
2192
2192
|
recordDoubleClick,
|
|
2193
|
-
selectionSettings
|
|
2193
|
+
selectionSettings: {
|
|
2194
|
+
...selectionSettings,
|
|
2195
|
+
checkboxOnly: true
|
|
2196
|
+
},
|
|
2194
2197
|
isSelectionChange,
|
|
2195
2198
|
setIsSelectionChange,
|
|
2196
2199
|
// onContextMenu,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { Dispatch, SetStateAction } from 'react';
|
|
2
|
-
import type { ColumnTable, ExpandableConfig, IFormat, IWrapSettings, Locale, PaginationConfig, RangeState, RecordDoubleClickEventArgs, RowClassName, SelectionSettings, SourceFilter } from "./../grid-component/type";
|
|
2
|
+
import type { ColumnTable, ExpandableConfig, IFormat, IGroupSetting, IWrapSettings, Locale, PaginationConfig, RangeState, RecordDoubleClickEventArgs, RowClassName, SelectionSettings, SourceFilter } from "./../grid-component/type";
|
|
3
3
|
import type { SubmitHandler } from "react-hook-form";
|
|
4
4
|
import type { ExpandedState, Row, Table } from '@tanstack/react-table';
|
|
5
5
|
export type IPositionCell = {
|
|
@@ -84,6 +84,7 @@ export interface IContext<T> {
|
|
|
84
84
|
onRowFooterStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | (() => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
|
|
85
85
|
dataSourceFilter?: SourceFilter[];
|
|
86
86
|
groupColumns?: string[];
|
|
87
|
+
groupSetting?: IGroupSetting;
|
|
87
88
|
}
|
|
88
89
|
export declare const TableContext: import("react").Context<IContext<any>>;
|
|
89
90
|
export type ContextCellChange = {
|
|
@@ -251,7 +251,12 @@ const TableBodyCell = props => {
|
|
|
251
251
|
className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
|
|
252
252
|
})) : /*#__PURE__*/_react.default.createElement("span", {
|
|
253
253
|
className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
|
|
254
|
-
}))),
|
|
254
|
+
}))), isLastLeftPinnedColumn ? /*#__PURE__*/_react.default.createElement("span", {
|
|
255
|
+
className: "ui-rc_cell-content"
|
|
256
|
+
}, renderCellIndex({
|
|
257
|
+
cell,
|
|
258
|
+
pagination
|
|
259
|
+
})) : renderCellIndex({
|
|
255
260
|
cell,
|
|
256
261
|
pagination
|
|
257
262
|
}));
|
|
@@ -342,7 +347,7 @@ const TableBodyCell = props => {
|
|
|
342
347
|
className: (0, _classnames.default)(`${prefix}-grid-cell`, {
|
|
343
348
|
// [`${prefix}-grid-cell-ellipsis`]: true,
|
|
344
349
|
|
|
345
|
-
[`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content')),
|
|
350
|
+
[`${prefix}-grid-cell-ellipsis`]: !isLastLeftPinnedColumn && !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content')),
|
|
346
351
|
[`${prefix}-grid-cell-text-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content'),
|
|
347
352
|
// [`${prefix}-grid-cell-selected`]: isCellSelected,
|
|
348
353
|
|
|
@@ -473,6 +478,17 @@ const TableBodyCell = props => {
|
|
|
473
478
|
className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
|
|
474
479
|
})) : /*#__PURE__*/_react.default.createElement("span", {
|
|
475
480
|
className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
|
|
476
|
-
}))), groupValue ? groupValue : cellContent) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null,
|
|
481
|
+
}))), groupValue ? groupValue : cellContent) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isLastLeftPinnedColumn ? /*#__PURE__*/_react.default.createElement("div", {
|
|
482
|
+
className: (0, _classnames.default)('ui-rc_cell-content', {
|
|
483
|
+
[`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content')),
|
|
484
|
+
[`${prefix}-grid-cell-text-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content'),
|
|
485
|
+
// [`${prefix}-grid-cell-selected`]: isCellSelected,
|
|
486
|
+
|
|
487
|
+
[`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
|
|
488
|
+
[`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
|
|
489
|
+
[`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center',
|
|
490
|
+
[`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right' || columnMeta.type === 'number'
|
|
491
|
+
})
|
|
492
|
+
}, groupValue ? groupValue : cellContent) : groupValue ? groupValue : cellContent));
|
|
477
493
|
};
|
|
478
494
|
var _default = exports.default = TableBodyCell;
|
|
@@ -318,6 +318,10 @@ function groupArrayByColumns(arr, columns) {
|
|
|
318
318
|
|
|
319
319
|
columns.forEach((column, index) => {
|
|
320
320
|
const value = item[column];
|
|
321
|
+
if (value === null || value === undefined) {
|
|
322
|
+
// Nếu giá trị nhóm là null/undefined thì bỏ qua cột này
|
|
323
|
+
return;
|
|
324
|
+
}
|
|
321
325
|
|
|
322
326
|
// Tạo key unique cho group dựa trên value của cột
|
|
323
327
|
// Tìm existing item ở level hiện tại
|
|
@@ -6,16 +6,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.GridStyle = void 0;
|
|
8
8
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
|
-
const color =
|
|
10
|
-
const BgColor =
|
|
11
|
-
const rowSelectedBg =
|
|
12
|
-
const cellSelectedBg =
|
|
13
|
-
const borderSelectedColor =
|
|
14
|
-
const tableBorderColor =
|
|
15
|
-
const tableBorderColorDark =
|
|
16
|
-
const BgColorDark =
|
|
17
|
-
const colorDark =
|
|
9
|
+
const color = '#000000de';
|
|
10
|
+
const BgColor = '#ffffff';
|
|
11
|
+
const rowSelectedBg = '#FEF2EF';
|
|
12
|
+
const cellSelectedBg = '#F3F8FF';
|
|
13
|
+
const borderSelectedColor = '#0550C5';
|
|
14
|
+
const tableBorderColor = '#e0e0e0';
|
|
15
|
+
const tableBorderColorDark = '#44485E';
|
|
16
|
+
const BgColorDark = '#343e59';
|
|
17
|
+
const colorDark = '#e6e4f3e6';
|
|
18
18
|
const GridStyle = exports.GridStyle = _styledComponents.default.div.withConfig({
|
|
19
19
|
displayName: "GridStyle",
|
|
20
20
|
componentId: "es-grid-template__sc-rs980s-0"
|
|
21
|
-
})(["&.", "-grid{color:", ";font-size:13px;background-color:", ";table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";.", "-grid-thead{&:has(.resizer.isResizing){.", "-grid-cell{touch-action:none;user-select:none;}}.", "-grid-cell{background-color:#ffffff;&:has(.resizer.isResizing){touch-action:none;user-select:none;}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}}}tbody{.", "-grid-row{&.", "-grid-row-parent{.", "-grid-cell{font-weight:600;background-color:#f5f5f5;}}}}.", "-grid-tfoot{z-index:3 !important;.ui-rc-grid-footer-row{.ui-rc-grid-cell{border-top:1px solid ", ";border-bottom:1px solid ", ";font-weight:500;}}}.", "-grid-cell{padding:5px 8px
|
|
21
|
+
})(["&.", "-grid{color:", ";font-size:13px;background-color:", ";table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";.", "-grid-thead{&:has(.resizer.isResizing){.", "-grid-cell{touch-action:none;user-select:none;}}.", "-grid-cell{background-color:#ffffff;&:has(.resizer.isResizing){touch-action:none;user-select:none;}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}}}tbody{.", "-grid-row{&.", "-grid-row-parent{.", "-grid-cell{font-weight:600;background-color:#f5f5f5;}}}}.", "-grid-tfoot{z-index:3 !important;.ui-rc-grid-footer-row{.ui-rc-grid-cell{border-top:1px solid ", ";border-bottom:1px solid ", ";font-weight:500;}}}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-fix-left-last{.", "-grid-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}&::after{position:absolute;top:0;right:0;bottom:-1px;width:30px;transform:translateX(100%);transition:box-shadow 0.3s;content:'';pointer-events:none;box-shadow:inset 10px 0 8px -8px rgba(5,5,5,0.09);}}&.", "-grid-cell-fix-right-first{.", "-grid-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}&::after{position:absolute;top:0;bottom:-1px;left:0;width:30px;transform:translateX(-100%);transition:box-shadow 0.3s;content:'';pointer-events:none;box-shadow:inset -10px 0 8px -8px rgba(5,5,5,0.09);}&::before{content:'';position:absolute;inset-block:0;inset-inline-start:-1px;border-inline-start:1px solid #e0e0e0;}}.class-content:has(*){background:lightblue;}.class-content:not(:has(*)){background:lightgreen;}&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-righ{text-align:right;justify-content:flex-end;}}.", "-grid-cell:not(:has(*)){&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{text-align:right;justify-content:flex-end;}&.", "-grid-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}}&.", "-grid-light{.", "-grid-container{.", "-grid-thead{z-index:3 !important;background-color:", ";font-weight:500;.", "-grid-cell{font-weight:inherit;color:", ";background-color:#ffffff;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";}}tbody{background-color:", ";color:", ";.", "-grid-row{&.ui-rc-grid-row-selected{.", "-grid-cell{background-color:", ";}}}.", "-grid-cell{outline:none;background-color:#ffffff;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-selected{background-color:", " !important;}&.disable{background-color:#f0f0f0;}&.cell-editable{user-select:none;&.cell-border-top{&::after{content:'';position:absolute;top:0px;left:0;height:1px;width:100%;border-top:1px solid ", ";pointer-events:none;z-index:1;}}&.cell-border-bottom{border-bottom:1px solid ", ";}&.cell-border-left{&::before{content:'';position:absolute;top:0;left:0;height:102%;width:1px;border-left:1px solid ", ";pointer-events:none;z-index:1;}}&.cell-border-right{border-inline-end:1px solid ", ";}&.cell-paste-border-top{&::after{content:'';position:absolute;top:0px;left:0;height:1px;width:100%;border-top:1px dashed #949494;pointer-events:none;z-index:1;}&.ui-rc-grid-cell-fix-left-last{&::after{left:-100%;}}&.ui-rc-grid-cell-fix-right-first{&::after{left:100%;}}}&.cell-paste-border-bottom{border-bottom:1px dashed #949494;}&.cell-paste-border-left{&::before{content:'';position:absolute;top:0;left:0;height:102%;width:1px;border-left:1px dashed #949494;pointer-events:none;z-index:1;}}&.cell-paste-border-right{border-inline-end:1px dashed #949494;}.dragging-point{width:6px;height:6px;position:absolute;cursor:crosshair;right:0px;bottom:0px;&.hidden{display:none;}.dot-point{position:absolute;width:6px;height:6px;border-radius:0px;background-color:", ";bottom:0;right:0;}}}&.cell-editing{padding:0;&:focus-visible{outline:none;}.ant-form-item,.ant-row.ant-form-item-row,.ant-col.ant-form-item-control,.ant-form-item-control-input,.ant-form-item-control-input-content,.ant-input{height:100% !important;&:focus-visible{outline:none;}}textarea.ant-input{line-height:1.8;height:36px !important;min-height:36px !important;}input.be-cell-editing,.ant-picker,.ui-rc-select-selector,.ui-rc-table-select-selector{padding-inline:7px;}.", "-checkbox-wrapper{.", "-checkbox{background-color:red;}.", "-checkbox-input{&:focus-visible{outline:none;}}}.ant-input,.ant-picker{border-radius:0;}.ant-color-picker-trigger{height:100%;border-radius:0;.ant-color-picker-color-block{height:100%;width:100%;}}.", "-table-select-single .", "-table-select-selector,.", "-select-single .", "-select-selector,.ui-rc-table-select-selector{border-radius:0 !important;}.", "-table-select-single:not(.", "-table-select-customize-input){.", "-table-select-selector{.", "-table-select-selection-search-input{height:auto;}}}}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}}"], props => props.$prefix, color, BgColor, props => props.$prefix, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, rowSelectedBg, props => props.$prefix, tableBorderColor, tableBorderColor, cellSelectedBg, borderSelectedColor, borderSelectedColor, borderSelectedColor, borderSelectedColor, borderSelectedColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);
|
|
@@ -29,7 +29,8 @@ const TableWrapper = props => {
|
|
|
29
29
|
contextMenuItems: propContextMenuItems,
|
|
30
30
|
contextMenuHidden,
|
|
31
31
|
contextMenuClick,
|
|
32
|
-
contextMenuOpen
|
|
32
|
+
contextMenuOpen,
|
|
33
|
+
summary
|
|
33
34
|
} = props;
|
|
34
35
|
const menuRef = _react.default.useRef(null);
|
|
35
36
|
const {
|
|
@@ -239,7 +240,7 @@ const TableWrapper = props => {
|
|
|
239
240
|
}));
|
|
240
241
|
});
|
|
241
242
|
},
|
|
242
|
-
fixedFooterContent: () => {
|
|
243
|
+
fixedFooterContent: summary ? () => {
|
|
243
244
|
const visibleColumns = table.getVisibleLeafColumns();
|
|
244
245
|
return /*#__PURE__*/_react.default.createElement("tr", {
|
|
245
246
|
className: "ui-rc-grid-footer-row"
|
|
@@ -249,7 +250,7 @@ const TableWrapper = props => {
|
|
|
249
250
|
column: header
|
|
250
251
|
});
|
|
251
252
|
}));
|
|
252
|
-
}
|
|
253
|
+
} : undefined
|
|
253
254
|
})), /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
|
|
254
255
|
id: `${id}-tooltip-content`,
|
|
255
256
|
style: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "es-grid-template",
|
|
3
|
-
"version": "1.9.
|
|
3
|
+
"version": "1.9.41",
|
|
4
4
|
"description": "es-grid-template",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -67,6 +67,7 @@
|
|
|
67
67
|
"rc-checkbox": "3.5.0",
|
|
68
68
|
"rc-dropdown": "4.2.1",
|
|
69
69
|
"rc-field-form": "2.6.0",
|
|
70
|
+
"rc-master-ui": "1.1.59",
|
|
70
71
|
"rc-select": "14.16.3",
|
|
71
72
|
"rc-tooltip": "6.3.0",
|
|
72
73
|
"rc-tree": "5.10.1",
|
|
@@ -108,7 +109,6 @@
|
|
|
108
109
|
"gh-pages": "3.1.0",
|
|
109
110
|
"less": "4.1.1",
|
|
110
111
|
"np": "7.1.0",
|
|
111
|
-
"rc-master-ui": "1.1.59",
|
|
112
112
|
"rc-test": "7.0.9",
|
|
113
113
|
"react": "18.2.0",
|
|
114
114
|
"react-dom": "18.2.0",
|