beautiful-grid 1.0.13 → 1.0.14

package/cjs/BGrid.js

@@ -93,7 +93,7 @@ function computeModelColumns(columns, frozenColumnIndex, duplicateToolboxColumnI
 }
 function BGrid(_a) {
     var _b, _c, _d, _e;
-    var ref = _a.ref, width = _a.width, height = _a.height, _f = _a.headerHeight, headerHeight = _f === void 0 ? 30 : _f, footerHeight = _a.footerHeight, _g = _a.summaryHeight, summaryHeight = _g === void 0 ? 30 : _g, _h = _a.itemHeight, itemHeight = _h === void 0 ? 15 : _h, _j = _a.itemPadding, itemPadding = _j === void 0 ? 7 : _j, getRowHeight = _a.getRowHeight, columns = _a.columns, columnsGroup = _a.columnsGroup, columnGroups = _a.columnGroups, onChangeColumns = _a.onChangeColumns, _k = _a.frozenColumnIndex, frozenColumnIndex = _k === void 0 ? 0 : _k, _l = _a.frozenRowCount, frozenRowCount = _l === void 0 ? 0 : _l, _m = _a.data, data = _m === void 0 ? [] : _m, page = _a.page, scrollbar = _a.scrollbar, status = _a.status, pagination = _a.pagination, bottomBarHeight = _a.bottomBarHeight, _o = _a.scrollTop, scrollTop = _o === void 0 ? 0 : _o, _p = _a.scrollLeft, scrollLeft = _p === void 0 ? 0 : _p, className = _a.className, style = _a.style, rowChecked = _a.rowChecked, sort = _a.sort, onClick = _a.onClick, _q = _a.loading, loading = _q === void 0 ? false : _q, spinning = _a.spinning, disabled = _a.disabled, rowKey = _a.rowKey, selectedRowKey = _a.selectedRowKey, editable = _a.editable, onChangeData = _a.onChangeData, showLineNumber = _a.showLineNumber, msg = _a.msg, getRowClassName = _a.getRowClassName, _r = _a.editTrigger, editTrigger = _r === void 0 ? 'dblclick' : _r, cellMergeOptions = _a.cellMergeOptions, cellSelectionOptions = _a.cellSelectionOptions, cellNavigationOptions = _a.cellNavigationOptions, variant = _a.variant, summary = _a.summary, columnSortable = _a.columnSortable, reorder = _a.reorder, pivot = _a.pivot, dataControl = _a.dataControl, icons = _a.icons, columnVisibility = _a.columnVisibility, searchOptions = _a.searchOptions, contextMenuOptions = _a.contextMenuOptions, tree = _a.tree;
+    var ref = _a.ref, width = _a.width, height = _a.height, _f = _a.headerHeight, headerHeight = _f === void 0 ? 30 : _f, footerHeight = _a.footerHeight, explicitSummaryHeight = _a.summaryHeight, _g = _a.summaryRowHeight, summaryRowHeight = _g === void 0 ? utils_1.DEFAULT_SUMMARY_ROW_HEIGHT : _g, _h = _a.itemHeight, itemHeight = _h === void 0 ? 15 : _h, _j = _a.itemPadding, itemPadding = _j === void 0 ? 7 : _j, getRowHeight = _a.getRowHeight, columns = _a.columns, columnsGroup = _a.columnsGroup, columnGroups = _a.columnGroups, onChangeColumns = _a.onChangeColumns, _k = _a.frozenColumnIndex, frozenColumnIndex = _k === void 0 ? 0 : _k, _l = _a.frozenRowCount, frozenRowCount = _l === void 0 ? 0 : _l, _m = _a.data, data = _m === void 0 ? [] : _m, page = _a.page, scrollbar = _a.scrollbar, status = _a.status, pagination = _a.pagination, bottomBarHeight = _a.bottomBarHeight, _o = _a.scrollTop, scrollTop = _o === void 0 ? 0 : _o, _p = _a.scrollLeft, scrollLeft = _p === void 0 ? 0 : _p, className = _a.className, style = _a.style, rowChecked = _a.rowChecked, sort = _a.sort, onClick = _a.onClick, _q = _a.loading, loading = _q === void 0 ? false : _q, spinning = _a.spinning, disabled = _a.disabled, rowKey = _a.rowKey, selectedRowKey = _a.selectedRowKey, editable = _a.editable, onChangeData = _a.onChangeData, showLineNumber = _a.showLineNumber, msg = _a.msg, getRowClassName = _a.getRowClassName, _r = _a.editTrigger, editTrigger = _r === void 0 ? 'dblclick' : _r, cellMergeOptions = _a.cellMergeOptions, cellSelectionOptions = _a.cellSelectionOptions, cellNavigationOptions = _a.cellNavigationOptions, variant = _a.variant, summary = _a.summary, columnSortable = _a.columnSortable, reorder = _a.reorder, pivot = _a.pivot, dataControl = _a.dataControl, icons = _a.icons, columnVisibility = _a.columnVisibility, searchOptions = _a.searchOptions, contextMenuOptions = _a.contextMenuOptions, tree = _a.tree;
     var _s = __read(React.useState(function () {
         var _a;
         return __spreadArray([], __read(((_a = tree === null || tree === void 0 ? void 0 : tree.defaultExpandedRowKeys) !== null && _a !== void 0 ? _a : [])), false);
@@ -608,6 +608,13 @@ function BGrid(_a) {
             console.warn('[BGrid] Both bottomBarHeight and footerHeight were provided. bottomBarHeight takes precedence.');
         }
     }, [bottomBarHeight, footerHeight]);
+    var resolvedSummaryHeight = React.useMemo(function () {
+        return (0, utils_1.computeSummaryHeight)({
+            summary: resolvedSummary,
+            summaryHeight: explicitSummaryHeight,
+            summaryRowHeight: summaryRowHeight,
+        });
+    }, [resolvedSummary, explicitSummaryHeight, summaryRowHeight]);
     var initialStoreState = React.useMemo(function () {
         var _a, _b, _c;
         var initialWidth = width !== undefined ? Math.max(width, 100) : 0;
@@ -617,7 +624,7 @@ function BGrid(_a) {
             ? Math.max(initialHeight -
                 headerHeight -
                 (initialShowBottomBar ? resolvedBottomBarHeight : 0) -
-                (resolvedSummary ? summaryHeight : 0) -
+                (resolvedSummary ? resolvedSummaryHeight : 0) -
                 containerBorderWidth * 2, 0)
             : 0;
         var displayItemCount = contentBodyHeight > 0 ? Math.ceil(contentBodyHeight / (itemHeight + itemPadding * 2)) : 0;
@@ -638,7 +645,8 @@ function BGrid(_a) {
             scrollbar: resolvedScrollbar,
             status: resolvedStatus,
             pagination: resolvedPagination,
-            summaryHeight: summaryHeight,
+            summaryHeight: resolvedSummaryHeight,
+            summaryRowHeight: summaryRowHeight,
             itemHeight: itemHeight,
             itemPadding: itemPadding,
             frozenColumnIndex: resolvedFrozenColumnIndex,
@@ -709,7 +717,8 @@ function BGrid(_a) {
         resolvedScrollbar,
         resolvedStatus,
         resolvedPagination,
-        summaryHeight,
+        resolvedSummaryHeight,
+        summaryRowHeight,
         itemHeight,
         itemPadding,
         rowHeightMetrics,
@@ -766,7 +775,8 @@ function BGrid(_a) {
                 onChangeColumns: resolvedOnChangeColumns, width: width, height: height, className: className, style: style, loading: loading, disabled: resolvedDisabled, spinning: spinning, scrollLeft: scrollLeft, scrollTop: scrollTop, headerHeight: headerHeight, footerHeight: footerHeight, bottomBarHeight: resolvedBottomBarHeight,
                 scrollbar: resolvedScrollbar,
                 status: resolvedStatus,
-                pagination: resolvedPagination, summaryHeight: summaryHeight, itemHeight: itemHeight, itemPadding: itemPadding, rowHeightMetrics: rowHeightMetrics, frozenColumnIndex: resolvedFrozenColumnIndex,
+                pagination: resolvedPagination,
+                summaryHeight: resolvedSummaryHeight, summaryRowHeight: summaryRowHeight, itemHeight: itemHeight, itemPadding: itemPadding, rowHeightMetrics: rowHeightMetrics, frozenColumnIndex: resolvedFrozenColumnIndex,
                 frozenRowCount: resolvedFrozenRowCount,
                 rowChecked: resolvedRowChecked, checkedIndexesMap: checkedIndexesMap, sort: resolvedSort, sortParams: sortParams, dataQuery: resolvedDataQuery,
                 dataControl: resolvedDataControl, icons: icons, columnVisibilityState: columnVisibilityState, searchOptions: resolvedSearchOptions,

package/cjs/components/Table.js

@@ -200,7 +200,8 @@ function Table(props) {
         footerHeight: s.footerHeight,
         bottomBarHeight: s.bottomBarHeight,
         summaryHeight: s.summaryHeight,
-    }); })), headerHeight = _10.headerHeight, footerHeight = _10.footerHeight, bottomBarHeight = _10.bottomBarHeight, summaryHeight = _10.summaryHeight;
+        summaryRowHeight: s.summaryRowHeight,
+    }); })), headerHeight = _10.headerHeight, footerHeight = _10.footerHeight, bottomBarHeight = _10.bottomBarHeight, summaryHeight = _10.summaryHeight, summaryRowHeight = _10.summaryRowHeight;
     // [Selector Group 3] Scroll State - 스크롤 상태
     var _11 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         scrollLeft: s.scrollLeft,
