es-grid-template 1.9.40 → 1.9.42

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.
@@ -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, "width" | "minWidth" | "right" | "left" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "right" | "left" | "position" | "display">);
198
- onCellHeaderStyles?: Omit<CSSProperties, "width" | "minWidth" | "right" | "left" | "position" | "display"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "right" | "left" | "position" | "display">);
197
+ onCellStyles?: Omit<CSSProperties, "position" | "display" | "left" | "minWidth" | "right" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "position" | "display" | "left" | "minWidth" | "right" | "width">);
198
+ onCellHeaderStyles?: Omit<CSSProperties, "position" | "display" | "left" | "minWidth" | "right" | "width"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "display" | "left" | "minWidth" | "right" | "width">);
199
199
  onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
200
- onCellFooterStyles?: Omit<CSSProperties, "width" | "minWidth" | "right" | "left" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "right" | "left" | "position" | "display">);
200
+ onCellFooterStyles?: Omit<CSSProperties, "position" | "display" | "left" | "minWidth" | "right" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "display" | "left" | "minWidth" | "right" | "width">);
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 = {
@@ -200,7 +200,7 @@ const TableContainer = props => {
200
200
  if (!toolbarItems) {
201
201
  return undefined;
202
202
  }
203
- return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight !== false);
203
+ return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight !== true);
204
204
  }, [toolbarItems]);
205
205
  const toolbarItemBottom = React.useMemo(() => {
206
206
  if (!toolbarItems) {
@@ -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
- }))), renderCellIndex({
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, groupValue ? groupValue : cellContent));
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;
@@ -83,7 +83,12 @@ const TableBodyRow = ({
83
83
  const firstNonGroupColumn = nonGroupColumns[0];
84
84
 
85
85
  // const colSpan = row.subRows && cell.column.id === firstNonGroupColumn?.id ? (groupSetting?.groupColumnSpan ?? 2)
86
- const colSpanGroup = row.subRows && row.subRows.length > 0 && cell.column.id === firstNonGroupColumn?.column.id ? 2 : row.subRows && nonGroupColumns[1].column.id === cell.column.id ? 0 : 1;
86
+
87
+ // const colSpanGroup = row.subRows && row.subRows.length > 0 && cell.column.id === firstNonGroupColumn?.column.id ? (groupSetting?.groupColumnSpan ?? 2) : (row.subRows && nonGroupColumns[1].column.id === cell.column.id ? 0 : 1)
88
+
89
+ const groupColumnSpan = groupSetting?.groupColumnSpan ?? 2;
90
+ const hiddenGroupColumns = new Set(nonGroupColumns.slice(1, groupColumnSpan).map(col => col.column.id));
91
+ const colSpanGroup = row.subRows?.length > 0 ? cell.column.id === firstNonGroupColumn?.column.id ? groupColumnSpan : hiddenGroupColumns.has(cell.column.id) ? 0 : 1 : 1;
87
92
 
88
93
  // if (row.subRows && row.subRows.length > 0 && colSpanGroup === 0 || onCellRowSpan === 0 || onCellColSpan === 0) {
89
94
  if (row.subRows && row.getCanExpand() && colSpanGroup === 0 || onCellRowSpan === 0 || onCellColSpan === 0) {
@@ -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,7 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  type GridProps = {
3
3
  $theme: {
4
- theme?: "light" | "dark";
4
+ theme?: 'light' | 'dark';
5
5
  backgroundColor?: string;
6
6
  color?: string;
7
7
  };
@@ -1,14 +1,14 @@
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";
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;.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.$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);
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 = {
@@ -207,7 +207,7 @@ const TableContainer = props => {
207
207
  if (!toolbarItems) {
208
208
  return undefined;
209
209
  }
210
- return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight !== false);
210
+ return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight !== true);
211
211
  }, [toolbarItems]);
212
212
  const toolbarItemBottom = _react.default.useMemo(() => {
213
213
  if (!toolbarItems) {
@@ -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
- }))), renderCellIndex({
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, groupValue ? groupValue : cellContent));
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;
@@ -90,7 +90,12 @@ const TableBodyRow = ({
90
90
  const firstNonGroupColumn = nonGroupColumns[0];
91
91
 
92
92
  // const colSpan = row.subRows && cell.column.id === firstNonGroupColumn?.id ? (groupSetting?.groupColumnSpan ?? 2)
93
- const colSpanGroup = row.subRows && row.subRows.length > 0 && cell.column.id === firstNonGroupColumn?.column.id ? 2 : row.subRows && nonGroupColumns[1].column.id === cell.column.id ? 0 : 1;
93
+
94
+ // const colSpanGroup = row.subRows && row.subRows.length > 0 && cell.column.id === firstNonGroupColumn?.column.id ? (groupSetting?.groupColumnSpan ?? 2) : (row.subRows && nonGroupColumns[1].column.id === cell.column.id ? 0 : 1)
95
+
96
+ const groupColumnSpan = groupSetting?.groupColumnSpan ?? 2;
97
+ const hiddenGroupColumns = new Set(nonGroupColumns.slice(1, groupColumnSpan).map(col => col.column.id));
98
+ const colSpanGroup = row.subRows?.length > 0 ? cell.column.id === firstNonGroupColumn?.column.id ? groupColumnSpan : hiddenGroupColumns.has(cell.column.id) ? 0 : 1 : 1;
94
99
 
95
100
  // if (row.subRows && row.subRows.length > 0 && colSpanGroup === 0 || onCellRowSpan === 0 || onCellColSpan === 0) {
96
101
  if (row.subRows && row.getCanExpand() && colSpanGroup === 0 || onCellRowSpan === 0 || onCellColSpan === 0) {
@@ -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
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  type GridProps = {
3
3
  $theme: {
4
- theme?: "light" | "dark";
4
+ theme?: 'light' | 'dark';
5
5
  backgroundColor?: string;
6
6
  color?: string;
7
7
  };
@@ -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 = "#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";
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;.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.$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);
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.40",
3
+ "version": "1.9.42",
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",