beautiful-grid 1.0.12 → 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,
@@ -759,13 +768,15 @@ function BGrid(_a) {
     ]);
     return (React.createElement(store_1.AppStoreProvider, { initialState: initialStoreState },
         React.createElement(TreeContext_1.TreeContext.Provider, { value: treeContextValue },
-            React.createElement(Table_1.default, { ref: ref, columns: computedColumns,
+            React.createElement(Table_1.default, { ref: ref, sourceColumns: resolvedColumns,
+                columns: computedColumns,
                 columnsGroup: visibilityProjection.columnsGroup,
                 columnGroups: visibilityProjection.columnGroups,
                 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

@@ -166,6 +166,7 @@ function Table(props) {
     var _a;
     var _this = this;
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
+    var store = (0, store_1.useAppStoreApi)();
     var cellSelectionOptions = props.cellSelectionOptions, onChangeData = props.onChangeData, sourceIndexByVisibleIndex = props.sourceIndexByVisibleIndex;
     var cellSelectionEnabled = (_b = cellSelectionOptions === null || cellSelectionOptions === void 0 ? void 0 : cellSelectionOptions.enabled) !== null && _b !== void 0 ? _b : true;
     var rowKeyRegistryState = (0, react_1.useRef)({
@@ -199,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,
@@ -258,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,
@@ -657,12 +660,46 @@ function Table(props) {
     var scrollPropsRef = (0, react_1.useRef)({ top: props.scrollTop, left: props.scrollLeft });
     var syncedDataPropRef = (0, react_1.useRef)(props.data);
     var _23 = __read(React.useState(null), 2), rowScrollRequest = _23[0], setRowScrollRequest = _23[1];
+    var sourceColumnsRef = (0, react_1.useRef)(props.sourceColumns);
+    sourceColumnsRef.current = props.sourceColumns;
+    var getCurrentExportData = (0, react_1.useCallback)(function (options) {
+        var state = store.getState();
+        return (0, utils_1.createGridExportData)({
+            options: options,
+            columns: state.columns,
+            sourceColumns: sourceColumnsRef.current,
+            data: state.data,
+            sourceData: state.sourceData,
+            sourceIndexByVisibleIndex: state.sourceIndexByVisibleIndex,
+            visibleIndexBySourceIndex: state.visibleIndexBySourceIndex,
+            checkedIndexesMap: state.checkedIndexesMap,
+            rowKey: state.rowKey,
+        });
+    }, [store]);
     React.useImperativeHandle(props.ref, function () { return ({
         scrollToRow: function (rowIndex, options) {
             var _a;
             setRowScrollRequest({ rowIndex: rowIndex, align: (_a = options === null || options === void 0 ? void 0 : options.align) !== null && _a !== void 0 ? _a : 'nearest' });
         },
-    }); }, []);
+        getExportData: function (options) {
+            return getCurrentExportData(options);
+        },
+        exportCsv: function (options) {
+            var _a;
+            var exportData = getCurrentExportData(options);
+            var csv = (0, utils_1.serializeGridExportDataToCsv)(exportData, options);
+            (0, utils_1.downloadCsv)(csv, (_a = options === null || options === void 0 ? void 0 : options.fileName) !== null && _a !== void 0 ? _a : 'export.csv');
+        },
+        exportExcel: function (options) {
+            var exportData = getCurrentExportData(options);
+            void Promise.resolve().then(function () { return __importStar(require('../utils/exportExcel')); }).then(function (_a) {
+                var _b;
+                var serializeGridExportDataToExcel = _a.serializeGridExportDataToExcel, downloadExcel = _a.downloadExcel;
+                var excelBytes = serializeGridExportDataToExcel(exportData, options);
+                downloadExcel(excelBytes, (_b = options === null || options === void 0 ? void 0 : options.fileName) !== null && _b !== void 0 ? _b : 'export.xlsx');
+            });
+        },
+    }); }, [getCurrentExportData]);
     var scrollRafRef = (0, react_1.useRef)(null);
     var scrollIdleTimerRef = (0, react_1.useRef)(null);
     var selectionAutoScrollRafRef = (0, react_1.useRef)(null);
@@ -1471,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)
@@ -1480,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/exportCsv.js

@@ -0,0 +1,129 @@
+"use strict";
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatCsvCellValue = formatCsvCellValue;
+exports.escapeCsvCell = escapeCsvCell;
+exports.serializeGridExportDataToCsv = serializeGridExportDataToCsv;
+exports.downloadCsv = downloadCsv;
+function formatCsvCellValue(value, preventFormulaInjection) {
+    if (preventFormulaInjection === void 0) { preventFormulaInjection = true; }
+    if (value === null || value === undefined) {
+        return '';
+    }
+    var formatted;
+    if (typeof value === 'string') {
+        formatted = value;
+        var startsWithFormula = /^[=+\-@]/.test(formatted);
+        var startsWithDangerousControl = /^[\t\r\n]/.test(formatted);
+        var hasFormulaAfterLeadingWhitespace = /^\s+[=+\-@]/.test(formatted);
+        if (preventFormulaInjection &&
+            (startsWithFormula || startsWithDangerousControl || hasFormulaAfterLeadingWhitespace)) {
+            formatted = "'".concat(formatted);
+        }
+        return formatted;
+    }
+    if (typeof value === 'number') {
+        return String(value);
+    }
+    if (typeof value === 'boolean') {
+        return value ? 'true' : 'false';
+    }
+    if (typeof value === 'bigint') {
+        return value.toString();
+    }
+    if (value instanceof Date) {
+        return isNaN(value.getTime()) ? 'Invalid Date' : value.toISOString();
+    }
+    if (typeof value === 'object') {
+        try {
+            formatted = JSON.stringify(value);
+        }
+        catch (_a) {
+            formatted = String(value);
+        }
+        return formatted;
+    }
+    return String(value);
+}
+function escapeCsvCell(cell, delimiter) {
+    if (delimiter === void 0) { delimiter = ','; }
+    var needsQuotes = cell.includes(delimiter) ||
+        cell.includes('"') ||
+        cell.includes('\r') ||
+        cell.includes('\n');
+    if (needsQuotes) {
+        return "\"".concat(cell.replace(/"/g, '""'), "\"");
+    }
+    return cell;
+}
+function serializeGridExportDataToCsv(data, options) {
+    var e_1, _a;
+    var _b, _c, _d, _e, _f;
+    var delimiter = (_b = options === null || options === void 0 ? void 0 : options.delimiter) !== null && _b !== void 0 ? _b : ',';
+    var newline = (_c = options === null || options === void 0 ? void 0 : options.newline) !== null && _c !== void 0 ? _c : '\r\n';
+    var includeHeader = (_d = options === null || options === void 0 ? void 0 : options.includeHeader) !== null && _d !== void 0 ? _d : true;
+    var bom = (_e = options === null || options === void 0 ? void 0 : options.bom) !== null && _e !== void 0 ? _e : true;
+    var preventFormulaInjection = (_f = options === null || options === void 0 ? void 0 : options.preventFormulaInjection) !== null && _f !== void 0 ? _f : true;
+    var lines = [];
+    if (includeHeader) {
+        var headerLine = data.columns
+            .map(function (col) { return escapeCsvCell(formatCsvCellValue(col.header, preventFormulaInjection), delimiter); })
+            .join(delimiter);
+        lines.push(headerLine);
+    }
+    try {
+        for (var _g = __values(data.rows), _h = _g.next(); !_h.done; _h = _g.next()) {
+            var row = _h.value;
+            var rowLine = row.cells
+                .map(function (cell) { return escapeCsvCell(formatCsvCellValue(cell, preventFormulaInjection), delimiter); })
+                .join(delimiter);
+            lines.push(rowLine);
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (_h && !_h.done && (_a = _g.return)) _a.call(_g);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    var csvText = lines.join(newline);
+    return (bom ? '\uFEFF' : '') + csvText;
+}
+function downloadCsv(csv, fileName) {
+    if (fileName === void 0) { fileName = 'export.csv'; }
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+        return;
+    }
+    var resolvedName = (fileName || '').trim();
+    if (!resolvedName) {
+        resolvedName = 'export.csv';
+    }
+    else if (!resolvedName.toLowerCase().endsWith('.csv')) {
+        resolvedName += '.csv';
+    }
+    var blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+    if (typeof URL !== 'undefined' && typeof URL.createObjectURL === 'function') {
+        var url = URL.createObjectURL(blob);
+        var link = document.createElement('a');
+        link.href = url;
+        link.setAttribute('download', resolvedName);
+        link.style.display = 'none';
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        if (typeof URL.revokeObjectURL === 'function') {
+            URL.revokeObjectURL(url);
+        }
+    }
+}