@@ -259,12 +260,13 @@ function Table(props) {
         setFooterHeight: s.setFooterHeight,
         setBottomBarHeight: s.setBottomBarHeight,
         setSummaryHeight: s.setSummaryHeight,
+        setSummaryRowHeight: s.setSummaryRowHeight,
         setItemHeight: s.setItemHeight,
         setItemPadding: s.setItemPadding,
         setLoading: s.setLoading,
         setSpinning: s.setSpinning,
         setDisabled: s.setDisabled,
-    }); })), setHeight = _16.setHeight, setWidth = _16.setWidth, setContentBodyHeight = _16.setContentBodyHeight, setDisplayItemCount = _16.setDisplayItemCount, setHeaderHeight = _16.setHeaderHeight, setFooterHeight = _16.setFooterHeight, setBottomBarHeight = _16.setBottomBarHeight, setSummaryHeight = _16.setSummaryHeight, setItemHeight = _16.setItemHeight, setItemPadding = _16.setItemPadding, setLoading = _16.setLoading, setSpinning = _16.setSpinning, setDisabled = _16.setDisabled;
+    }); })), setHeight = _16.setHeight, setWidth = _16.setWidth, setContentBodyHeight = _16.setContentBodyHeight, setDisplayItemCount = _16.setDisplayItemCount, setHeaderHeight = _16.setHeaderHeight, setFooterHeight = _16.setFooterHeight, setBottomBarHeight = _16.setBottomBarHeight, setSummaryHeight = _16.setSummaryHeight, setSummaryRowHeight = _16.setSummaryRowHeight, setItemHeight = _16.setItemHeight, setItemPadding = _16.setItemPadding, setLoading = _16.setLoading, setSpinning = _16.setSpinning, setDisabled = _16.setDisabled;
     // [Selector Group 7] Data & Column Setters - 데이터/열 설정자
     var _17 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         setData: s.setData,
@@ -1506,6 +1508,8 @@ function Table(props) {
             setFooterHeight(props.footerHeight);
         if (props.summaryHeight !== undefined)
             setSummaryHeight(props.summaryHeight);
+        if (props.summaryRowHeight !== undefined)
+            setSummaryRowHeight(props.summaryRowHeight);
         if (props.itemHeight !== undefined)
             setItemHeight(props.itemHeight);
         if (props.itemPadding !== undefined)
@@ -1515,12 +1519,14 @@ function Table(props) {
         props.headerHeight,
         props.footerHeight,
         props.summaryHeight,
+        props.summaryRowHeight,
         props.itemHeight,
         props.itemPadding,
         setWidth,
         setHeaderHeight,
         setFooterHeight,
         setSummaryHeight,
+        setSummaryRowHeight,
         setItemHeight,
         setItemPadding,
     ]);

package/cjs/components/TableSummary.js

@@ -64,61 +64,52 @@ var react_1 = require("react");
 var React = __importStar(require("react"));
 var shallow_1 = require("zustand/react/shallow");
 var store_1 = require("../store");
