beautiful-grid 1.0.17 → 1.0.19

package/README.md

@@ -1159,7 +1159,7 @@ Below is a categorized reference of `<BGrid>` props. For exact TypeScript types,
 | `masterDetail`       | `BGridMasterDetailOptions<T>`                                       | Expands rows to display nested subgrids, forms, or custom detail panels.               |
 | `loading`            | `boolean`                                                           | Displays full-grid loading overlay.                                                    |
 | `spinning`           | `boolean`                                                           | Displays body-area spinner.                                                            |
-| `msg`                | `{ emptyList?: string }`                                            | Custom empty state text.                                                               |
+| `msg`                | `{ emptyList?: string }`                                            | Custom body-wide empty state text. It spans frozen and scrollable regions.              |
 
 ---
 

package/cjs/components/ColResizer.js

@@ -130,6 +130,13 @@ function ColResizer(_a) {
                         table.style.tableLayout = 'auto';
                         table.style.width = 'max-content';
                     });
+                    targetDiv.querySelectorAll('.bgrid-head-column, .bgrid-head-column-label, .bgrid-head-column-label-text').forEach(function (element) {
+                        // The live header intentionally uses min-width: 0 for ellipsis. BestFit must measure the full label.
+                        element.style.minWidth = 'max-content';
+                        element.style.width = 'max-content';
+                        element.style.overflow = 'visible';
+                        element.style.textOverflow = 'clip';
+                    });
                     bodyTarget = container.current;
                     bodyTarget.append(targetDiv);
                     return [4 /*yield*/, (0, utils_1.delay)(30)];

package/cjs/components/Table.js

@@ -238,7 +238,8 @@ function Table(props) {
         scrollbar: s.scrollbar,
         status: s.status,
         pagination: s.pagination,
-    }); })), rowChecked = _15.rowChecked, page = _15.page, loading = _15.loading, spinning = _15.spinning, disabled = _15.disabled, showLineNumber = _15.showLineNumber, summary = _15.summary, scrollbar = _15.scrollbar, status = _15.status, pagination = _15.pagination;
+        msg: s.msg,
+    }); })), rowChecked = _15.rowChecked, page = _15.page, loading = _15.loading, spinning = _15.spinning, disabled = _15.disabled, showLineNumber = _15.showLineNumber, summary = _15.summary, scrollbar = _15.scrollbar, status = _15.status, pagination = _15.pagination, msg = _15.msg;
     var _16 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         searchOpen: s.searchOpen,
         searchOptions: s.searchOptions,
@@ -2620,6 +2621,7 @@ function Table(props) {
                         React.createElement(Summary, { style: { left: frozenColumnsWidth }, role: 'rfdg-summary' },
                             React.createElement(TableSummary_1.TableSummary, { position: 'bottom' })))))),
             React.createElement(BodyViewport, { ref: bodyContainerRef, style: { top: stickyTopHeight, height: contentBodyHeight }, "data-last": !page ? 'true' : undefined },
+                data.length === 0 && (msg === null || msg === void 0 ? void 0 : msg.emptyList) ? (React.createElement("div", { className: 'bgrid-empty-state', role: 'status' }, msg.emptyList)) : null,
                 ((_9 = rowReorderController.preview) === null || _9 === void 0 ? void 0 : _9.visible) && (React.createElement("div", { className: 'bgrid-row-reorder-preview', "data-bgrid-row-reorder-phase": rowReorderController.preview.phase, "aria-hidden": 'true' }, rowReorderController.preview.text)),
                 React.createElement(Loading_1.default, { active: !!spinning, size: 'small' })),
             React.createElement("div", { className: 'bgrid-visually-hidden', role: 'status', "aria-live": 'polite', "aria-atomic": 'true' }, rowReorderController.announcement),

package/cjs/components/TableBody.js

@@ -205,13 +205,12 @@ function TableBody(_a) {
     }); })), editable = _j.editable, editTrigger = _j.editTrigger, disabled = _j.disabled, cellInteractionSession = _j.cellInteractionSession;
     // [Selector Group 5] Display Options - 표시 옵션
     var _k = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
-        msg: s.msg,
         getRowClassName: s.getRowClassName,
         cellMergeOptions: s.cellMergeOptions,
         variant: s.variant,
         onClick: s.onClick,
         sourceIndexByVisibleIndex: s.sourceIndexByVisibleIndex,
