beautiful-grid 1.0.13 → 1.0.15

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/cellSelectionGeometry.js

@@ -1,4 +1,4 @@
-export function getCellSelectionFragments({ ranges, columns, rowCount, rowHeight, frozenColumnCount, frozenRowCount, frozenColumnsWidth, rowOffsets, }) {
+export function getCellSelectionFragments({ ranges, columns, rowCount, rowHeight, frozenColumnCount, frozenRowCount, frozenColumnsWidth, rowOffsets, rowHeights, detailHeights, }) {
     const safeRowCount = Math.max(0, Math.floor(rowCount));
     const safeColumnCount = columns.length;
     const safeRowHeight = Math.max(1, rowHeight);
@@ -38,6 +38,8 @@ export function getCellSelectionFragments({ ranges, columns, rowCount, rowHeight
                 selectedColumns,
                 rowHeight: safeRowHeight,
                 rowOffsets,
+                rowHeights,
+                detailHeights,
                 left: frozenDataOffset + getColumnsWidth(columns, 0, leftColumns.start - 1),
                 width: getColumnsWidth(columns, leftColumns.start, leftColumns.end),
                 top: getRowsTop(topRows.start, 0, safeRowHeight, rowOffsets),
@@ -53,6 +55,8 @@ export function getCellSelectionFragments({ ranges, columns, rowCount, rowHeight
                 selectedColumns,
                 rowHeight: safeRowHeight,
                 rowOffsets,
+                rowHeights,
+                detailHeights,
                 left: getMainColumnLeft(columns, mainColumns.start, safeFrozenColumnCount),
                 width: getMainColumnRight(columns, mainColumns.end, safeFrozenColumnCount) -
                     getMainColumnLeft(columns, mainColumns.start, safeFrozenColumnCount),
@@ -69,6 +73,8 @@ export function getCellSelectionFragments({ ranges, columns, rowCount, rowHeight
                 selectedColumns,
                 rowHeight: safeRowHeight,
                 rowOffsets,
+                rowHeights,
+                detailHeights,
                 left: frozenDataOffset + getColumnsWidth(columns, 0, leftColumns.start - 1),
                 width: getColumnsWidth(columns, leftColumns.start, leftColumns.end),
                 top: getRowsTop(bodyRows.start, safeFrozenRowCount, safeRowHeight, rowOffsets),
@@ -84,6 +90,8 @@ export function getCellSelectionFragments({ ranges, columns, rowCount, rowHeight
                 selectedColumns,
                 rowHeight: safeRowHeight,
                 rowOffsets,
+                rowHeights,
+                detailHeights,
                 left: getMainColumnLeft(columns, mainColumns.start, safeFrozenColumnCount),
                 width: getMainColumnRight(columns, mainColumns.end, safeFrozenColumnCount) -
                     getMainColumnLeft(columns, mainColumns.start, safeFrozenColumnCount),
@@ -126,16 +134,14 @@ export function normalizeCellSelectionRange(range) {
         endColumnIndex: Math.max(range.startColumnIndex, range.endColumnIndex),
     };
 }
-function createFragment({ rangeIndex, quadrant, rows, columns, selectedRows, selectedColumns, rowHeight, rowOffsets, left, top, width, }) {
+function createFragment({ rangeIndex, quadrant, rows, columns, selectedRows, selectedColumns, rowHeight, rowOffsets, rowHeights, detailHeights, left, top, width, }) {
     return {
         rangeIndex,
         quadrant,
         left,
         top,
         width,
-        height: rowOffsets
-            ? (rowOffsets[rows.end + 1] ?? 0) - (rowOffsets[rows.start] ?? 0)
-            : (rows.end - rows.start + 1) * rowHeight,
+        height: getRowsHeight(rows.start, rows.end, rowHeight, rowOffsets, rowHeights, detailHeights),
         edges: {
             top: rows.start === selectedRows.start,
             right: columns.end === selectedColumns.end,
@@ -144,6 +150,26 @@ function createFragment({ rangeIndex, quadrant, rows, columns, selectedRows, sel
         },
     };
 }
+function getRowsHeight(start, end, rowHeight, rowOffsets, rowHeights, detailHeights) {
+    if (rowHeights && rowHeights[end] !== undefined) {
+        const endRowHeight = rowHeights[end];
+        if (start === end)
+            return endRowHeight;
+        const topStart = rowOffsets ? rowOffsets[start] ?? 0 : start * rowHeight;
+        const topEnd = rowOffsets ? rowOffsets[end] ?? 0 : end * rowHeight;
+        return topEnd + endRowHeight - topStart;
+    }
+    if (rowOffsets) {
+        const topStart = rowOffsets[start] ?? 0;
+        const topEnd = rowOffsets[end] ?? 0;
+        const detailEnd = detailHeights?.[end] ?? 0;
+        const endRowHeight = Math.max((rowOffsets[end + 1] ?? (topEnd + rowHeight)) - topEnd - detailEnd, 0);
+        if (start === end)
+            return endRowHeight;
+        return topEnd + endRowHeight - topStart;
+    }
+    return (end - start + 1) * rowHeight;
+}
 function getRowsTop(start, base, rowHeight, rowOffsets) {
     return rowOffsets ? (rowOffsets[start] ?? 0) - (rowOffsets[base] ?? 0) : (start - base) * rowHeight;
 }

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/rowHeightMetrics.js

@@ -1,6 +1,7 @@
-export function createRowHeightMetrics(data, fallbackHeight, getRowHeight) {
+export function createRowHeightMetrics(data, fallbackHeight, getRowHeight, masterDetail) {
     const safeFallback = Number.isFinite(fallbackHeight) && fallbackHeight > 0 ? fallbackHeight : 1;
-    if (!getRowHeight) {
+    const hasMasterDetail = Boolean(masterDetail && masterDetail.expandedKeysSet.size > 0);
+    if (!getRowHeight && !hasMasterDetail) {
         return {
             heights: new Float64Array(0),
             offsets: new Float64Array(0),
@@ -10,17 +11,56 @@ export function createRowHeightMetrics(data, fallbackHeight, getRowHeight) {
     }
     const heights = new Float64Array(data.length);
     const offsets = new Float64Array(data.length + 1);
+    const detailHeights = hasMasterDetail ? new Float64Array(data.length) : undefined;
     for (let index = 0; index < data.length; index += 1) {
-        const requestedHeight = getRowHeight(data[index].values, index);
-        const height = Number.isFinite(requestedHeight) && requestedHeight > 0 ? requestedHeight : safeFallback;
-        heights[index] = height;
-        offsets[index + 1] = offsets[index] + height;
+        const item = data[index];
+        const sourceIndex = masterDetail?.sourceIndexByVisibleIndex?.[index] ?? index;
+        let masterHeight = safeFallback;
+        if (getRowHeight) {
+            try {
+                const requestedHeight = getRowHeight(item.values, index);
+                masterHeight = Number.isFinite(requestedHeight) && requestedHeight > 0 ? requestedHeight : safeFallback;
+            }
+            catch {
+                masterHeight = safeFallback;
+            }
+        }
+        heights[index] = masterHeight;
+        let detailHeight = 0;
+        if (hasMasterDetail && masterDetail) {
+            const rowKey = masterDetail.getRowKey(item.values, index);
+            if (rowKey !== undefined && rowKey !== null && masterDetail.expandedKeysSet.has(rowKey)) {
+                let isExpandable = true;
+                if (masterDetail.hasDetail) {
+                    try {
+                        isExpandable = masterDetail.hasDetail(item, sourceIndex);
+                    }
+                    catch {
+                        isExpandable = false;
+                    }
+                }
+                if (isExpandable) {
+                    try {
+                        const requestedDetailHeight = masterDetail.getDetailHeight(item, sourceIndex);
+                        detailHeight =
+                            Number.isFinite(requestedDetailHeight) && requestedDetailHeight > 0 ? requestedDetailHeight : 200;
+                    }
+                    catch {
+                        detailHeight = 200;
+                    }
+                }
+            }
+            detailHeights[index] = detailHeight;
+        }
+        const layoutHeight = masterHeight + detailHeight;
+        offsets[index + 1] = offsets[index] + layoutHeight;
     }
     return {
         heights,
         offsets,
         totalHeight: offsets[data.length],
         variable: true,
+        detailHeights,
     };
 }
 /** Returns the row containing offset, or rowCount when offset is at/after the end. */

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/esm/utils/useRowReorderController.js

@@ -333,7 +333,11 @@ export function useRowReorderController({ containerRef, bodyContainerRef, scroll
             container.style.setProperty('--bgrid-row-reorder-height', `${session.rowHeight}px`);
             store.getState().clearCellSelection();
             store.getState().closeTransientSurfaces();
-            container.querySelectorAll('.bgrid-row-hover').forEach(element => element.classList.remove('bgrid-row-hover'));
+            container.querySelectorAll('.bgrid-row-hover').forEach(element => {
+                if (element.closest('[role="grid"], [role="treegrid"]') !== container)
+                    return;
+                element.classList.remove('bgrid-row-hover');
+            });
             store.setState({
                 reorderingInfo: {
                     fromIndex: session.fromIndex,

package/package.json

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