+var utils_1 = require("../utils");
 var TableColGroup_1 = __importDefault(require("./TableColGroup"));
 function TableSummary(_a) {
     var position = _a.position;
     // [Selector Group 1] Summary Configuration - 요약 설정
     var _b = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         summaryHeight: s.summaryHeight,
+        summaryRowHeight: s.summaryRowHeight,
         summary: s.summary,
         columns: s.columns,
-        columnsGroup: s.columnsGroup,
         frozenColumnIndex: s.frozenColumnIndex,
         variant: s.variant,
         data: s.data,
-    }); })), summaryHeight = _b.summaryHeight, summary = _b.summary, columns = _b.columns, columnsGroup = _b.columnsGroup, frozenColumnIndex = _b.frozenColumnIndex, variant = _b.variant, data = _b.data;
-    var summaryColumns = (0, react_1.useMemo)(function () {
-        var ignoreColumnCnt = 0;
-        return columns.slice(frozenColumnIndex).map(function (column, index) {
-            var _a, _b, _c;
-            var columnIndex = frozenColumnIndex + index;
-            var summaryColumn = (_a = summary === null || summary === void 0 ? void 0 : summary.columns) === null || _a === void 0 ? void 0 : _a.find(function (sc) { return sc.columnIndex === columnIndex; });
-            if (summaryColumn && ((_b = summaryColumn.colSpan) !== null && _b !== void 0 ? _b : 1) > 1) {
-                ignoreColumnCnt = ((_c = summaryColumn.colSpan) !== null && _c !== void 0 ? _c : 1) - 1;
-            }
-            else {
-                if (ignoreColumnCnt > 0) {
-                    ignoreColumnCnt--;
-                    return {};
-                }
-            }
-            return {
-                column: column,
-                columnIndex: columnIndex,
-                summaryColumn: summaryColumn,
-            };
-        });
-    }, [columns, frozenColumnIndex, summary]);
+    }); })), summaryHeight = _b.summaryHeight, summaryRowHeight = _b.summaryRowHeight, summary = _b.summary, columns = _b.columns, frozenColumnIndex = _b.frozenColumnIndex, variant = _b.variant, data = _b.data;
+    var summaryRows = (0, react_1.useMemo)(function () { return (0, utils_1.normalizeSummaryRows)(summary); }, [summary]);
+    var renderedRows = (0, react_1.useMemo)(function () {
+        var targetColumns = columns.slice(frozenColumnIndex);
+        return summaryRows.map(function (row, rowIndex) { return ({
+            row: row,
+            rowIndex: rowIndex,
+            cells: (0, utils_1.buildSummaryRowCells)(targetColumns, row.columns, frozenColumnIndex),
+        }); });
+    }, [summaryRows, columns, frozenColumnIndex]);
     return (React.createElement(SummaryTable, { variant: variant, summaryHeight: summaryHeight, position: position },
         React.createElement(TableColGroup_1.default, null),
-        React.createElement("tbody", { role: 'rfdg-summary' },
-            React.createElement("tr", null,
-                summaryColumns.map(function (_a, index) {
-                    var _b, _c;
-                    var column = _a.column, summaryColumn = _a.summaryColumn, columnIndex = _a.columnIndex;
-                    if (!column)
+        React.createElement("tbody", { role: 'rfdg-summary' }, renderedRows.map(function (_a) {
+            var _b, _c, _d;
+            var row = _a.row, rowIndex = _a.rowIndex, cells = _a.cells;
+            var rowHeight = (_b = row.height) !== null && _b !== void 0 ? _b : summaryRowHeight;
+            return (React.createElement("tr", { key: (_c = row.id) !== null && _c !== void 0 ? _c : rowIndex, className: ['bgrid-summary-row', (_d = row.className) !== null && _d !== void 0 ? _d : ''].filter(Boolean).join(' '), style: __assign(__assign({}, (rowHeight !== undefined ? { height: rowHeight } : {})), row.style) },
+                cells.map(function (cell, index) {
+                    var _a, _b;
+                    if (!cell || !cell.column)
                         return null;
+                    var column = cell.column, summaryColumn = cell.summaryColumn, columnIndex = cell.columnIndex;
                     if (!summaryColumn)
                         return React.createElement("td", { key: index });
-                    return (React.createElement("td", { key: index, style: {
-                            textAlign: summaryColumn.align,
-                        }, colSpan: (_b = summaryColumn.colSpan) !== null && _b !== void 0 ? _b : 1 }, (_c = summaryColumn.itemRender) === null || _c === void 0 ? void 0 : _c.call(summaryColumn, {
+                    return (React.createElement("td", { key: index, className: summaryColumn.className, style: __assign({ textAlign: summaryColumn.align }, summaryColumn.style), colSpan: (_a = summaryColumn.colSpan) !== null && _a !== void 0 ? _a : 1 }, (_b = summaryColumn.itemRender) === null || _b === void 0 ? void 0 : _b.call(summaryColumn, {
                         column: column,
                         columnIndex: columnIndex,
+                        rowIndex: rowIndex,
                         data: data,
                     })));
                 }),
-                React.createElement("td", { "data-none": true })))));
+                React.createElement("td", { "data-none": true })));
+        }))));
 }
 function SummaryTable(_a) {
     var summaryHeight = _a.summaryHeight, variant = _a.variant, position = _a.position, className = _a.className, children = _a.children, rest = __rest(_a, ["summaryHeight", "variant", "position", "className", "children"]);

package/cjs/components/TableSummaryFronzen.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -41,6 +52,7 @@ var React = __importStar(require("react"));
 var react_1 = require("react");
 var shallow_1 = require("zustand/react/shallow");
 var store_1 = require("../store");
+var utils_1 = require("../utils");
 var TableColGroupFrozen_1 = __importDefault(require("./TableColGroupFrozen"));
 var TableHead_1 = require("./TableHead");
 var TableSummary_1 = require("./TableSummary");
@@ -49,57 +61,47 @@ function TableSummaryFrozen(_a) {
     // [Selector Group 1] Summary Configuration - 요약 설정
     var _b = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         summaryHeight: s.summaryHeight,
+        summaryRowHeight: s.summaryRowHeight,
         summary: s.summary,
         columns: s.columns,
-        columnsGroup: s.columnsGroup,
         frozenColumnIndex: s.frozenColumnIndex,
         variant: s.variant,
         data: s.data,
         showLineNumber: s.showLineNumber,
         rowChecked: s.rowChecked,
-    }); })), summaryHeight = _b.summaryHeight, summary = _b.summary, columns = _b.columns, columnsGroup = _b.columnsGroup, frozenColumnIndex = _b.frozenColumnIndex, variant = _b.variant, data = _b.data, showLineNumber = _b.showLineNumber, rowChecked = _b.rowChecked;
+    }); })), summaryHeight = _b.summaryHeight, summaryRowHeight = _b.summaryRowHeight, summary = _b.summary, columns = _b.columns, frozenColumnIndex = _b.frozenColumnIndex, variant = _b.variant, data = _b.data, showLineNumber = _b.showLineNumber, rowChecked = _b.rowChecked;
     var hasRowSelection = !!rowChecked;
-    var summaryColumns = (0, react_1.useMemo)(function () {
-        var ignoreColumnCnt = 0;
-        return columns.slice(0, frozenColumnIndex).map(function (column, index) {
-            var _a, _b, _c;
-            var columnIndex = index;
-            var summaryColumn = (_a = summary === null || summary === void 0 ? void 0 : summary.columns) === null || _a === void 0 ? void 0 : _a.find(function (sc) { return sc.columnIndex === columnIndex; });
-            if (summaryColumn && ((_b = summaryColumn.colSpan) !== null && _b !== void 0 ? _b : 1) > 1) {
-                ignoreColumnCnt = ((_c = summaryColumn.colSpan) !== null && _c !== void 0 ? _c : 1) - 1;
-            }
-            else {
-                if (ignoreColumnCnt > 0) {
-                    ignoreColumnCnt--;
-                    return {};
-                }
-            }
-            return {
-                column: column,
-                columnIndex: columnIndex,
-                summaryColumn: summaryColumn,
-            };
-        });
-    }, [columns, frozenColumnIndex, summary]);
+    var summaryRows = (0, react_1.useMemo)(function () { return (0, utils_1.normalizeSummaryRows)(summary); }, [summary]);
+    var renderedRows = (0, react_1.useMemo)(function () {
+        var targetColumns = columns.slice(0, frozenColumnIndex);
+        return summaryRows.map(function (row, rowIndex) { return ({
+            row: row,
+            rowIndex: rowIndex,
+            cells: (0, utils_1.buildSummaryRowCells)(targetColumns, row.columns, 0),
+        }); });
+    }, [summaryRows, columns, frozenColumnIndex]);
     return (React.createElement(TableSummary_1.SummaryTable, { variant: variant, summaryHeight: summaryHeight, position: position },
         React.createElement(TableColGroupFrozen_1.default, null),
-        React.createElement("tbody", { role: 'rfdg-summay-frozen' },
-            React.createElement("tr", null,
+        React.createElement("tbody", { role: 'rfdg-summay-frozen' }, renderedRows.map(function (_a) {
+            var _b, _c, _d;
+            var row = _a.row, rowIndex = _a.rowIndex, cells = _a.cells;
+            var rowHeight = (_b = row.height) !== null && _b !== void 0 ? _b : summaryRowHeight;
+            return (React.createElement("tr", { key: (_c = row.id) !== null && _c !== void 0 ? _c : rowIndex, className: ['bgrid-summary-row', (_d = row.className) !== null && _d !== void 0 ? _d : ''].filter(Boolean).join(' '), style: __assign(__assign({}, (rowHeight !== undefined ? { height: rowHeight } : {})), row.style) },
                 showLineNumber && React.createElement(TableHead_1.HeadTd, { className: !hasRowSelection ? 'bordered' : '' }, "\u00A0"),
                 hasRowSelection && React.createElement("td", { className: 'bordered' }, "\u00A0"),
-                summaryColumns.map(function (_a, index) {
-                    var _b, _c;
-                    var column = _a.column, summaryColumn = _a.summaryColumn, columnIndex = _a.columnIndex;
-                    if (!column)
+                cells.map(function (cell, index) {
+                    var _a, _b;
+                    if (!cell || !cell.column)
                         return null;
+                    var column = cell.column, summaryColumn = cell.summaryColumn, columnIndex = cell.columnIndex;
                     if (!summaryColumn)
                         return React.createElement("td", { key: index });
-                    return (React.createElement("td", { key: index, style: {
-                            textAlign: summaryColumn.align,
-                        }, colSpan: (_b = summaryColumn.colSpan) !== null && _b !== void 0 ? _b : 1 }, (_c = summaryColumn.itemRender) === null || _c === void 0 ? void 0 : _c.call(summaryColumn, {
+                    return (React.createElement("td", { key: index, className: summaryColumn.className, style: __assign({ textAlign: summaryColumn.align }, summaryColumn.style), colSpan: (_a = summaryColumn.colSpan) !== null && _a !== void 0 ? _a : 1 }, (_b = summaryColumn.itemRender) === null || _b === void 0 ? void 0 : _b.call(summaryColumn, {
                         column: column,
                         columnIndex: columnIndex,
+                        rowIndex: rowIndex,
                         data: data,
                     })));
-                })))));
+                })));
+        }))));
 }

package/cjs/store/createAppStore.js

@@ -223,6 +223,7 @@ function AppStoreProvider(_a) {
                     visible: true,
                 },
                 summaryHeight: (_j = initialState === null || initialState === void 0 ? void 0 : initialState.summaryHeight) !== null && _j !== void 0 ? _j : 30,
+                summaryRowHeight: initialState === null || initialState === void 0 ? void 0 : initialState.summaryRowHeight,
                 itemHeight: (_k = initialState === null || initialState === void 0 ? void 0 : initialState.itemHeight) !== null && _k !== void 0 ? _k : 15,
                 itemPadding: (_l = initialState === null || initialState === void 0 ? void 0 : initialState.itemPadding) !== null && _l !== void 0 ? _l : 7,
                 frozenColumnIndex: (_m = initialState === null || initialState === void 0 ? void 0 : initialState.frozenColumnIndex) !== null && _m !== void 0 ? _m : 0,
@@ -917,6 +918,7 @@ function AppStoreProvider(_a) {
                 setHeaderHeight: function (headerHeight) { return set({ headerHeight: headerHeight }); },
                 setFooterHeight: function (footerHeight) { return set({ footerHeight: footerHeight }); },
                 setSummaryHeight: function (summaryHeight) { return set({ summaryHeight: summaryHeight }); },
+                setSummaryRowHeight: function (summaryRowHeight) { return set({ summaryRowHeight: summaryRowHeight }); },
                 setItemHeight: function (itemHeight) { return set({ itemHeight: itemHeight }); },
                 setItemPadding: function (itemPadding) { return set({ itemPadding: itemPadding }); },
                 setFrozenColumnIndex: function (frozenColumnIndex) { return set({ frozenColumnIndex: frozenColumnIndex }); },

package/cjs/utils/columnVisibility.js

@@ -94,21 +94,24 @@ function projectCellMergeOptions(options, visibleIndexByOriginalIndex) {
     }, {});
     return __assign(__assign({}, options), { columnsMap: columnsMap });
 }