-    }); })), msg = _k.msg, getRowClassName = _k.getRowClassName, cellMergeOptions = _k.cellMergeOptions, variant = _k.variant, onClick = _k.onClick, sourceIndexByVisibleIndex = _k.sourceIndexByVisibleIndex;
+    }); })), getRowClassName = _k.getRowClassName, cellMergeOptions = _k.cellMergeOptions, variant = _k.variant, onClick = _k.onClick, sourceIndexByVisibleIndex = _k.sourceIndexByVisibleIndex;
     var _l = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         searchMatches: s.searchMatches,
         activeSearchMatchIndex: s.activeSearchMatchIndex,
@@ -296,10 +295,7 @@ function TableBody(_a) {
                     React.createElement(TableBodyRow_1.TableBodyRow, { item: item, data: data, ri: ri, sourceIndex: sourceIndex, columns: columns, startCIdx: startCIdx, endCIdx: endCIdx, frozenColumnIndex: frozenColumnIndex, isLeftRegion: isLeftRegion, showLineNumber: showLineNumber !== null && showLineNumber !== void 0 ? showLineNumber : false, hasRowChecked: hasRowChecked, isRadio: Boolean(isRadio), checked: checkedAll === true || checkedIndexesMap.get(sourceIndex), rowCheckedDisabled: Boolean(disabled || ((_f = rowChecked === null || rowChecked === void 0 ? void 0 : rowChecked.disabled) === null || _f === void 0 ? void 0 : _f.call(rowChecked, sourceIndex, item))), rowStatus: rowStatus, active: active, className: className, resolvedRowHeight: resolvedRowHeight, itemHeight: itemHeight, itemPadding: itemPadding, editable: Boolean(editable), disabled: Boolean(disabled), editTrigger: editTrigger, hasOnClick: hasOnClick, cellMergeOptions: cellMergeOptions, mergeColumns: mergeColumns, odd: !mergeColumns ? ri % 2 === 0 : undefined, variant: variant, rowReorderEnabled: rowReorderEnabled, rowReorderRole: rowReorderRole, rowReorderPhase: reorderingInfo === null || reorderingInfo === void 0 ? void 0 : reorderingInfo.phase, rowReorderDirection: rowReorderDirection, rowReorderOffset: rowReorderOffset, reorder: reorder, reorderingInfo: reorderingInfo, searchMatchTokens: searchMatchTokens, currentSearchToken: currentSearchToken, isRowEditing: isRowEditing, cellInteractionSession: isRowEditing ? cellInteractionSession : undefined, handleClick: handleClick, setEditItem: setEditItem, setItemValue: setItemValue, handleMoveEditFocus: handleMoveEditFocus, handleChangeChecked: handleChangeChecked, handleChangeCheckedRadio: handleChangeCheckedRadio, getRowSpan: getRowSpan, onRowReorderPointerDown: onRowReorderPointerDown, onRowReorderKeyDown: onRowReorderKeyDown }),
                     detailHeight > 0 && (React.createElement(MasterDetailCell_1.MasterDetailRow, { item: item, sourceIndex: sourceIndex, visibleIndex: ri, detailHeight: detailHeight, isLeftRegion: isLeftRegion, viewportWidth: viewportWidth !== null && viewportWidth !== void 0 ? viewportWidth : Math.max(width - (frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0), 0), frozenColumnsWidth: frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0, colSpan: isLeftRegion ? Math.max(frozenColumnIndex, 1) : Math.max(columns.length - frozenColumnIndex, 1) }))));
             }),
-            endNumber - startIdx < 1 &&
-                (isLeftRegion ? (React.createElement(NoDataTr, { itemHeight: itemHeight, itemPadding: itemPadding })) : (React.createElement(NoDataTr, { itemHeight: itemHeight, itemPadding: itemPadding }, (msg === null || msg === void 0 ? void 0 : msg.emptyList) ? (React.createElement(React.Fragment, null,
-                    React.createElement("td", { className: 'bgrid-empty-cell', colSpan: columns.slice(frozenColumnIndex).length }, msg.emptyList),
-                    React.createElement("td", { "data-none": true }))) : null))))));
+            endNumber - startIdx < 1 && React.createElement(NoDataTr, { itemHeight: itemHeight, itemPadding: itemPadding, "aria-hidden": 'true' }))));
 }
 function getRowStatusLabel(status) {
     if (status === types_1.BGridDataItemStatus.new)

package/esm/components/ColResizer.js

@@ -51,6 +51,13 @@ function ColResizer({ container, columnIndex, hideHandle, bordered, frozenBounda
                 table.style.tableLayout = 'auto';
                 table.style.width = 'max-content';
             });
+            targetDiv.querySelectorAll('.bgrid-head-column, .bgrid-head-column-label, .bgrid-head-column-label-text').forEach(element => {
+                // The live header intentionally uses min-width: 0 for ellipsis. BestFit must measure the full label.
+                element.style.minWidth = 'max-content';
+                element.style.width = 'max-content';
+                element.style.overflow = 'visible';
+                element.style.textOverflow = 'clip';
+            });
             const bodyTarget = container.current;
             bodyTarget.append(targetDiv);
             await delay(30);

package/esm/components/Table.js

@@ -90,7 +90,7 @@ function Table(props) {
         handleClick: s.handleClick,
     })));
     // [Selector Group 5] State - 상태
