sellmate-design-system-react 2.1.2 → 2.2.0

package/dist/components/STable/STable.d.ts

@@ -3,6 +3,23 @@ import { type SColor } from '../../lib/color';
 import { type SIconName } from '../SIcon';
 import { type SSelectOption } from '../SSelect';
 export type SRow = Record<string, any>;
+/** `STableColumn.renderCell`에 전달되는 컨텍스트 */
+export interface STableCellContext {
+    row: SRow;
+    /** `field` + `format`이 적용된 표시 값 */
+    value: any;
+    column: STableColumn;
+    /** 보이는 컬럼 기준 인덱스 */
+    colIndex: number;
+    /** 현재 렌더 중인 행 목록 기준 인덱스 (페이지/가상 스크롤 윈도우 기준) */
+    rowIndex: number;
+    /** 행 선택 여부 */
+    isSelected: boolean;
+    /** STable이 이 셀에 적용하려던 클래스 (구분선·말줄임·sticky 그림자 포함) */
+    className: string;
+    /** STable이 이 셀에 적용하려던 스타일 (패딩·정렬·폭·sticky offset 포함) */
+    style: CSSProperties;
+}
 export interface STableColumn {
     name: string;
     label: string;
@@ -21,8 +38,19 @@ export interface STableColumn {
     icon?: SIconName;
     /** 헤더 아이콘 색상. 팔레트 키(`grey_65`, `red_95` …) 또는 임의 CSS 색상 */
     iconColor?: SColor;
-    /** 셀 커스텀 렌더 (React 확장) */
+    /** 셀 커스텀 렌더 (React 확장) — `<td>` 안쪽 내용만 교체한다 */
     render?: (row: SRow, value: any) => ReactNode;
+    /**
+     * 셀(`<td>`) 자체를 커스텀 렌더 (React 확장). 반환한 엘리먼트가 그대로 `<td>`가 되므로
+     * `colSpan` / `rowSpan`을 직접 지정할 수 있다. `render`보다 우선한다.
+     *
+     * - `ctx.className` / `ctx.style`을 그대로 펼쳐야 구분선·정렬·sticky 등 기본 스타일이 유지된다.
+     * - `null`(또는 `false`)을 반환하면 그 자리에는 `<td>`를 만들지 않는다.
+     *   다른 셀의 `colSpan` / `rowSpan`에 덮이는 자리를 이렇게 비운다.
+     * - 병합은 sticky 컬럼(인덱스 기준 offset 계산)과 함께 쓰지 않는 것을 전제로 한다.
+     *   `rowSpan`은 행을 잘라 쓰는 가상 스크롤 / 내부 페이지네이션과 경계에서 어긋날 수 있다.
+     */
+    renderCell?: (ctx: STableCellContext) => ReactNode;
     /** 헤더 셀 커스텀 렌더 (React 확장) */
     renderHeader?: (column: STableColumn, index: number) => ReactNode;
     /** 본문 셀 커스텀 클래스. 함수를 주면 행마다 다른 클래스를 반환할 수 있다 */
@@ -82,8 +110,15 @@ export interface STableProps {
     /** border-radius 제어 */
     radius?: 'default' | 'useTop' | 'full';
     noDataLabel?: string;
+    /**
+     * 데이터가 없을 때 body 영역 전체를 대체하는 슬롯.
+     * 지정하면 `noDataLabel` 대신 이 콘텐츠가 헤더 아래 영역을 채우며, 버튼 등 인터랙션도 동작한다.
+     */
+    noDataSlot?: ReactNode;
     isLoading?: boolean;
     dense?: boolean;
+    /** true면 행에 마우스를 올려도 hover 배경(grey_05)을 표시하지 않는다 */
+    noHover?: boolean;
     /** 페이지네이션 (있으면 하단 표시) */
     pagination?: STablePagination;
     onPageChange?: (page: number) => void;

package/dist/components/STable/STable.js

@@ -1,5 +1,5 @@
 "use client";
-import { forwardRef, createContext, useState, useRef, useImperativeHandle, useMemo, useEffect, useId, useCallback, useContext } from 'react';
+import { forwardRef, createContext, useState, useRef, useImperativeHandle, useMemo, useEffect, useId, useCallback, Fragment as Fragment$1, useContext } from 'react';
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -4509,8 +4509,10 @@ var STable = forwardRef(function STable2({
   stickyColumn,
   radius = "default",
   noDataLabel = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.",
+  noDataSlot,
   isLoading = false,
   dense = false,
+  noHover = false,
   pagination,
   onPageChange,
   useInternalPagination = false,
@@ -4596,7 +4598,10 @@ var STable = forwardRef(function STable2({
   );
   const handleScroll = useCallback(() => {
     const el = scrollRef.current;
-    if (!el) return;
+    if (!el) {
+      setHeaderGutter(0);
+      return;
+    }
     const header = headerScrollRef.current;
     if (header) header.scrollLeft = el.scrollLeft;
     setHeaderGutter(el.offsetWidth - el.clientWidth);
@@ -4728,6 +4733,7 @@ var STable = forwardRef(function STable2({
     bodyRows = rows.slice(pageInfo.startIndex, pageInfo.endIndex);
   }
   const isNoData = rowCount === 0 && !isLoading;
+  const showNoDataSlot = isNoData && noDataSlot != null;
   const showPagination = !useVirtualScroll && (pagination != null || useInternalPagination);
   const lastPage = useInternalPagination ? Math.max(1, Math.ceil(rowCount / (innerRowsPerPage || 1))) : pagination?.lastPage ?? Math.max(1, Math.ceil(rowCount / (pagination?.rowsPerPage ?? 10)));
   const displayPage = useInternalPagination ? currentPage : pagination?.page ?? 1;
@@ -4789,6 +4795,12 @@ var STable = forwardRef(function STable2({
       isRightEdge && scrolledRight && "shadow-[-5px_0_8px_0_rgba(34,34,34,0.1)]"
     );
   };
+  const bodyScrollClass = cn(
+    "min-h-0 flex-1 overflow-auto border-t border-solid border-[color:var(--cmp-table-border-color)]",
+    SCROLLBAR_CLASS,
+    SCROLLBAR_TRACK_BG_CLASS,
+    SCROLLBAR_TRACK_BORDER_CLASS
+  );
   const colgroup = /* @__PURE__ */ jsxs("colgroup", { children: [
     selectable && /* @__PURE__ */ jsx("col", { style: { width: SELECTABLE_COLUMN_WIDTH } }),
     visibleCols.map((col, i) => /* @__PURE__ */ jsx("col", { style: col.autoWidth ? void 0 : { width: columnWidths[i] } }, col.name))
@@ -4910,97 +4922,106 @@ var STable = forwardRef(function STable2({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  ref: scrollRef,
-                  onScroll: handleScroll,
-                  className: cn(
-                    // 헤더 하단 구분선은 body 상단 border로 그린다. body 래퍼는 스크롤바를 포함한
-                    // 전체 폭을 차지하므로(스크롤바는 border 안쪽) 헤더 거터의 border-right와 미터가
-                    // 생기지 않아 색·길이가 균일한 한 줄이 된다.
-                    "min-h-0 flex-1 overflow-auto border-t border-solid border-[color:var(--cmp-table-border-color)]",
-                    SCROLLBAR_CLASS,
-                    SCROLLBAR_TRACK_BG_CLASS,
-                    SCROLLBAR_TRACK_BORDER_CLASS,
-                    // 원본 sd-table__scroll-container--loading/--no-data: 로딩·데이터 없음 시 스크롤 차단
-                    (isLoading || rowCount === 0) && "overflow-hidden"
-                  ),
-                  children: /* @__PURE__ */ jsxs(
-                    "table",
-                    {
-                      className: "w-full table-fixed border-separate border-spacing-0 text-left",
-                      style: { fontSize: 12 },
-                      children: [
-                        colgroup,
-                        /* @__PURE__ */ jsxs("tbody", { children: [
-                          useVirtualScroll && topSpacer > 0 && /* @__PURE__ */ jsx("tr", { "aria-hidden": true, style: { height: topSpacer }, children: /* @__PURE__ */ jsx("td", { colSpan: totalColSpan, className: "p-0" }) }),
-                          rowCount === 0 ? null : bodyRows.map((row, ri) => {
-                            const isSel = selectedKeys.has(row[rowKey]);
-                            const rowBg = "bg-white";
-                            return /* @__PURE__ */ jsxs(
-                              "tr",
-                              {
-                                onClick: () => onRowClick?.(row),
-                                className: cn(
-                                  "group/table-row hover:bg-[var(--color-grey-05)]",
-                                  onRowClick && "cursor-pointer"
-                                ),
-                                style: { height: useVirtualScroll ? effectiveRowHeight : rowH },
-                                children: [
-                                  selectable && /* @__PURE__ */ jsx(
-                                    "td",
-                                    {
-                                      className: cn(
-                                        // 원본 .td--selected: 48px 고정폭, 항상 left sticky, 체크박스 중앙정렬
-                                        "sticky left-0 z-[2] border-b border-solid border-[color:var(--cmp-table-border-color)] align-middle group-hover/table-row:bg-[var(--color-grey-05)]",
-                                        rowBg,
-                                        stickyLeft === 0 && scrolledLeft && "shadow-[5px_0_8px_0_rgba(34,34,34,0.1)]"
-                                      ),
-                                      style: {
-                                        width: SELECTABLE_COLUMN_WIDTH,
-                                        minWidth: SELECTABLE_COLUMN_WIDTH,
-                                        maxWidth: SELECTABLE_COLUMN_WIDTH
-                                      },
-                                      onClick: (e) => e.stopPropagation(),
-                                      children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(SCheckbox, { value: isSel, onValueChange: () => toggleRow(row) }) })
-                                    }
+              showNoDataSlot ? /* @__PURE__ */ jsx("div", { className: cn(bodyScrollClass, "pointer-events-auto bg-white"), children: /* @__PURE__ */ jsx("div", { className: "flex h-full min-h-[60px] w-full items-center justify-center", children: noDataSlot }) }) : (
+                /* 바디: 세로 스크롤은 이 컨테이너에만 생긴다 (헤더 제외) */
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    ref: scrollRef,
+                    onScroll: handleScroll,
+                    className: cn(
+                      bodyScrollClass,
+                      // 원본 sd-table__scroll-container--loading/--no-data: 로딩·데이터 없음 시 스크롤 차단
+                      (isLoading || rowCount === 0) && "overflow-hidden"
+                    ),
+                    children: /* @__PURE__ */ jsxs(
+                      "table",
+                      {
+                        className: "w-full table-fixed border-separate border-spacing-0 text-left",
+                        style: { fontSize: 12 },
+                        children: [
+                          colgroup,
+                          /* @__PURE__ */ jsxs("tbody", { children: [
+                            useVirtualScroll && topSpacer > 0 && /* @__PURE__ */ jsx("tr", { "aria-hidden": true, style: { height: topSpacer }, children: /* @__PURE__ */ jsx("td", { colSpan: totalColSpan, className: "p-0" }) }),
+                            rowCount === 0 ? null : bodyRows.map((row, ri) => {
+                              const isSel = selectedKeys.has(row[rowKey]);
+                              const rowBg = "bg-white";
+                              return /* @__PURE__ */ jsxs(
+                                "tr",
+                                {
+                                  onClick: () => onRowClick?.(row),
+                                  className: cn(
+                                    "group/table-row",
+                                    !noHover && "hover:bg-[var(--color-grey-05)]",
+                                    onRowClick && "cursor-pointer"
                                   ),
-                                  visibleCols.map((col, i) => /* @__PURE__ */ jsx(
-                                    "td",
-                                    {
-                                      className: cn(
+                                  style: { height: useVirtualScroll ? effectiveRowHeight : rowH },
+                                  children: [
+                                    selectable && /* @__PURE__ */ jsx(
+                                      "td",
+                                      {
+                                        className: cn(
+                                          // 원본 .td--selected: 48px 고정폭, 항상 left sticky, 체크박스 중앙정렬
+                                          "sticky left-0 z-[2] border-b border-solid border-[color:var(--cmp-table-border-color)] align-middle",
+                                          rowBg,
+                                          !noHover && "group-hover/table-row:bg-[var(--color-grey-05)]",
+                                          stickyLeft === 0 && scrolledLeft && "shadow-[5px_0_8px_0_rgba(34,34,34,0.1)]"
+                                        ),
+                                        style: {
+                                          width: SELECTABLE_COLUMN_WIDTH,
+                                          minWidth: SELECTABLE_COLUMN_WIDTH,
+                                          maxWidth: SELECTABLE_COLUMN_WIDTH
+                                        },
+                                        onClick: (e) => e.stopPropagation(),
+                                        children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(SCheckbox, { value: isSel, onValueChange: () => toggleRow(row) }) })
+                                      }
+                                    ),
+                                    visibleCols.map((col, i) => {
+                                      const tdClassName = cn(
                                         // 원본 .td: 컬럼 폭에 맞춰 내용 말줄임(overflow hidden + ellipsis) + 행 구분선(border-b)
                                         // 셀 배경은 흰색으로 채워 뒤 배경이 비치지 않게 하고, hover 시 행 배경(grey_05)을 따른다.
                                         "overflow-hidden text-ellipsis whitespace-nowrap border-b border-solid border-[color:var(--cmp-table-border-color)] text-[12px] leading-[20px] text-[color:var(--sys-color-fg-primary)]",
                                         rowBg,
-                                        "group-hover/table-row:bg-[var(--color-grey-05)]",
+                                        !noHover && "group-hover/table-row:bg-[var(--color-grey-05)]",
                                         stickyShadowClass(i),
                                         typeof col.tdClass === "function" ? col.tdClass(row) : col.tdClass
-                                      ),
-                                      style: {
+                                      );
+                                      const tdStyle = {
                                         paddingLeft: cellPadX,
                                         paddingRight: cellPadX,
                                         paddingTop: cellPadY,
                                         paddingBottom: cellPadY,
                                         textAlign: col.align ?? "left",
                                         ...cellStyle(i)
-                                      },
-                                      children: col.render ? col.render(row, cellValue(col, row)) : cellValue(col, row)
-                                    },
-                                    col.name
-                                  ))
-                                ]
-                              },
-                              row[rowKey] ?? ri
-                            );
-                          }),
-                          useVirtualScroll && bottomSpacer > 0 && /* @__PURE__ */ jsx("tr", { "aria-hidden": true, style: { height: bottomSpacer }, children: /* @__PURE__ */ jsx("td", { colSpan: totalColSpan, className: "p-0" }) })
-                        ] })
-                      ]
-                    }
-                  )
-                }
+                                      };
+                                      if (col.renderCell) {
+                                        const cell = col.renderCell({
+                                          row,
+                                          value: cellValue(col, row),
+                                          column: col,
+                                          colIndex: i,
+                                          rowIndex: ri,
+                                          isSelected: isSel,
+                                          className: tdClassName,
+                                          style: tdStyle
+                                        });
+                                        if (cell == null || cell === false) return null;
+                                        return /* @__PURE__ */ jsx(Fragment$1, { children: cell }, col.name);
+                                      }
+                                      return /* @__PURE__ */ jsx("td", { className: tdClassName, style: tdStyle, children: col.render ? col.render(row, cellValue(col, row)) : cellValue(col, row) }, col.name);
+                                    })
+                                  ]
+                                },
+                                row[rowKey] ?? ri
+                              );
+                            }),
+                            useVirtualScroll && bottomSpacer > 0 && /* @__PURE__ */ jsx("tr", { "aria-hidden": true, style: { height: bottomSpacer }, children: /* @__PURE__ */ jsx("td", { colSpan: totalColSpan, className: "p-0" }) })
+                          ] })
+                        ]
+                      }
+                    )
+                  }
+                )
               ),
               isNoData && /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx(
@@ -5010,7 +5031,7 @@ var STable = forwardRef(function STable2({
                     className: "pointer-events-none absolute left-0 right-0 top-0 z-[31] h-[var(--cmp-table-header-height)] bg-white/60"
                   }
                 ),
-                /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute bottom-0 left-0 right-0 top-[var(--cmp-table-header-height)] z-[30] flex items-center justify-center bg-white/60 text-[12px] text-[color:var(--color-grey-65)]", children: /* @__PURE__ */ jsx("div", { className: "flex min-h-[60px] w-full items-center justify-center", children: noDataLabel }) })
+                !showNoDataSlot && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute bottom-0 left-0 right-0 top-[var(--cmp-table-header-height)] z-[30] flex items-center justify-center bg-white/60 text-[12px] text-[color:var(--color-grey-65)]", children: /* @__PURE__ */ jsx("div", { className: "flex min-h-[60px] w-full items-center justify-center", children: noDataLabel }) })
               ] }),
               isLoading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-white/60", children: /* @__PURE__ */ jsx(SCircleProgress, { indeterminate: true }) })
             ]