-function projectSummary(summary, visibleIndexByOriginalIndex) {
+function projectSummaryColumn(sc, vMap) {
+    var _a;
+    var end = sc.columnIndex + ((_a = sc.colSpan) !== null && _a !== void 0 ? _a : 1);
+    var idxs = [];
+    for (var i = sc.columnIndex; i < end; i++) {
+        var v = vMap.get(i);
+        if (v !== undefined)
+            idxs.push(v);
+    }
+    return idxs.length ? [__assign(__assign({}, sc), { columnIndex: idxs[0], colSpan: idxs.length })] : [];
+}
+function projectSummary(summary, vMap) {
     if (!summary)
         return undefined;
-    var columns = summary.columns.flatMap(function (summaryColumn) {
-        var _a;
-        var originalEnd = summaryColumn.columnIndex + ((_a = summaryColumn.colSpan) !== null && _a !== void 0 ? _a : 1);
-        var visibleIndexes = [];
-        for (var index = summaryColumn.columnIndex; index < originalEnd; index += 1) {
-            var visibleIndex = visibleIndexByOriginalIndex.get(index);
-            if (visibleIndex !== undefined)
-                visibleIndexes.push(visibleIndex);
+    var projectCols = function (cols) { return cols.flatMap(function (c) { return projectSummaryColumn(c, vMap); }); };
+    return __assign(__assign(__assign({}, summary), (summary.columns ? { columns: projectCols(summary.columns) } : {})), (summary.rows
+        ? {
+            rows: summary.rows.map(function (r) { return (Array.isArray(r) ? projectCols(r) : __assign(__assign({}, r), { columns: projectCols(r.columns) })); }),
         }
-        if (!visibleIndexes.length)
-            return [];
-        return [__assign(__assign({}, summaryColumn), { columnIndex: visibleIndexes[0], colSpan: visibleIndexes.length })];
-    });
-    return __assign(__assign({}, summary), { columns: columns });
+        : {}));
 }

package/cjs/utils/index.js

@@ -46,3 +46,4 @@ __exportStar(require("./checkedIndexes"), exports);
 __exportStar(require("./exportData"), exports);
 __exportStar(require("./exportCsv"), exports);
 __exportStar(require("./exportExcel"), exports);
+__exportStar(require("./summary"), exports);

package/cjs/utils/summary.js

@@ -0,0 +1,55 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_SUMMARY_ROW_HEIGHT = void 0;
+exports.normalizeSummaryRows = normalizeSummaryRows;
+exports.computeSummaryHeight = computeSummaryHeight;
+exports.buildSummaryRowCells = buildSummaryRowCells;
+exports.DEFAULT_SUMMARY_ROW_HEIGHT = 30;
+function normalizeSummaryRows(summary) {
+    var _a, _b;
+    if (!summary)
+        return [];
+    if ((_a = summary.rows) === null || _a === void 0 ? void 0 : _a.length) {
+        return summary.rows.map(function (row, idx) { var _a; return Array.isArray(row) ? { id: idx, columns: row } : __assign(__assign({}, row), { id: (_a = row.id) !== null && _a !== void 0 ? _a : idx }); });
+    }
+    return ((_b = summary.columns) === null || _b === void 0 ? void 0 : _b.length) ? [{ id: 0, columns: summary.columns }] : [];
+}
+function computeSummaryHeight(options) {
+    var summary = options.summary, summaryHeight = options.summaryHeight, _a = options.summaryRowHeight, summaryRowHeight = _a === void 0 ? exports.DEFAULT_SUMMARY_ROW_HEIGHT : _a;
+    if (!summary)
+        return 0;
+    var rows = normalizeSummaryRows(summary);
+    if (!rows.length)
+        return 0;
+    return summaryHeight !== undefined
+        ? summaryHeight
+        : rows.reduce(function (acc, row) { var _a; return acc + ((_a = row.height) !== null && _a !== void 0 ? _a : summaryRowHeight); }, 0);
+}
+function buildSummaryRowCells(columns, summaryColumns, startIndex) {
+    if (startIndex === void 0) { startIndex = 0; }
+    var ignoreCnt = 0;
+    return columns.map(function (column, i) {
+        var _a, _b;
+        var columnIndex = startIndex + i;
+        var summaryColumn = summaryColumns === null || summaryColumns === void 0 ? void 0 : summaryColumns.find(function (sc) { return sc.columnIndex === columnIndex; });
+        if (summaryColumn && ((_a = summaryColumn.colSpan) !== null && _a !== void 0 ? _a : 1) > 1) {
+            ignoreCnt = ((_b = summaryColumn.colSpan) !== null && _b !== void 0 ? _b : 1) - 1;
+        }
+        else if (ignoreCnt > 0) {
+            ignoreCnt--;
+            return null;
+        }
+        return { column: column, columnIndex: columnIndex, summaryColumn: summaryColumn };
+    });
+}

package/esm/BGrid.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Table from './components/Table';
-import { createPivotData, createRowHeightMetrics, buildHeaderMatrix, countVisibleCheckedIndexes, findDuplicateColumnIds, getCellValueByRowKey, getColumnId, getColumnKeyToken, getFrozenColumnsWidth, getTreeRowPath, processDataQuery, projectTreeData, projectColumnVisibility, resolveStatusOptions, resolvePaginationViewOptions, resolveScrollbarOptions, shouldRenderBottomBar, } from './utils';
+import { createPivotData, createRowHeightMetrics, buildHeaderMatrix, countVisibleCheckedIndexes, findDuplicateColumnIds, getCellValueByRowKey, getColumnId, getColumnKeyToken, getFrozenColumnsWidth, getTreeRowPath, processDataQuery, projectTreeData, projectColumnVisibility, resolveStatusOptions, resolvePaginationViewOptions, resolveScrollbarOptions, computeSummaryHeight, DEFAULT_SUMMARY_ROW_HEIGHT, shouldRenderBottomBar, } from './utils';
 import { AppStoreProvider } from './store';
 import { TreeContext } from './components/TreeContext';
 function computeModelColumns(columns, frozenColumnIndex, duplicateToolboxColumnIds) {
@@ -22,7 +22,7 @@ function computeModelColumns(columns, frozenColumnIndex, duplicateToolboxColumnI
         };
     });
 }