-    const { rowChecked, page, loading, spinning, disabled, showLineNumber, summary, scrollbar, status, pagination } = useAppStore(useShallow(s => ({
+    const { rowChecked, page, loading, spinning, disabled, showLineNumber, summary, scrollbar, status, pagination, msg } = useAppStore(useShallow(s => ({
         rowChecked: s.rowChecked,
         page: s.page,
         loading: s.loading,
@@ -101,6 +101,7 @@ function Table(props) {
         scrollbar: s.scrollbar,
         status: s.status,
         pagination: s.pagination,
+        msg: s.msg,
     })));
     const { searchOpen, searchOptions, contextMenuOptions, activeSearchMatchIndex, searchMatches, storeSourceIndexByVisibleIndex, storeRowKey, cellInteractionSession, } = useAppStore(useShallow(s => ({
         searchOpen: s.searchOpen,
@@ -2419,6 +2420,7 @@ function Table(props) {
                         React.createElement(Summary, { style: { left: frozenColumnsWidth }, role: 'rfdg-summary' },
                             React.createElement(TableSummary, { position: 'bottom' })))))),
             React.createElement(BodyViewport, { ref: bodyContainerRef, style: { top: stickyTopHeight, height: contentBodyHeight }, "data-last": !page ? 'true' : undefined },
+                data.length === 0 && msg?.emptyList ? (React.createElement("div", { className: 'bgrid-empty-state', role: 'status' }, msg.emptyList)) : null,
                 rowReorderController.preview?.visible && (React.createElement("div", { className: 'bgrid-row-reorder-preview', "data-bgrid-row-reorder-phase": rowReorderController.preview.phase, "aria-hidden": 'true' }, rowReorderController.preview.text)),
                 React.createElement(Loading, { active: !!spinning, size: 'small' })),
             React.createElement("div", { className: 'bgrid-visually-hidden', role: 'status', "aria-live": 'polite', "aria-atomic": 'true' }, rowReorderController.announcement),

package/esm/components/TableBody.js

@@ -140,8 +140,7 @@ function TableBody({ rowKeyRegistry, region = 'main', rowRange, style, role, qua
         cellInteractionSession: s.cellInteractionSession,
     })));
     // [Selector Group 5] Display Options - 표시 옵션
-    const { msg, getRowClassName, cellMergeOptions, variant, onClick, sourceIndexByVisibleIndex } = useAppStore(useShallow(s => ({
-        msg: s.msg,
+    const { getRowClassName, cellMergeOptions, variant, onClick, sourceIndexByVisibleIndex } = useAppStore(useShallow(s => ({
         getRowClassName: s.getRowClassName,
         cellMergeOptions: s.cellMergeOptions,
         variant: s.variant,
@@ -231,10 +230,7 @@ function TableBody({ rowKeyRegistry, region = 'main', rowRange, style, role, qua
                     React.createElement(TableBodyRow, { item: item, data: data, ri: ri, sourceIndex: sourceIndex, columns: columns, startCIdx: startCIdx, endCIdx: endCIdx, frozenColumnIndex: frozenColumnIndex, isLeftRegion: isLeftRegion, showLineNumber: showLineNumber ?? false, hasRowChecked: hasRowChecked, isRadio: Boolean(isRadio), checked: checkedAll === true || checkedIndexesMap.get(sourceIndex), rowCheckedDisabled: Boolean(disabled || rowChecked?.disabled?.(sourceIndex, item)), rowStatus: rowStatus, active: active, className: className, resolvedRowHeight: resolvedRowHeight, itemHeight: itemHeight, itemPadding: itemPadding, editable: Boolean(editable), disabled: Boolean(disabled), editTrigger: editTrigger, hasOnClick: hasOnClick, cellMergeOptions: cellMergeOptions, mergeColumns: mergeColumns, odd: !mergeColumns ? ri % 2 === 0 : undefined, variant: variant, rowReorderEnabled: rowReorderEnabled, rowReorderRole: rowReorderRole, rowReorderPhase: reorderingInfo?.phase, rowReorderDirection: rowReorderDirection, rowReorderOffset: rowReorderOffset, reorder: reorder, reorderingInfo: reorderingInfo, searchMatchTokens: searchMatchTokens, currentSearchToken: currentSearchToken, isRowEditing: isRowEditing, cellInteractionSession: isRowEditing ? cellInteractionSession : undefined, handleClick: handleClick, setEditItem: setEditItem, setItemValue: setItemValue, handleMoveEditFocus: handleMoveEditFocus, handleChangeChecked: handleChangeChecked, handleChangeCheckedRadio: handleChangeCheckedRadio, getRowSpan: getRowSpan, onRowReorderPointerDown: onRowReorderPointerDown, onRowReorderKeyDown: onRowReorderKeyDown }),
                     detailHeight > 0 && (React.createElement(MasterDetailRow, { item: item, sourceIndex: sourceIndex, visibleIndex: ri, detailHeight: detailHeight, isLeftRegion: isLeftRegion, viewportWidth: viewportWidth ?? Math.max(width - (frozenColumnsWidth ?? 0), 0), frozenColumnsWidth: frozenColumnsWidth ?? 0, colSpan: isLeftRegion ? Math.max(frozenColumnIndex, 1) : Math.max(columns.length - frozenColumnIndex, 1) }))));
             }),
-            endNumber - startIdx < 1 &&
-                (isLeftRegion ? (React.createElement(NoDataTr, { itemHeight: itemHeight, itemPadding: itemPadding })) : (React.createElement(NoDataTr, { itemHeight: itemHeight, itemPadding: itemPadding }, msg?.emptyList ? (React.createElement(React.Fragment, null,
-                    React.createElement("td", { className: 'bgrid-empty-cell', colSpan: columns.slice(frozenColumnIndex).length }, msg.emptyList),
-                    React.createElement("td", { "data-none": true }))) : null))))));
+            endNumber - startIdx < 1 && React.createElement(NoDataTr, { itemHeight: itemHeight, itemPadding: itemPadding, "aria-hidden": 'true' }))));
 }
 function getRowStatusLabel(status) {
     if (status === BGridDataItemStatus.new)

package/package.json

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

package/style.css

@@ -1886,10 +1886,20 @@
   border-color: var(--bgrid-scroll-track-bg);
 }
 
-.bgrid-empty-cell {
-  padding-top: 20px;
-  padding-bottom: 20px;
+.bgrid-empty-state {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  overflow: hidden;
+  color: var(--bgrid-body-color);
+  background-color: var(--bgrid-body-bg);
   text-align: center;
+  pointer-events: none;
 }
 
 .bgrid-line-number-cell {
@@ -2629,12 +2639,53 @@
   max-height: 100%;
 }
 
+.bgrid-color-swatch {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  box-sizing: border-box;
+  border: 1px solid rgba(0, 0, 0, 0.18);
+  border-radius: 3px;
+  flex: 0 0 14px;
+}
+
+.bgrid-editor-icon .bgrid-color-swatch {
+  margin: 0;
+}
+
+[data-bgrid-theme='dark'] .bgrid-color-swatch,
+:root[data-theme='dark'] .bgrid-color-swatch {
+  border-color: rgba(255, 255, 255, 0.22);
+}
+
 .bgrid-editor-icon:hover,
 .bgrid-editor-icon:focus-visible {
   background: var(--bgrid-body-hover-bg);
   color: var(--bgrid-primary-color);
 }
 
+.bgrid-editor-icon:has(.bgrid-color-swatch):hover,
+.bgrid-editor-icon:has(.bgrid-color-swatch):focus-visible {
+  background: transparent;
+}
+
+.bgrid-editor-icon:hover .bgrid-color-swatch,
+.bgrid-editor-icon:focus-visible .bgrid-color-swatch,
+.bgrid-color-swatch:hover {
+  border-color: rgba(0, 0, 0, 0.4);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
+}
+
+[data-bgrid-theme='dark'] .bgrid-editor-icon:hover .bgrid-color-swatch,
+[data-bgrid-theme='dark'] .bgrid-editor-icon:focus-visible .bgrid-color-swatch,
+[data-bgrid-theme='dark'] .bgrid-color-swatch:hover,
+:root[data-theme='dark'] .bgrid-editor-icon:hover .bgrid-color-swatch,
+:root[data-theme='dark'] .bgrid-editor-icon:focus-visible .bgrid-color-swatch,
+:root[data-theme='dark'] .bgrid-color-swatch:hover {
+  border-color: rgba(255, 255, 255, 0.45);
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
+}
+
 .bgrid-editor-icon[hidden] {
   display: none;
 }