-export function BGrid({ ref, width, height, headerHeight = 30, footerHeight, summaryHeight = 30, itemHeight = 15, itemPadding = 7, getRowHeight, columns, columnsGroup, columnGroups, onChangeColumns, frozenColumnIndex = 0, frozenRowCount = 0, data = [], page, scrollbar, status, pagination, bottomBarHeight, scrollTop = 0, scrollLeft = 0, className, style, rowChecked, sort, onClick, loading = false, spinning, disabled, rowKey, selectedRowKey, editable, onChangeData, showLineNumber, msg, getRowClassName, editTrigger = 'dblclick', cellMergeOptions, cellSelectionOptions, cellNavigationOptions, variant, summary, columnSortable, reorder, pivot, dataControl, icons, columnVisibility, searchOptions, contextMenuOptions, tree, }) {
+export function BGrid({ ref, width, height, headerHeight = 30, footerHeight, summaryHeight: explicitSummaryHeight, summaryRowHeight = DEFAULT_SUMMARY_ROW_HEIGHT, itemHeight = 15, itemPadding = 7, getRowHeight, columns, columnsGroup, columnGroups, onChangeColumns, frozenColumnIndex = 0, frozenRowCount = 0, data = [], page, scrollbar, status, pagination, bottomBarHeight, scrollTop = 0, scrollLeft = 0, className, style, rowChecked, sort, onClick, loading = false, spinning, disabled, rowKey, selectedRowKey, editable, onChangeData, showLineNumber, msg, getRowClassName, editTrigger = 'dblclick', cellMergeOptions, cellSelectionOptions, cellNavigationOptions, variant, summary, columnSortable, reorder, pivot, dataControl, icons, columnVisibility, searchOptions, contextMenuOptions, tree, }) {
     const [uncontrolledExpandedRowKeys, setUncontrolledExpandedRowKeys] = React.useState(() => [
         ...(tree?.defaultExpandedRowKeys ?? []),
     ]);
@@ -535,6 +535,11 @@ export function BGrid({ ref, width, height, headerHeight = 30, footerHeight, sum
             console.warn('[BGrid] Both bottomBarHeight and footerHeight were provided. bottomBarHeight takes precedence.');
         }
     }, [bottomBarHeight, footerHeight]);
+    const resolvedSummaryHeight = React.useMemo(() => computeSummaryHeight({
+        summary: resolvedSummary,
+        summaryHeight: explicitSummaryHeight,
+        summaryRowHeight,
+    }), [resolvedSummary, explicitSummaryHeight, summaryRowHeight]);
     const initialStoreState = React.useMemo(() => {
         const initialWidth = width !== undefined ? Math.max(width, 100) : 0;
         const initialHeight = height !== undefined ? Math.max(height, 100) : 0;
@@ -543,7 +548,7 @@ export function BGrid({ ref, width, height, headerHeight = 30, footerHeight, sum
             ? Math.max(initialHeight -
                 headerHeight -
                 (initialShowBottomBar ? resolvedBottomBarHeight : 0) -
-                (resolvedSummary ? summaryHeight : 0) -
+                (resolvedSummary ? resolvedSummaryHeight : 0) -
                 containerBorderWidth * 2, 0)
             : 0;
         const displayItemCount = contentBodyHeight > 0 ? Math.ceil(contentBodyHeight / (itemHeight + itemPadding * 2)) : 0;
@@ -564,7 +569,8 @@ export function BGrid({ ref, width, height, headerHeight = 30, footerHeight, sum
             scrollbar: resolvedScrollbar,
             status: resolvedStatus,
             pagination: resolvedPagination,
-            summaryHeight,
+            summaryHeight: resolvedSummaryHeight,
+            summaryRowHeight,
             itemHeight,
             itemPadding,
             frozenColumnIndex: resolvedFrozenColumnIndex,
@@ -635,7 +641,8 @@ export function BGrid({ ref, width, height, headerHeight = 30, footerHeight, sum
         resolvedScrollbar,
         resolvedStatus,
         resolvedPagination,
-        summaryHeight,
+        resolvedSummaryHeight,
+        summaryRowHeight,
         itemHeight,
         itemPadding,
         rowHeightMetrics,
@@ -705,7 +712,8 @@ export function BGrid({ ref, width, height, headerHeight = 30, footerHeight, sum
                 scrollbar: resolvedScrollbar,
                 status: resolvedStatus,
                 pagination: resolvedPagination,
-                summaryHeight,
+                summaryHeight: resolvedSummaryHeight,
+                summaryRowHeight,
                 itemHeight,
                 itemPadding,
                 rowHeightMetrics,

package/esm/components/Table.js

@@ -58,11 +58,12 @@ function Table(props) {
         itemPadding: s.itemPadding,
     })));
     // [Selector Group 2] Header, Footer, Summary - 헤더/푸터/요약
-    const { headerHeight, footerHeight, bottomBarHeight, summaryHeight } = useAppStore(useShallow(s => ({
+    const { headerHeight, footerHeight, bottomBarHeight, summaryHeight, summaryRowHeight } = useAppStore(useShallow(s => ({
         headerHeight: s.headerHeight,
         footerHeight: s.footerHeight,
         bottomBarHeight: s.bottomBarHeight,
         summaryHeight: s.summaryHeight,
+        summaryRowHeight: s.summaryRowHeight,
     })));
     // [Selector Group 3] Scroll State - 스크롤 상태
     const { scrollLeft, scrollTop } = useAppStore(useShallow(s => ({
@@ -113,7 +114,7 @@ function Table(props) {
         cellInteractionSession: s.cellInteractionSession,
     })));
     // [Selector Group 6] State Setters - 차원 설정자
-    const { setHeight, setWidth, setContentBodyHeight, setDisplayItemCount, setHeaderHeight, setFooterHeight, setBottomBarHeight, setSummaryHeight, setItemHeight, setItemPadding, setLoading, setSpinning, setDisabled, } = useAppStore(useShallow(s => ({
+    const { setHeight, setWidth, setContentBodyHeight, setDisplayItemCount, setHeaderHeight, setFooterHeight, setBottomBarHeight, setSummaryHeight, setSummaryRowHeight, setItemHeight, setItemPadding, setLoading, setSpinning, setDisabled, } = useAppStore(useShallow(s => ({
         setHeight: s.setHeight,
         setWidth: s.setWidth,
         setContentBodyHeight: s.setContentBodyHeight,
@@ -122,6 +123,7 @@ function Table(props) {
         setFooterHeight: s.setFooterHeight,
         setBottomBarHeight: s.setBottomBarHeight,
         setSummaryHeight: s.setSummaryHeight,
+        setSummaryRowHeight: s.setSummaryRowHeight,
         setItemHeight: s.setItemHeight,
         setItemPadding: s.setItemPadding,
         setLoading: s.setLoading,
@@ -1314,6 +1316,8 @@ function Table(props) {
             setFooterHeight(props.footerHeight);
         if (props.summaryHeight !== undefined)
             setSummaryHeight(props.summaryHeight);
+        if (props.summaryRowHeight !== undefined)
+            setSummaryRowHeight(props.summaryRowHeight);
         if (props.itemHeight !== undefined)
             setItemHeight(props.itemHeight);
         if (props.itemPadding !== undefined)
@@ -1323,12 +1327,14 @@ function Table(props) {
         props.headerHeight,
         props.footerHeight,
         props.summaryHeight,
+        props.summaryRowHeight,
         props.itemHeight,
         props.itemPadding,
         setWidth,
         setHeaderHeight,
         setFooterHeight,
         setSummaryHeight,
+        setSummaryRowHeight,
         setItemHeight,
         setItemPadding,
     ]);

package/esm/components/TableSummary.js

@@ -2,57 +2,54 @@ import { useMemo } from 'react';
 import * as React from 'react';
 import { useShallow } from 'zustand/react/shallow';
 import { useAppStore } from '../store';
+import { buildSummaryRowCells, normalizeSummaryRows } from '../utils';
 import TableColGroup from './TableColGroup';
 export function TableSummary({ position }) {
     // [Selector Group 1] Summary Configuration - 요약 설정
-    const { summaryHeight, summary, columns, columnsGroup, frozenColumnIndex, variant, data } = useAppStore(useShallow(s => ({
+    const { summaryHeight, summaryRowHeight, summary, columns, frozenColumnIndex, variant, data } = useAppStore(useShallow(s => ({
         summaryHeight: s.summaryHeight,
+        summaryRowHeight: s.summaryRowHeight,
         summary: s.summary,
         columns: s.columns,
-        columnsGroup: s.columnsGroup,
         frozenColumnIndex: s.frozenColumnIndex,
         variant: s.variant,
         data: s.data,
     })));
-    const summaryColumns = useMemo(() => {
-        let ignoreColumnCnt = 0;
-        return columns.slice(frozenColumnIndex).map((column, index) => {
-            const columnIndex = frozenColumnIndex + index;
-            const summaryColumn = summary?.columns?.find(sc => sc.columnIndex === columnIndex);
-            if (summaryColumn && (summaryColumn.colSpan ?? 1) > 1) {
-                ignoreColumnCnt = (summaryColumn.colSpan ?? 1) - 1;
-            }
-            else {
-                if (ignoreColumnCnt > 0) {
-                    ignoreColumnCnt--;
-                    return {};
-                }
-            }
-            return {
-                column,
-                columnIndex,
-                summaryColumn,
-            };
-        });
-    }, [columns, frozenColumnIndex, summary]);
+    const summaryRows = useMemo(() => normalizeSummaryRows(summary), [summary]);
+    const renderedRows = useMemo(() => {
+        const targetColumns = columns.slice(frozenColumnIndex);
+        return summaryRows.map((row, rowIndex) => ({
+            row,
+            rowIndex,
+            cells: buildSummaryRowCells(targetColumns, row.columns, frozenColumnIndex),
+        }));
+    }, [summaryRows, columns, frozenColumnIndex]);
     return (React.createElement(SummaryTable, { variant: variant, summaryHeight: summaryHeight, position: position },
         React.createElement(TableColGroup, null),
-        React.createElement("tbody", { role: 'rfdg-summary' },
-            React.createElement("tr", null,
-                summaryColumns.map(({ column, summaryColumn, columnIndex }, index) => {
-                    if (!column)
+        React.createElement("tbody", { role: 'rfdg-summary' }, renderedRows.map(({ row, rowIndex, cells }) => {
+            const rowHeight = row.height ?? summaryRowHeight;
+            return (React.createElement("tr", { key: row.id ?? rowIndex, className: ['bgrid-summary-row', row.className ?? ''].filter(Boolean).join(' '), style: {
+                    ...(rowHeight !== undefined ? { height: rowHeight } : {}),
+                    ...row.style,
+                } },
+                cells.map((cell, index) => {
+                    if (!cell || !cell.column)
                         return null;
+                    const { column, summaryColumn, columnIndex } = cell;
                     if (!summaryColumn)
                         return React.createElement("td", { key: index });
-                    return (React.createElement("td", { key: index, style: {
+                    return (React.createElement("td", { key: index, className: summaryColumn.className, style: {
                             textAlign: summaryColumn.align,
+                            ...summaryColumn.style,
                         }, colSpan: summaryColumn.colSpan ?? 1 }, summaryColumn.itemRender?.({
                         column,
                         columnIndex,
+                        rowIndex,
                         data,
                     })));
                 }),
-                React.createElement("td", { "data-none": true })))));
+                React.createElement("td", { "data-none": true })));
+        }))));
 }
 export function SummaryTable({ summaryHeight, variant, position, className, children, ...rest }) {
     return (React.createElement("table", { className: [

package/esm/components/TableSummaryFronzen.js

@@ -2,16 +2,17 @@ import * as React from 'react';
 import { useMemo } from 'react';
 import { useShallow } from 'zustand/react/shallow';
 import { useAppStore } from '../store';
+import { buildSummaryRowCells, normalizeSummaryRows } from '../utils';
 import TableColGroupFrozen from './TableColGroupFrozen';
 import { HeadTd } from './TableHead';
 import { SummaryTable } from './TableSummary';
 export function TableSummaryFrozen({ position }) {
     // [Selector Group 1] Summary Configuration - 요약 설정
-    const { summaryHeight, summary, columns, columnsGroup, frozenColumnIndex, variant, data, showLineNumber, rowChecked } = useAppStore(useShallow(s => ({
+    const { summaryHeight, summaryRowHeight, summary, columns, frozenColumnIndex, variant, data, showLineNumber, rowChecked, } = useAppStore(useShallow(s => ({
         summaryHeight: s.summaryHeight,
+        summaryRowHeight: s.summaryRowHeight,
         summary: s.summary,
         columns: s.columns,
-        columnsGroup: s.columnsGroup,
         frozenColumnIndex: s.frozenColumnIndex,
         variant: s.variant,
         data: s.data,
@@ -19,44 +20,40 @@ export function TableSummaryFrozen({ position }) {
         rowChecked: s.rowChecked,
     })));
     const hasRowSelection = !!rowChecked;
-    const summaryColumns = useMemo(() => {
-        let ignoreColumnCnt = 0;
-        return columns.slice(0, frozenColumnIndex).map((column, index) => {
-            const columnIndex = index;
-            const summaryColumn = summary?.columns?.find(sc => sc.columnIndex === columnIndex);
-            if (summaryColumn && (summaryColumn.colSpan ?? 1) > 1) {
-                ignoreColumnCnt = (summaryColumn.colSpan ?? 1) - 1;
-            }
-            else {
-                if (ignoreColumnCnt > 0) {
-                    ignoreColumnCnt--;
-                    return {};
-                }
-            }
-            return {
-                column,
-                columnIndex,
-                summaryColumn,
-            };
-        });
-    }, [columns, frozenColumnIndex, summary]);
+    const summaryRows = useMemo(() => normalizeSummaryRows(summary), [summary]);
+    const renderedRows = useMemo(() => {
+        const targetColumns = columns.slice(0, frozenColumnIndex);
+        return summaryRows.map((row, rowIndex) => ({
+            row,
+            rowIndex,
+            cells: buildSummaryRowCells(targetColumns, row.columns, 0),
+        }));
+    }, [summaryRows, columns, frozenColumnIndex]);
     return (React.createElement(SummaryTable, { variant: variant, summaryHeight: summaryHeight, position: position },
         React.createElement(TableColGroupFrozen, null),
-        React.createElement("tbody", { role: 'rfdg-summay-frozen' },
-            React.createElement("tr", null,
+        React.createElement("tbody", { role: 'rfdg-summay-frozen' }, renderedRows.map(({ row, rowIndex, cells }) => {
+            const rowHeight = row.height ?? summaryRowHeight;
+            return (React.createElement("tr", { key: row.id ?? rowIndex, className: ['bgrid-summary-row', row.className ?? ''].filter(Boolean).join(' '), style: {
+                    ...(rowHeight !== undefined ? { height: rowHeight } : {}),
+                    ...row.style,
+                } },
                 showLineNumber && React.createElement(HeadTd, { className: !hasRowSelection ? 'bordered' : '' }, "\u00A0"),
                 hasRowSelection && React.createElement("td", { className: 'bordered' }, "\u00A0"),
-                summaryColumns.map(({ column, summaryColumn, columnIndex }, index) => {
-                    if (!column)
+                cells.map((cell, index) => {
+                    if (!cell || !cell.column)
                         return null;
+                    const { column, summaryColumn, columnIndex } = cell;
                     if (!summaryColumn)
                         return React.createElement("td", { key: index });
-                    return (React.createElement("td", { key: index, style: {
+                    return (React.createElement("td", { key: index, className: summaryColumn.className, style: {
                             textAlign: summaryColumn.align,
+                            ...summaryColumn.style,
                         }, colSpan: summaryColumn.colSpan ?? 1 }, summaryColumn.itemRender?.({
                         column,
                         columnIndex,
+                        rowIndex,
                         data,
                     })));
-                })))));
+                })));
+        }))));
 }

package/esm/store/createAppStore.js

@@ -77,6 +77,7 @@ export function AppStoreProvider({ children, initialState }) {
                 visible: true,
             },
             summaryHeight: initialState?.summaryHeight ?? 30,
+            summaryRowHeight: initialState?.summaryRowHeight,
             itemHeight: initialState?.itemHeight ?? 15,
             itemPadding: initialState?.itemPadding ?? 7,
             frozenColumnIndex: initialState?.frozenColumnIndex ?? 0,
@@ -779,6 +780,7 @@ export function AppStoreProvider({ children, initialState }) {
             setHeaderHeight: headerHeight => set({ headerHeight }),
             setFooterHeight: footerHeight => set({ footerHeight }),
             setSummaryHeight: summaryHeight => set({ summaryHeight }),
+            setSummaryRowHeight: summaryRowHeight => set({ summaryRowHeight }),
             setItemHeight: itemHeight => set({ itemHeight }),
             setItemPadding: itemPadding => set({ itemPadding }),
             setFrozenColumnIndex: frozenColumnIndex => set({ frozenColumnIndex }),

package/esm/utils/columnVisibility.js

@@ -66,24 +66,27 @@ function projectCellMergeOptions(options, visibleIndexByOriginalIndex) {
     }, {});
     return { ...options, columnsMap };
 }
-function projectSummary(summary, visibleIndexByOriginalIndex) {
+function projectSummaryColumn(sc, vMap) {
+    const end = sc.columnIndex + (sc.colSpan ?? 1);
+    const idxs = [];
+    for (let i = sc.columnIndex; i < end; i++) {
+        const v = vMap.get(i);
+        if (v !== undefined)
+            idxs.push(v);
+    }
+    return idxs.length ? [{ ...sc, columnIndex: idxs[0], colSpan: idxs.length }] : [];
+}
+function projectSummary(summary, vMap) {
     if (!summary)
         return undefined;
-    const columns = summary.columns.flatMap(summaryColumn => {
-        const originalEnd = summaryColumn.columnIndex + (summaryColumn.colSpan ?? 1);
-        const visibleIndexes = [];
-        for (let index = summaryColumn.columnIndex; index < originalEnd; index += 1) {
-            const visibleIndex = visibleIndexByOriginalIndex.get(index);
-            if (visibleIndex !== undefined)
-                visibleIndexes.push(visibleIndex);
-        }
-        if (!visibleIndexes.length)
-            return [];
-        return [{
-                ...summaryColumn,
-                columnIndex: visibleIndexes[0],
-                colSpan: visibleIndexes.length,
-            }];
-    });
-    return { ...summary, columns };
+    const projectCols = (cols) => cols.flatMap(c => projectSummaryColumn(c, vMap));
+    return {
+        ...summary,
+        ...(summary.columns ? { columns: projectCols(summary.columns) } : {}),
+        ...(summary.rows
+            ? {
+                rows: summary.rows.map(r => (Array.isArray(r) ? projectCols(r) : { ...r, columns: projectCols(r.columns) })),
+            }
+            : {}),
+    };
 }

package/esm/utils/index.js

@@ -30,3 +30,4 @@ export * from './checkedIndexes';
 export * from './exportData';
 export * from './exportCsv';
 export * from './exportExcel';
+export * from './summary';

package/esm/utils/summary.js

@@ -0,0 +1,35 @@
+export const DEFAULT_SUMMARY_ROW_HEIGHT = 30;
+export function normalizeSummaryRows(summary) {
+    if (!summary)
+        return [];
+    if (summary.rows?.length) {
+        return summary.rows.map((row, idx) => Array.isArray(row) ? { id: idx, columns: row } : { ...row, id: row.id ?? idx });
+    }
+    return summary.columns?.length ? [{ id: 0, columns: summary.columns }] : [];
+}
+export function computeSummaryHeight(options) {
+    const { summary, summaryHeight, summaryRowHeight = DEFAULT_SUMMARY_ROW_HEIGHT } = options;
+    if (!summary)
+        return 0;
+    const rows = normalizeSummaryRows(summary);
+    if (!rows.length)
+        return 0;
+    return summaryHeight !== undefined
+        ? summaryHeight
+        : rows.reduce((acc, row) => acc + (row.height ?? summaryRowHeight), 0);
+}
+export function buildSummaryRowCells(columns, summaryColumns, startIndex = 0) {
+    let ignoreCnt = 0;
+    return columns.map((column, i) => {
+        const columnIndex = startIndex + i;
+        const summaryColumn = summaryColumns?.find(sc => sc.columnIndex === columnIndex);
+        if (summaryColumn && (summaryColumn.colSpan ?? 1) > 1) {
+            ignoreCnt = (summaryColumn.colSpan ?? 1) - 1;
+        }
+        else if (ignoreCnt > 0) {
+            ignoreCnt--;
+            return null;
+        }
+        return { column, columnIndex, summaryColumn };
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "beautiful-grid",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "A beautiful, powerful, open-source React Data Grid.",
   "homepage": "https://bgrid.axisj.com",
   "bugs": {

package/style.css

@@ -497,7 +497,8 @@
   box-shadow: var(--bgrid-frozen-boundary-shadow);
 }
 
-.bgrid-body-table > tbody > tr > td[data-none] {
+.bgrid-body-table > tbody > tr > td[data-none],
+.bgrid-summary-table > tbody > tr > td[data-none] {
   border-right: none;
 }
 
@@ -768,11 +769,11 @@
   border: 0 !important;
 }
 
-.bgrid-body-vertical-bordered > tbody > tr > td {
+.bgrid-body-vertical-bordered > tbody > tr > td:not([data-none]) {
   border-right: 1px solid var(--bgrid-border-color-light, var(--bgrid-border-color-base));
 }
 
-.bgrid-summary-vertical-bordered > tbody > tr > td {
+.bgrid-summary-vertical-bordered > tbody > tr > td:not([data-none]) {
   border-right: 1px solid var(--bgrid-border-color-light, var(--bgrid-border-color-base));
 }
 
@@ -795,6 +796,10 @@
   padding: 0 6.5px;
 }
 
+.bgrid-summary-table > tbody > tr > td[data-none] {
+  border-right: none !important;
+}
+
 .bgrid-page-no {
   transition: all 0.3s;
   display: flex;

package/types/BGrid.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { BGridProps } from './types';
-export declare function BGrid<T = Record<string, any>>({ ref, width, height, headerHeight, footerHeight, summaryHeight, itemHeight, itemPadding, getRowHeight, columns, columnsGroup, columnGroups, onChangeColumns, frozenColumnIndex, frozenRowCount, data, page, scrollbar, status, pagination, bottomBarHeight, scrollTop, scrollLeft, className, style, rowChecked, sort, onClick, loading, spinning, disabled, rowKey, selectedRowKey, editable, onChangeData, showLineNumber, msg, getRowClassName, editTrigger, cellMergeOptions, cellSelectionOptions, cellNavigationOptions, variant, summary, columnSortable, reorder, pivot, dataControl, icons, columnVisibility, searchOptions, contextMenuOptions, tree, }: BGridProps<T>): React.JSX.Element;
+export declare function BGrid<T = Record<string, any>>({ ref, width, height, headerHeight, footerHeight, summaryHeight: explicitSummaryHeight, summaryRowHeight, itemHeight, itemPadding, getRowHeight, columns, columnsGroup, columnGroups, onChangeColumns, frozenColumnIndex, frozenRowCount, data, page, scrollbar, status, pagination, bottomBarHeight, scrollTop, scrollLeft, className, style, rowChecked, sort, onClick, loading, spinning, disabled, rowKey, selectedRowKey, editable, onChangeData, showLineNumber, msg, getRowClassName, editTrigger, cellMergeOptions, cellSelectionOptions, cellNavigationOptions, variant, summary, columnSortable, reorder, pivot, dataControl, icons, columnVisibility, searchOptions, contextMenuOptions, tree, }: BGridProps<T>): React.JSX.Element;

package/types/components/Table.d.ts

@@ -13,6 +13,7 @@ interface Props<T> {
     status?: BGridResolvedStatusOptions;
     pagination?: BGridResolvedPaginationViewOptions;
     summaryHeight?: number;
+    summaryRowHeight?: number;
     itemHeight?: number;
     itemPadding?: number;
     rowHeightMetrics: BGridRowHeightMetrics;

package/types/store/createAppStore.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ReactNode } from 'react';
 import { StoreApi } from 'zustand';
 import { AppModel, AppStore } from '../types';
-export type AppStoreInitialState<T = any> = Partial<Pick<AppModel<T>, 'width' | 'height' | 'headerHeight' | 'footerHeight' | 'bottomBarHeight' | 'scrollbar' | 'status' | 'pagination' | 'summaryHeight' | 'itemHeight' | 'itemPadding' | 'frozenColumnIndex' | 'frozenRowCount' | 'frozenRowsHeight' | 'frozenColumnsWidth' | 'columns' | 'columnsGroup' | 'columnGroups' | 'data' | 'sourceData' | 'sourceIndexByVisibleIndex' | 'visibleIndexBySourceIndex' | 'contentBodyHeight' | 'displayItemCount' | 'checkedIndexesMap' | 'rowChecked' | 'checkedAll' | 'sort' | 'sortParams' | 'dataQuery' | 'activeCell' | 'activeCellHost' | 'cellInteractionSession' | 'cellNavigationOptions' | 'dataControl' | 'filterDrafts' | 'activeToolboxColumnId' | 'columnVisibilityState' | 'searchOptions' | 'contextMenuOptions' | 'searchOpen' | 'searchQuery' | 'searchStatus' | 'searchMatches' | 'activeSearchMatchIndex' | 'contextMenuState' | 'icons' | 'page' | 'displayPaginationLength' | 'loading' | 'disabled' | 'spinning' | 'scrollTop' | 'scrollLeft' | 'rowKey' | 'selectedRowKey' | 'editable' | 'editTrigger' | 'showLineNumber' | 'msg' | 'getRowClassName' | 'cellMergeOptions' | 'variant' | 'summary' | 'columnSortable' | 'reorder' | 'className' | 'style' | 'onClick' | 'onChangeColumns' | 'onChangeData' | 'onLoadMore'>>;
+export type AppStoreInitialState<T = any> = Partial<Pick<AppModel<T>, 'width' | 'height' | 'headerHeight' | 'footerHeight' | 'bottomBarHeight' | 'scrollbar' | 'status' | 'pagination' | 'summaryHeight' | 'summaryRowHeight' | 'itemHeight' | 'itemPadding' | 'frozenColumnIndex' | 'frozenRowCount' | 'frozenRowsHeight' | 'frozenColumnsWidth' | 'columns' | 'columnsGroup' | 'columnGroups' | 'data' | 'sourceData' | 'sourceIndexByVisibleIndex' | 'visibleIndexBySourceIndex' | 'contentBodyHeight' | 'displayItemCount' | 'checkedIndexesMap' | 'rowChecked' | 'checkedAll' | 'sort' | 'sortParams' | 'dataQuery' | 'activeCell' | 'activeCellHost' | 'cellInteractionSession' | 'cellNavigationOptions' | 'dataControl' | 'filterDrafts' | 'activeToolboxColumnId' | 'columnVisibilityState' | 'searchOptions' | 'contextMenuOptions' | 'searchOpen' | 'searchQuery' | 'searchStatus' | 'searchMatches' | 'activeSearchMatchIndex' | 'contextMenuState' | 'icons' | 'page' | 'displayPaginationLength' | 'loading' | 'disabled' | 'spinning' | 'scrollTop' | 'scrollLeft' | 'rowKey' | 'selectedRowKey' | 'editable' | 'editTrigger' | 'showLineNumber' | 'msg' | 'getRowClassName' | 'cellMergeOptions' | 'variant' | 'summary' | 'columnSortable' | 'reorder' | 'className' | 'style' | 'onClick' | 'onChangeColumns' | 'onChangeData' | 'onLoadMore'>>;
 interface AppStoreProviderProps<T = any> {
     children: ReactNode;
     initialState?: AppStoreInitialState<T>;

package/types/types.d.ts

@@ -219,6 +219,7 @@ export interface BGridCellMergeColumn {
 export interface BGridSummaryItemRenderProps<T> {
     column: BGridColumn<T>;
     columnIndex: number;
+    rowIndex?: number;
     data: BGridDataItem<T>[];
 }
 export interface BGridSummaryColumn<T> {
@@ -226,9 +227,22 @@ export interface BGridSummaryColumn<T> {
     align?: AlignDirection;
     colSpan?: number;
     className?: string;
+    style?: React.CSSProperties;
     getClassName?: (key: string | string[]) => string;
     itemRender?: (props: BGridSummaryItemRenderProps<T>) => React.ReactNode;
 }
+export interface BGridSummaryRow<T> {
+    id?: string | number;
+    className?: string;
+    style?: React.CSSProperties;
+    height?: number;
+    columns: BGridSummaryColumn<T>[];
+}
+export interface BGridSummaryOptions<T> {
+    columns?: BGridSummaryColumn<T>[];
+    rows?: (BGridSummaryRow<T> | BGridSummaryColumn<T>[])[];
+    position: 'top' | 'bottom';
+}
 export declare enum BGridDataItemStatus {
     new = 0,
     edit = 1,
@@ -791,6 +805,7 @@ export interface BGridProps<T> {
     footerHeight?: number;
     bottomBarHeight?: number;
     summaryHeight?: number;
+    summaryRowHeight?: number;
     itemHeight?: number;
     itemPadding?: number;
     /**
@@ -897,10 +912,7 @@ export interface BGridProps<T> {
     };
     cellNavigationOptions?: BGridCellNavigationOptions;
     variant?: 'default' | 'vertical-bordered';
-    summary?: {
-        columns: BGridSummaryColumn<T>[];
-        position: 'top' | 'bottom';
-    };
+    summary?: BGridSummaryOptions<T>;
     columnSortable?: boolean;
     reorder?: BGridReorderInfo<T>;
     reorderingInfo?: BGridReorderingInfo;
@@ -989,6 +1001,7 @@ export interface AppModel<T> extends BGridProps<T> {
     footerHeight: number;
     bottomBarHeight: number;
     summaryHeight: number;
+    summaryRowHeight?: number;
     itemHeight: number;
     itemPadding: number;
     frozenColumnIndex: number;
@@ -1099,6 +1112,7 @@ export interface AppActions<T> {
     setFooterHeight: (footerHeight: number) => void;
     setBottomBarHeight: (bottomBarHeight: number) => void;
     setSummaryHeight: (summaryHeight: number) => void;
+    setSummaryRowHeight: (summaryRowHeight?: number) => void;
     setItemHeight: (itemHeight: number) => void;
     setItemPadding: (itemPadding: number) => void;
     setFrozenColumnIndex: (frozenColumnIndex: number) => void;

package/types/utils/index.d.ts

@@ -30,3 +30,4 @@ export * from './checkedIndexes';
 export * from './exportData';
 export * from './exportCsv';
 export * from './exportExcel';
+export * from './summary';

package/types/utils/summary.d.ts

@@ -0,0 +1,13 @@
+import { BGridColumn, BGridSummaryColumn, BGridSummaryOptions, BGridSummaryRow } from '../types';
+export declare const DEFAULT_SUMMARY_ROW_HEIGHT = 30;
+export declare function normalizeSummaryRows<T>(summary?: BGridSummaryOptions<T>): BGridSummaryRow<T>[];
+export declare function computeSummaryHeight<T>(options: {
+    summary?: BGridSummaryOptions<T>;
+    summaryHeight?: number;
+    summaryRowHeight?: number;
+}): number;
+export declare function buildSummaryRowCells<T>(columns: BGridColumn<T>[], summaryColumns?: BGridSummaryColumn<T>[], startIndex?: number): ({
+    column: BGridColumn<T>;
+    columnIndex: number;
+    summaryColumn?: BGridSummaryColumn<T>;
+} | null)[];