@topgrid/grid-pro-header 0.1.0

package/README.md

@@ -0,0 +1,88 @@
+# @topgrid/grid-pro-header
+
+Pro: Multi-row Header (Column Groups)
+
+Provides multi-row header (column group) support for TOMIS Grid — merge columns under shared group headers, with full TanStack Table column group API integration.
+
+## Installation
+
+```bash
+pnpm add @topgrid/grid-pro-header
+# or
+npm install @topgrid/grid-pro-header
+```
+
+## License Activation
+
+> **This is a Pro package requiring a valid license key.**
+
+```tsx
+import { setLicenseKey } from '@topgrid/grid-license';
+
+// Call once at your app entry point (e.g., main.tsx)
+setLicenseKey('YOUR-LICENSE-KEY');
+```
+
+Without a valid license, the component will render a watermark.
+Contact [sales@topvel.com](mailto:sales@topvel.com) to obtain a license key.
+
+## Peer Dependencies
+
+| Package | Version |
+|---------|---------|
+| `@tanstack/react-table` | `^8.0.0` |
+| `react` | `^18.0.0 \|\| ^19.0.0` |
+| `react-dom` | `^18.0.0 \|\| ^19.0.0` |
+
+## Usage
+
+```tsx
+import { setLicenseKey } from '@topgrid/grid-license';
+import { MultiRowHeader, createColumnGroup } from '@topgrid/grid-pro-header';
+
+setLicenseKey('YOUR-LICENSE-KEY');
+
+// Define column groups
+const columnGroups = createColumnGroup([
+  {
+    header: 'Personal Info',
+    columns: [
+      { accessorKey: 'firstName', header: 'First Name' },
+      { accessorKey: 'lastName', header: 'Last Name' },
+    ],
+  },
+  {
+    header: 'Contact',
+    columns: [
+      { accessorKey: 'email', header: 'Email' },
+      { accessorKey: 'phone', header: 'Phone' },
+    ],
+  },
+]);
+
+export function GroupedGrid({ data }) {
+  return (
+    <MultiRowHeader columns={columnGroups} data={data} />
+  );
+}
+```
+
+## Main API
+
+| Export | Description |
+|--------|-------------|
+| `MultiRowHeader` | Grid component with multi-row grouped header |
+| `createColumnGroup` | Helper to define column group configurations |
+| `GroupedHeaderGrid` | Legacy alias for `MultiRowHeader` (deprecated) |
+| `ColumnGroupConfig` | Column group configuration type |
+| `MultiRowHeaderProps` | Props type for `<MultiRowHeader>` |
+
+## License
+
+SEE LICENSE IN [EULA.md](./EULA.md)
+
+License terms subject to change. Contact [sales@topvel.com](mailto:sales@topvel.com) for current EULA.
+
+---
+
+[Documentation](https://grid.tomis.dev) | [Pricing](https://topvel.com/grid/pricing)

package/dist/index.cjs

@@ -0,0 +1,229 @@
+'use strict';
+
+var gridLicense = require('@topgrid/grid-license');
+var react = require('react');
+var reactTable = require('@tanstack/react-table');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/index.ts
+
+// src/createColumnGroup.ts
+function createColumnGroup(config) {
+  return {
+    header: config.header,
+    columns: config.columns
+  };
+}
+function getHeaderLeftOffset(header) {
+  const direct = header.column.getStart("left");
+  if (direct !== void 0) return direct;
+  const firstLeaf = header.subHeaders[0]?.column;
+  return firstLeaf?.getStart("left") ?? 0;
+}
+function MultiRowHeader({
+  table,
+  enableStickyHeader,
+  frozenColumns,
+  enableGroupToggle
+}) {
+  const _lic = gridLicense.useLicenseStatus();
+  const headerGroups = table.getHeaderGroups();
+  const visibleLeafCount = table.getVisibleLeafColumns().length;
+  return /* @__PURE__ */ jsxRuntime.jsxs("thead", { className: "bg-gray-50", children: [
+    _lic.watermarkRequired && visibleLeafCount > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+      "tr",
+      {
+        ...enableStickyHeader === true ? { className: "sticky top-0 z-20" } : {},
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "th",
+          {
+            colSpan: visibleLeafCount,
+            className: "relative bg-yellow-50 px-4 py-1 text-center text-xs text-gray-500",
+            children: /* @__PURE__ */ jsxRuntime.jsx(gridLicense.Watermark, { required: true })
+          }
+        )
+      }
+    ) : null,
+    headerGroups.map((headerGroup, rowIndex) => {
+      const trProps = {
+        ...enableStickyHeader === true && rowIndex === 0 && {
+          className: "sticky top-0 z-10"
+        },
+        ...enableStickyHeader === true && rowIndex > 0 && {
+          className: "sticky z-10",
+          style: {
+            top: `calc(var(--grid-header-row-height, 40px) * ${rowIndex})`
+          }
+        }
+      };
+      return /* @__PURE__ */ jsxRuntime.jsx("tr", { ...trProps, children: headerGroup.headers.map((header) => {
+        const isFrozen = (frozenColumns ?? 0) > 0 && header.column.getIsPinned() === "left";
+        const frozenZClass = isFrozen && enableStickyHeader === true ? "sticky z-30" : isFrozen ? "sticky z-20" : "";
+        const thStyle = isFrozen ? { left: `${getHeaderLeftOffset(header)}px` } : {};
+        const isLeaf = header.subHeaders.length === 0;
+        const allLeavesHidden = !isLeaf && header.column.getLeafColumns().every((c) => !c.getIsVisible());
+        const groupClickHandler = enableGroupToggle === true && !isLeaf ? () => {
+          const leafCols = header.column.getLeafColumns();
+          leafCols.forEach((c) => c.toggleVisibility(allLeavesHidden));
+        } : void 0;
+        const effectiveColSpan = enableGroupToggle === true && allLeavesHidden ? 1 : header.colSpan;
+        if (header.isPlaceholder) {
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "th",
+            {
+              colSpan: effectiveColSpan,
+              className: `px-4 py-3 border border-gray-200${frozenZClass ? ` ${frozenZClass}` : ""}`,
+              ...isFrozen ? { style: thStyle } : {}
+            },
+            header.id
+          );
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "th",
+          {
+            colSpan: effectiveColSpan,
+            className: `px-4 py-3 text-center text-xs font-medium text-gray-600 uppercase tracking-wider border border-gray-200 whitespace-nowrap select-none${header.column.getCanSort() && isLeaf ? " cursor-pointer hover:bg-gray-100" : ""}${enableGroupToggle === true && !isLeaf ? " cursor-pointer hover:bg-gray-100" : ""}${frozenZClass ? ` ${frozenZClass}` : ""}`,
+            ...isFrozen ? { style: thStyle } : {},
+            onClick: isLeaf ? header.column.getToggleSortingHandler() : groupClickHandler,
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-1", children: [
+              reactTable.flexRender(header.column.columnDef.header, header.getContext()),
+              header.column.getCanSort() && isLeaf && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: { asc: "\u25B2", desc: "\u25BC" }[header.column.getIsSorted()] ?? "\u21C5" }),
+              enableGroupToggle === true && !isLeaf && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400 ml-1", children: allLeavesHidden ? "\u25B6" : "\u25BC" })
+            ] })
+          },
+          header.id
+        );
+      }) }, headerGroup.id);
+    })
+  ] });
+}
+function GroupedHeaderGrid({
+  data,
+  columns,
+  pagination,
+  onRowClick,
+  loading = false,
+  emptyText = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.",
+  className = "",
+  enableGroupToggle
+}) {
+  const [sorting, setSorting] = react.useState([]);
+  const [pageIndex, setPageIndex] = react.useState(0);
+  const [pageSize] = react.useState(pagination?.pageSize ?? 20);
+  const table = reactTable.useReactTable({
+    data,
+    columns,
+    state: {
+      sorting,
+      pagination: { pageIndex, pageSize }
+    },
+    onSortingChange: setSorting,
+    onPaginationChange: (updater) => {
+      const next = typeof updater === "function" ? updater({ pageIndex, pageSize }) : updater;
+      setPageIndex(next.pageIndex);
+    },
+    getCoreRowModel: reactTable.getCoreRowModel(),
+    getSortedRowModel: reactTable.getSortedRowModel(),
+    // C-29: exactOptionalPropertyTypes — conditional spread avoids assigning undefined
+    // to a non-optional property when pagination is absent.
+    ...pagination !== void 0 ? { getPaginationRowModel: reactTable.getPaginationRowModel() } : {},
+    manualPagination: false
+  });
+  const pageCount = table.getPageCount();
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex flex-col ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-40 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-spin rounded-full h-10 w-10 border-t-2 border-b-2 border-blue-500" }) }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto rounded-lg border border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "min-w-full text-sm border-collapse", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        MultiRowHeader,
+        {
+          table,
+          ...enableGroupToggle === true ? { enableGroupToggle: true } : {}
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "bg-white divide-y divide-gray-100", children: table.getRowModel().rows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
+        "td",
+        {
+          colSpan: table.getAllLeafColumns().length,
+          className: "px-4 py-10 text-center text-gray-400",
+          children: emptyText
+        }
+      ) }) : table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(
+        "tr",
+        {
+          className: `hover:bg-gray-50 ${onRowClick ? "cursor-pointer" : ""}`,
+          onClick: (e) => onRowClick?.(row.original, e),
+          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsxRuntime.jsx(
+            "td",
+            {
+              className: "px-4 py-3 whitespace-nowrap text-gray-700 border-r border-gray-100 last:border-r-0",
+              children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
+            },
+            cell.id
+          ))
+        },
+        row.id
+      )) })
+    ] }) }),
+    pagination !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-2 py-3 text-sm text-gray-600", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        "\uC804\uCCB4 ",
+        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: table.getFilteredRowModel().rows.length }),
+        "\uAC74"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => table.setPageIndex(0),
+            disabled: !table.getCanPreviousPage(),
+            className: "px-2 py-1 rounded border border-gray-300 disabled:opacity-40 hover:bg-gray-100",
+            children: "\xAB"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => table.previousPage(),
+            disabled: !table.getCanPreviousPage(),
+            className: "px-2 py-1 rounded border border-gray-300 disabled:opacity-40 hover:bg-gray-100",
+            children: "\u2039"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-3", children: [
+          pageIndex + 1,
+          " / ",
+          pageCount || 1
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => table.nextPage(),
+            disabled: !table.getCanNextPage(),
+            className: "px-2 py-1 rounded border border-gray-300 disabled:opacity-40 hover:bg-gray-100",
+            children: "\u203A"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => table.setPageIndex(pageCount - 1),
+            disabled: !table.getCanNextPage(),
+            className: "px-2 py-1 rounded border border-gray-300 disabled:opacity-40 hover:bg-gray-100",
+            children: "\xBB"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/index.ts
+gridLicense.checkLicense();
+
+exports.GroupedHeaderGrid = GroupedHeaderGrid;
+exports.MultiRowHeader = MultiRowHeader;
+exports.createColumnGroup = createColumnGroup;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/createColumnGroup.ts","../src/MultiRowHeader.tsx","../src/legacy/GroupedHeaderGrid.tsx","../src/index.ts"],"names":["useLicenseStatus","jsxs","jsx","Watermark","flexRender","useState","useReactTable","getCoreRowModel","getSortedRowModel","getPaginationRowModel","checkLicense"],"mappings":"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","file":"index.cjs","sourcesContent":["/**\r\n * createColumnGroup — thin wrapper to create a TanStack `GroupColumnDef<TData>`.\r\n *\r\n * Provides TypeScript generic type-safety for the standard TanStack column grouping pattern:\r\n * `{ header: string; columns: ColumnDef<TData>[] }`.\r\n *\r\n * @example\r\n * ```typescript\r\n * const infoGroup = createColumnGroup({\r\n *   header: '기본 정보',\r\n *   columns: [nameCol, deptCol],\r\n * });\r\n * ```\r\n *\r\n * @see AC-001 in G-001-spec.md — createColumnGroup signature\r\n * @see Section 5.1 in G-001-spec.md — API design\r\n */\r\n\r\nimport type { ColumnDef, GroupColumnDef } from '@tanstack/react-table';\r\n\r\n/**\r\n * Config object for `createColumnGroup`.\r\n *\r\n * @typeParam TData - The row data type of the table.\r\n */\r\nexport interface ColumnGroupConfig<TData> {\r\n  /** The display label for the column group header. */\r\n  header: string;\r\n  /** Leaf (or nested group) column definitions belonging to this group. */\r\n  columns: ColumnDef<TData>[];\r\n}\r\n\r\n/**\r\n * Creates a TanStack `GroupColumnDef<TData>` from a typed config object.\r\n *\r\n * This is a thin wrapper — no logic beyond type narrowing. The returned\r\n * object is identical to writing `{ header, columns }` inline, but provides\r\n * generic type-checking at the call site.\r\n *\r\n * @typeParam TData - The row data type of the table.\r\n * @param config - `ColumnGroupConfig<TData>` with `header` and `columns`.\r\n * @returns A `GroupColumnDef<TData>` suitable for passing to `useReactTable`.\r\n */\r\nexport function createColumnGroup<TData>(\r\n  config: ColumnGroupConfig<TData>,\r\n): GroupColumnDef<TData> {\r\n  return {\r\n    header: config.header,\r\n    columns: config.columns,\r\n  };\r\n}\r\n","/**\r\n * MultiRowHeader — renders a multi-row `<thead>` section from TanStack\r\n * `table.getHeaderGroups()`.\r\n *\r\n * Extracts the header rendering logic from GroupedHeaderGrid.tsx (L75-117)\r\n * into a reusable Pro-package component. Uses only TanStack v8 standard APIs\r\n * (C-2): `getHeaderGroups`, `header.isPlaceholder`, `header.colSpan`,\r\n * `header.subHeaders`, `flexRender`.\r\n *\r\n * G-002 additions: `enableStickyHeader` prop for multi-row sticky (AC-001),\r\n * `frozenColumns` prop as on/off switch for column pinning left-offset (AC-002),\r\n * CSS variable `--grid-header-row-height` based top offset (AC-003).\r\n *\r\n * G-003 additions: `enableGroupToggle` prop for group header click to toggle\r\n * child column visibility (AC-001). Group cells get collapse icon ▼/▶ and\r\n * click handler; leaf cells retain sort handler (AC-002, D2 decision).\r\n *\r\n * Flat columns mixed with group columns are handled automatically by TanStack's\r\n * placeholder mechanism — do NOT add custom rowSpan calculation (spec §11.2).\r\n *\r\n * @see AC-001, AC-002, AC-003 in G-002-spec.md\r\n * @see Section 5.1/5.2 in G-002-spec.md — API design\r\n * @see Section 11.2/11.4 in G-002-spec.md — implementation guidelines\r\n * @see Section 6.1, 11.1 in G-003-spec.md — enableGroupToggle implementation\r\n */\r\n\r\nimport { type CSSProperties } from 'react';\r\nimport { flexRender, type Header, type Table } from '@tanstack/react-table';\r\nimport { useLicenseStatus, Watermark } from '@topgrid/grid-license';\r\n\r\n/**\r\n * Props for `MultiRowHeader`.\r\n *\r\n * @typeParam TData - The row data type of the table.\r\n */\r\nexport interface MultiRowHeaderProps<TData = unknown> {\r\n  /**\r\n   * The TanStack table instance. Provides `getHeaderGroups()` used for\r\n   * multi-row header rendering.\r\n   */\r\n  table: Table<TData>;\r\n  /**\r\n   * When true, applies sticky positioning to each header row so the multi-row\r\n   * header remains fixed at the viewport top during vertical scroll (AC-001).\r\n   * Default: false (G-001 behaviour preserved — breaking: false).\r\n   */\r\n  enableStickyHeader?: boolean;\r\n  /**\r\n   * Number of columns pinned on the left that should receive `sticky left`\r\n   * positioning. Acts as an on/off switch; the actual frozen column identities\r\n   * are determined from TanStack's `columnPinning.left` state via\r\n   * `column.getIsPinned() === 'left'` (AC-002, D2 decision).\r\n   * 0 or omitted: frozen positioning inactive.\r\n   */\r\n  frozenColumns?: number;\r\n  /**\r\n   * When true, group header cells (non-leaf) become clickable toggles that\r\n   * show/hide all child (leaf) columns at once (G-003, AC-001).\r\n   * Clicking a group header that has all leaves hidden will show them all;\r\n   * clicking one with any visible leaf will hide them all.\r\n   * Leaf columns retain their sort click handler regardless.\r\n   * Default: false (G-001/G-002 behaviour preserved — breaking: false).\r\n   */\r\n  enableGroupToggle?: boolean;\r\n}\r\n\r\n/**\r\n * Returns the left pixel offset for a frozen header cell (AC-002, EC-05).\r\n *\r\n * TanStack's `column.getStart('left')` returns the correct offset for leaf\r\n * columns. For group header cells it may return `undefined`; in that case the\r\n * first leaf child's offset is used as a fallback (spec §11.4 EC-05).\r\n *\r\n * @typeParam TData - Row data type (matches the parent table's TData).\r\n * @see G-002-spec.md Section 11.4\r\n */\r\nfunction getHeaderLeftOffset<TData>(header: Header<TData, unknown>): number {\r\n  const direct = header.column.getStart('left');\r\n  if (direct !== undefined) return direct;\r\n  // EC-05 fallback: group header cell — use first leaf child's offset.\r\n  const firstLeaf = header.subHeaders[0]?.column;\r\n  return firstLeaf?.getStart('left') ?? 0;\r\n}\r\n\r\n/**\r\n * Renders a multi-row `<thead>` element from a TanStack table instance.\r\n *\r\n * Iterates `table.getHeaderGroups()` to produce one `<tr>` per header row.\r\n * Group header cells use `header.colSpan` (computed by TanStack automatically).\r\n * Placeholder cells (`header.isPlaceholder`) are rendered as empty `<th>` elements.\r\n * Sorting is enabled only on leaf columns (`!header.subHeaders.length`).\r\n *\r\n * @typeParam TData - The row data type of the table.\r\n * @param props - `MultiRowHeaderProps<TData>`.\r\n * @returns A `<thead>` JSX element with all header rows.\r\n */\r\nexport function MultiRowHeader<TData>({\r\n  table,\r\n  enableStickyHeader,\r\n  frozenColumns,\r\n  enableGroupToggle,\r\n}: MultiRowHeaderProps<TData>): JSX.Element {\r\n  // ADR-MOD-GRID-REFACTOR-2026-05-17-001 — license watermark wiring (H-D pattern)\r\n  // sub-spec §8 Step 4: extra <tr><th colSpan> watermark row inside <thead>.\r\n  // §9.3 D-3 = (a): sticky top-0 when enableStickyHeader is true.\r\n  const _lic = useLicenseStatus();\r\n  const headerGroups = table.getHeaderGroups();\r\n  const visibleLeafCount = table.getVisibleLeafColumns().length;\r\n\r\n  return (\r\n    <thead className=\"bg-gray-50\">\r\n      {_lic.watermarkRequired && visibleLeafCount > 0 ? (\r\n        <tr\r\n          {...(enableStickyHeader === true\r\n            ? { className: 'sticky top-0 z-20' }\r\n            : {})}\r\n        >\r\n          <th\r\n            colSpan={visibleLeafCount}\r\n            className=\"relative bg-yellow-50 px-4 py-1 text-center text-xs text-gray-500\"\r\n          >\r\n            <Watermark required />\r\n          </th>\r\n        </tr>\r\n      ) : null}\r\n      {headerGroups.map((headerGroup, rowIndex) => {\r\n        // AC-001: sticky row props — C-29 conditional spread pattern.\r\n        // Row 0: sticky top-0 z-10 (Tailwind only, no inline style needed).\r\n        // Row N≥1: sticky z-10 + inline style top: calc(var(--grid-header-row-height, 40px) * N).\r\n        const trProps = {\r\n          ...(enableStickyHeader === true && rowIndex === 0 && {\r\n            className: 'sticky top-0 z-10',\r\n          }),\r\n          ...(enableStickyHeader === true && rowIndex > 0 && {\r\n            className: 'sticky z-10',\r\n            style: {\r\n              top: `calc(var(--grid-header-row-height, 40px) * ${rowIndex})`,\r\n            } as CSSProperties,\r\n          }),\r\n        };\r\n\r\n        return (\r\n          <tr key={headerGroup.id} {...trProps}>\r\n            {headerGroup.headers.map((header) => {\r\n              // AC-002: frozen column detection via TanStack native API (D2 decision).\r\n              // frozenColumns > 0 acts as the feature on/off switch;\r\n              // actual pinned identity comes from TanStack columnPinning state.\r\n              const isFrozen =\r\n                (frozenColumns ?? 0) > 0 &&\r\n                header.column.getIsPinned() === 'left';\r\n\r\n              // D4: z-index layers.\r\n              // frozen + sticky intersection → z-30.\r\n              // frozen only (sticky off) → z-20.\r\n              // Neither → no extra z-class.\r\n              const frozenZClass =\r\n                isFrozen && enableStickyHeader === true\r\n                  ? 'sticky z-30'\r\n                  : isFrozen\r\n                  ? 'sticky z-20'\r\n                  : '';\r\n\r\n              // AC-002: left offset in px (inline style — dynamic runtime value, C-5 exception).\r\n              // EC-05 fallback: group cell getStart('left') may be undefined → subHeaders[0] fallback.\r\n              const thStyle: CSSProperties = isFrozen\r\n                ? { left: `${getHeaderLeftOffset(header as Header<unknown, unknown>)}px` }\r\n                : {};\r\n\r\n              // Leaf columns: sorting enabled. Group columns: group toggle (if enabled).\r\n              const isLeaf = header.subHeaders.length === 0;\r\n\r\n              // G-003 AC-001: pre-compute allLeavesHidden once per non-leaf header.\r\n              // Used for (a) click handler, (b) effectiveColSpan, (c) collapse icon.\r\n              const allLeavesHidden =\r\n                !isLeaf &&\r\n                header.column.getLeafColumns().every((c) => !c.getIsVisible());\r\n\r\n              // G-003 AC-001: group click handler — toggle all leaf column visibility.\r\n              // allLeavesHidden → show all (true); any visible leaf → hide all (false).\r\n              const groupClickHandler =\r\n                enableGroupToggle === true && !isLeaf\r\n                  ? () => {\r\n                      const leafCols = header.column.getLeafColumns();\r\n                      leafCols.forEach((c) => c.toggleVisibility(allLeavesHidden));\r\n                    }\r\n                  : undefined;\r\n\r\n              // G-003: effectiveColSpan — collapsed group occupies 1 column (spec §6.1).\r\n              const effectiveColSpan =\r\n                enableGroupToggle === true && allLeavesHidden\r\n                  ? 1\r\n                  : header.colSpan;\r\n\r\n              // isPlaceholder: filler cell for multi-row headers (TanStack placeholder mechanism).\r\n              // Flat columns in the group row appear as placeholder cells — rendered empty.\r\n              if (header.isPlaceholder) {\r\n                return (\r\n                  <th\r\n                    key={header.id}\r\n                    colSpan={effectiveColSpan}\r\n                    className={`px-4 py-3 border border-gray-200${frozenZClass ? ` ${frozenZClass}` : ''}`}\r\n                    {...(isFrozen ? { style: thStyle } : {})}\r\n                  />\r\n                );\r\n              }\r\n\r\n              return (\r\n                <th\r\n                  key={header.id}\r\n                  colSpan={effectiveColSpan}\r\n                  className={`px-4 py-3 text-center text-xs font-medium text-gray-600 uppercase tracking-wider border border-gray-200 whitespace-nowrap select-none${\r\n                    header.column.getCanSort() && isLeaf\r\n                      ? ' cursor-pointer hover:bg-gray-100'\r\n                      : ''\r\n                  }${\r\n                    enableGroupToggle === true && !isLeaf\r\n                      ? ' cursor-pointer hover:bg-gray-100'\r\n                      : ''\r\n                  }${frozenZClass ? ` ${frozenZClass}` : ''}`}\r\n                  {...(isFrozen ? { style: thStyle } : {})}\r\n                  onClick={\r\n                    isLeaf ? header.column.getToggleSortingHandler() : groupClickHandler\r\n                  }\r\n                >\r\n                  <div className=\"flex items-center justify-center gap-1\">\r\n                    {flexRender(header.column.columnDef.header, header.getContext())}\r\n                    {header.column.getCanSort() && isLeaf && (\r\n                      <span className=\"text-gray-400\">\r\n                        {({ asc: '▲', desc: '▼' } as Record<string, string>)[\r\n                          header.column.getIsSorted() as string\r\n                        ] ?? '⇅'}\r\n                      </span>\r\n                    )}\r\n                    {enableGroupToggle === true && !isLeaf && (\r\n                      <span className=\"text-gray-400 ml-1\">\r\n                        {allLeavesHidden ? '▶' : '▼'}\r\n                      </span>\r\n                    )}\r\n                  </div>\r\n                </th>\r\n              );\r\n            })}\r\n          </tr>\r\n        );\r\n      })}\r\n    </thead>\r\n  );\r\n}\r\n","/**\r\n * GroupedHeaderGrid — legacy alias component (G-003, C-6 deprecation alias).\r\n *\r\n * Wraps `useReactTable` + `MultiRowHeader` + tbody + pagination into a single\r\n * self-contained component, preserving the AS-IS GroupedHeaderGrid API surface\r\n * from tw-framework-front/src/components/tomis/Grid/GroupedHeaderGrid.tsx (L0).\r\n *\r\n * Behaviour and classNames are ported verbatim from L0 (C-17 visual preservation).\r\n * `verifyOrWarn` is intentionally absent here — it runs via index.ts side-effect.\r\n *\r\n * D3 decision: inline type aliases for GridPaginationOptions / GridRowSelectionOptions\r\n * to avoid reverse dependency on tw-framework-front.\r\n *\r\n * @see G-003-spec.md Section 6.2 — legacy/GroupedHeaderGrid structure\r\n * @see C-6 — 1 minor version deprecation alias (breaking: false)\r\n * @see C-17 — AS-IS L0 className is authoritative\r\n */\r\n\r\nimport { useState } from 'react';\r\nimport type { MouseEvent } from 'react';\r\nimport {\r\n  useReactTable,\r\n  getCoreRowModel,\r\n  getSortedRowModel,\r\n  getPaginationRowModel,\r\n  flexRender,\r\n  type SortingState,\r\n  type ColumnDef,\r\n} from '@tanstack/react-table';\r\nimport type { GridPaginationOptions, GridRowSelectionOptions } from '@topgrid/grid-core';\r\nimport { MultiRowHeader } from '../MultiRowHeader';\r\n\r\n/**\r\n * Props for the legacy `GroupedHeaderGrid` wrapper component.\r\n *\r\n * @typeParam TData - The row data type.\r\n * @deprecated Migrate to composing `useReactTable` + `MultiRowHeader` directly.\r\n */\r\nexport interface GroupedHeaderGridProps<TData = unknown> {\r\n  data: TData[];\r\n  /**\r\n   * Pass grouped column definitions using TanStack Table's native column grouping.\r\n   * Use `{ header: 'Group', columns: [...leafColumns] }` structure for grouping.\r\n   */\r\n  columns: ColumnDef<TData>[];\r\n  pagination?: GridPaginationOptions;\r\n  rowSelection?: GridRowSelectionOptions<TData>;\r\n  onRowClick?: (row: TData, event: MouseEvent<HTMLTableRowElement>) => void;\r\n  loading?: boolean;\r\n  emptyText?: string;\r\n  className?: string;\r\n  /** G-003 AC-001: enable group header click to toggle child column visibility. */\r\n  enableGroupToggle?: boolean;\r\n}\r\n\r\n/**\r\n * Legacy self-contained grid component with grouped multi-row headers.\r\n *\r\n * Delegates header rendering to `MultiRowHeader` from `@topgrid/grid-pro-header`.\r\n * tbody and pagination are ported verbatim from AS-IS L0 (C-17).\r\n *\r\n * @typeParam TData - The row data type (must extend `object`).\r\n * @deprecated Prefer composing `useReactTable` + `MultiRowHeader` directly.\r\n */\r\nexport function GroupedHeaderGrid<TData extends object>({\r\n  data,\r\n  columns,\r\n  pagination,\r\n  onRowClick,\r\n  loading = false,\r\n  emptyText = '데이터가 없습니다.',\r\n  className = '',\r\n  enableGroupToggle,\r\n}: GroupedHeaderGridProps<TData>): JSX.Element {\r\n  const [sorting, setSorting] = useState<SortingState>([]);\r\n  const [pageIndex, setPageIndex] = useState(0);\r\n  const [pageSize] = useState(pagination?.pageSize ?? 20);\r\n\r\n  const table = useReactTable({\r\n    data,\r\n    columns,\r\n    state: {\r\n      sorting,\r\n      pagination: { pageIndex, pageSize },\r\n    },\r\n    onSortingChange: setSorting,\r\n    onPaginationChange: (updater) => {\r\n      const next =\r\n        typeof updater === 'function' ? updater({ pageIndex, pageSize }) : updater;\r\n      setPageIndex(next.pageIndex);\r\n    },\r\n    getCoreRowModel: getCoreRowModel(),\r\n    getSortedRowModel: getSortedRowModel(),\r\n    // C-29: exactOptionalPropertyTypes — conditional spread avoids assigning undefined\r\n    // to a non-optional property when pagination is absent.\r\n    ...(pagination !== undefined\r\n      ? { getPaginationRowModel: getPaginationRowModel() }\r\n      : {}),\r\n    manualPagination: false,\r\n  });\r\n\r\n  const pageCount = table.getPageCount();\r\n\r\n  if (loading) {\r\n    return (\r\n      <div className={`flex flex-col ${className}`}>\r\n        <div className=\"h-40 flex items-center justify-center\">\r\n          <div className=\"animate-spin rounded-full h-10 w-10 border-t-2 border-b-2 border-blue-500\" />\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div className={`flex flex-col ${className}`}>\r\n      <div className=\"overflow-x-auto rounded-lg border border-gray-200\">\r\n        <table className=\"min-w-full text-sm border-collapse\">\r\n          <MultiRowHeader\r\n            table={table}\r\n            {...(enableGroupToggle === true ? { enableGroupToggle: true } : {})}\r\n          />\r\n          <tbody className=\"bg-white divide-y divide-gray-100\">\r\n            {table.getRowModel().rows.length === 0 ? (\r\n              <tr>\r\n                <td\r\n                  colSpan={table.getAllLeafColumns().length}\r\n                  className=\"px-4 py-10 text-center text-gray-400\"\r\n                >\r\n                  {emptyText}\r\n                </td>\r\n              </tr>\r\n            ) : (\r\n              table.getRowModel().rows.map((row) => (\r\n                <tr\r\n                  key={row.id}\r\n                  className={`hover:bg-gray-50 ${onRowClick ? 'cursor-pointer' : ''}`}\r\n                  onClick={(e) => onRowClick?.(row.original, e)}\r\n                >\r\n                  {row.getVisibleCells().map((cell) => (\r\n                    <td\r\n                      key={cell.id}\r\n                      className=\"px-4 py-3 whitespace-nowrap text-gray-700 border-r border-gray-100 last:border-r-0\"\r\n                    >\r\n                      {flexRender(cell.column.columnDef.cell, cell.getContext())}\r\n                    </td>\r\n                  ))}\r\n                </tr>\r\n              ))\r\n            )}\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n\r\n      {pagination !== undefined && (\r\n        <div className=\"flex items-center justify-between px-2 py-3 text-sm text-gray-600\">\r\n          <span>\r\n            전체 <strong>{table.getFilteredRowModel().rows.length}</strong>건\r\n          </span>\r\n          <div className=\"flex items-center gap-1\">\r\n            <button\r\n              onClick={() => table.setPageIndex(0)}\r\n              disabled={!table.getCanPreviousPage()}\r\n              className=\"px-2 py-1 rounded border border-gray-300 disabled:opacity-40 hover:bg-gray-100\"\r\n            >\r\n              {'«'}\r\n            </button>\r\n            <button\r\n              onClick={() => table.previousPage()}\r\n              disabled={!table.getCanPreviousPage()}\r\n              className=\"px-2 py-1 rounded border border-gray-300 disabled:opacity-40 hover:bg-gray-100\"\r\n            >\r\n              {'‹'}\r\n            </button>\r\n            <span className=\"px-3\">\r\n              {pageIndex + 1} / {pageCount || 1}\r\n            </span>\r\n            <button\r\n              onClick={() => table.nextPage()}\r\n              disabled={!table.getCanNextPage()}\r\n              className=\"px-2 py-1 rounded border border-gray-300 disabled:opacity-40 hover:bg-gray-100\"\r\n            >\r\n              {'›'}\r\n            </button>\r\n            <button\r\n              onClick={() => table.setPageIndex(pageCount - 1)}\r\n              disabled={!table.getCanNextPage()}\r\n              className=\"px-2 py-1 rounded border border-gray-300 disabled:opacity-40 hover:bg-gray-100\"\r\n            >\r\n              {'»'}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n","import { checkLicense } from '@topgrid/grid-license';\r\n\r\ncheckLicense();\r\n\r\n// createColumnGroup helper (AC-001)\r\nexport { createColumnGroup } from './createColumnGroup';\r\nexport type { ColumnGroupConfig } from './types';\r\n\r\n// MultiRowHeader component (AC-002, AC-003, AC-004)\r\nexport { MultiRowHeader } from './MultiRowHeader';\r\nexport type { MultiRowHeaderProps } from './types';\r\n\r\n// GroupedHeaderGrid legacy alias (G-003, C-6 deprecation alias)\r\nexport { GroupedHeaderGrid } from './legacy/GroupedHeaderGrid';\r\nexport type { GroupedHeaderGridProps } from './legacy/GroupedHeaderGrid';\r\n"]}

package/dist/index.d.cts

@@ -0,0 +1,173 @@
+import { ColumnDef, GroupColumnDef, Table } from '@tanstack/react-table';
+import { MouseEvent } from 'react';
+import { GridPaginationOptions, GridRowSelectionOptions } from '@topgrid/grid-core';
+
+/**
+ * createColumnGroup — thin wrapper to create a TanStack `GroupColumnDef<TData>`.
+ *
+ * Provides TypeScript generic type-safety for the standard TanStack column grouping pattern:
+ * `{ header: string; columns: ColumnDef<TData>[] }`.
+ *
+ * @example
+ * ```typescript
+ * const infoGroup = createColumnGroup({
+ *   header: '기본 정보',
+ *   columns: [nameCol, deptCol],
+ * });
+ * ```
+ *
+ * @see AC-001 in G-001-spec.md — createColumnGroup signature
+ * @see Section 5.1 in G-001-spec.md — API design
+ */
+
+/**
+ * Config object for `createColumnGroup`.
+ *
+ * @typeParam TData - The row data type of the table.
+ */
+interface ColumnGroupConfig<TData> {
+    /** The display label for the column group header. */
+    header: string;
+    /** Leaf (or nested group) column definitions belonging to this group. */
+    columns: ColumnDef<TData>[];
+}
+/**
+ * Creates a TanStack `GroupColumnDef<TData>` from a typed config object.
+ *
+ * This is a thin wrapper — no logic beyond type narrowing. The returned
+ * object is identical to writing `{ header, columns }` inline, but provides
+ * generic type-checking at the call site.
+ *
+ * @typeParam TData - The row data type of the table.
+ * @param config - `ColumnGroupConfig<TData>` with `header` and `columns`.
+ * @returns A `GroupColumnDef<TData>` suitable for passing to `useReactTable`.
+ */
+declare function createColumnGroup<TData>(config: ColumnGroupConfig<TData>): GroupColumnDef<TData>;
+
+/**
+ * MultiRowHeader — renders a multi-row `<thead>` section from TanStack
+ * `table.getHeaderGroups()`.
+ *
+ * Extracts the header rendering logic from GroupedHeaderGrid.tsx (L75-117)
+ * into a reusable Pro-package component. Uses only TanStack v8 standard APIs
+ * (C-2): `getHeaderGroups`, `header.isPlaceholder`, `header.colSpan`,
+ * `header.subHeaders`, `flexRender`.
+ *
+ * G-002 additions: `enableStickyHeader` prop for multi-row sticky (AC-001),
+ * `frozenColumns` prop as on/off switch for column pinning left-offset (AC-002),
+ * CSS variable `--grid-header-row-height` based top offset (AC-003).
+ *
+ * G-003 additions: `enableGroupToggle` prop for group header click to toggle
+ * child column visibility (AC-001). Group cells get collapse icon ▼/▶ and
+ * click handler; leaf cells retain sort handler (AC-002, D2 decision).
+ *
+ * Flat columns mixed with group columns are handled automatically by TanStack's
+ * placeholder mechanism — do NOT add custom rowSpan calculation (spec §11.2).
+ *
+ * @see AC-001, AC-002, AC-003 in G-002-spec.md
+ * @see Section 5.1/5.2 in G-002-spec.md — API design
+ * @see Section 11.2/11.4 in G-002-spec.md — implementation guidelines
+ * @see Section 6.1, 11.1 in G-003-spec.md — enableGroupToggle implementation
+ */
+
+/**
+ * Props for `MultiRowHeader`.
+ *
+ * @typeParam TData - The row data type of the table.
+ */
+interface MultiRowHeaderProps<TData = unknown> {
+    /**
+     * The TanStack table instance. Provides `getHeaderGroups()` used for
+     * multi-row header rendering.
+     */
+    table: Table<TData>;
+    /**
+     * When true, applies sticky positioning to each header row so the multi-row
+     * header remains fixed at the viewport top during vertical scroll (AC-001).
+     * Default: false (G-001 behaviour preserved — breaking: false).
+     */
+    enableStickyHeader?: boolean;
+    /**
+     * Number of columns pinned on the left that should receive `sticky left`
+     * positioning. Acts as an on/off switch; the actual frozen column identities
+     * are determined from TanStack's `columnPinning.left` state via
+     * `column.getIsPinned() === 'left'` (AC-002, D2 decision).
+     * 0 or omitted: frozen positioning inactive.
+     */
+    frozenColumns?: number;
+    /**
+     * When true, group header cells (non-leaf) become clickable toggles that
+     * show/hide all child (leaf) columns at once (G-003, AC-001).
+     * Clicking a group header that has all leaves hidden will show them all;
+     * clicking one with any visible leaf will hide them all.
+     * Leaf columns retain their sort click handler regardless.
+     * Default: false (G-001/G-002 behaviour preserved — breaking: false).
+     */
+    enableGroupToggle?: boolean;
+}
+/**
+ * Renders a multi-row `<thead>` element from a TanStack table instance.
+ *
+ * Iterates `table.getHeaderGroups()` to produce one `<tr>` per header row.
+ * Group header cells use `header.colSpan` (computed by TanStack automatically).
+ * Placeholder cells (`header.isPlaceholder`) are rendered as empty `<th>` elements.
+ * Sorting is enabled only on leaf columns (`!header.subHeaders.length`).
+ *
+ * @typeParam TData - The row data type of the table.
+ * @param props - `MultiRowHeaderProps<TData>`.
+ * @returns A `<thead>` JSX element with all header rows.
+ */
+declare function MultiRowHeader<TData>({ table, enableStickyHeader, frozenColumns, enableGroupToggle, }: MultiRowHeaderProps<TData>): JSX.Element;
+
+/**
+ * GroupedHeaderGrid — legacy alias component (G-003, C-6 deprecation alias).
+ *
+ * Wraps `useReactTable` + `MultiRowHeader` + tbody + pagination into a single
+ * self-contained component, preserving the AS-IS GroupedHeaderGrid API surface
+ * from tw-framework-front/src/components/tomis/Grid/GroupedHeaderGrid.tsx (L0).
+ *
+ * Behaviour and classNames are ported verbatim from L0 (C-17 visual preservation).
+ * `verifyOrWarn` is intentionally absent here — it runs via index.ts side-effect.
+ *
+ * D3 decision: inline type aliases for GridPaginationOptions / GridRowSelectionOptions
+ * to avoid reverse dependency on tw-framework-front.
+ *
+ * @see G-003-spec.md Section 6.2 — legacy/GroupedHeaderGrid structure
+ * @see C-6 — 1 minor version deprecation alias (breaking: false)
+ * @see C-17 — AS-IS L0 className is authoritative
+ */
+
+/**
+ * Props for the legacy `GroupedHeaderGrid` wrapper component.
+ *
+ * @typeParam TData - The row data type.
+ * @deprecated Migrate to composing `useReactTable` + `MultiRowHeader` directly.
+ */
+interface GroupedHeaderGridProps<TData = unknown> {
+    data: TData[];
+    /**
+     * Pass grouped column definitions using TanStack Table's native column grouping.
+     * Use `{ header: 'Group', columns: [...leafColumns] }` structure for grouping.
+     */
+    columns: ColumnDef<TData>[];
+    pagination?: GridPaginationOptions;
+    rowSelection?: GridRowSelectionOptions<TData>;
+    onRowClick?: (row: TData, event: MouseEvent<HTMLTableRowElement>) => void;
+    loading?: boolean;
+    emptyText?: string;
+    className?: string;
+    /** G-003 AC-001: enable group header click to toggle child column visibility. */
+    enableGroupToggle?: boolean;
+}
+/**
+ * Legacy self-contained grid component with grouped multi-row headers.
+ *
+ * Delegates header rendering to `MultiRowHeader` from `@topgrid/grid-pro-header`.
+ * tbody and pagination are ported verbatim from AS-IS L0 (C-17).
+ *
+ * @typeParam TData - The row data type (must extend `object`).
+ * @deprecated Prefer composing `useReactTable` + `MultiRowHeader` directly.
+ */
+declare function GroupedHeaderGrid<TData extends object>({ data, columns, pagination, onRowClick, loading, emptyText, className, enableGroupToggle, }: GroupedHeaderGridProps<TData>): JSX.Element;
+
+export { type ColumnGroupConfig, GroupedHeaderGrid, type GroupedHeaderGridProps, MultiRowHeader, type MultiRowHeaderProps, createColumnGroup };

package/dist/index.d.ts

@@ -0,0 +1,173 @@
+import { ColumnDef, GroupColumnDef, Table } from '@tanstack/react-table';
+import { MouseEvent } from 'react';
+import { GridPaginationOptions, GridRowSelectionOptions } from '@topgrid/grid-core';
+
+/**
+ * createColumnGroup — thin wrapper to create a TanStack `GroupColumnDef<TData>`.
+ *
+ * Provides TypeScript generic type-safety for the standard TanStack column grouping pattern:
+ * `{ header: string; columns: ColumnDef<TData>[] }`.
+ *
+ * @example
+ * ```typescript
+ * const infoGroup = createColumnGroup({
+ *   header: '기본 정보',
+ *   columns: [nameCol, deptCol],
+ * });
+ * ```
+ *
+ * @see AC-001 in G-001-spec.md — createColumnGroup signature
+ * @see Section 5.1 in G-001-spec.md — API design
+ */
+
+/**
+ * Config object for `createColumnGroup`.
+ *
+ * @typeParam TData - The row data type of the table.
+ */
+interface ColumnGroupConfig<TData> {
+    /** The display label for the column group header. */
+    header: string;
+    /** Leaf (or nested group) column definitions belonging to this group. */
+    columns: ColumnDef<TData>[];
+}
+/**
+ * Creates a TanStack `GroupColumnDef<TData>` from a typed config object.
+ *
+ * This is a thin wrapper — no logic beyond type narrowing. The returned
+ * object is identical to writing `{ header, columns }` inline, but provides
+ * generic type-checking at the call site.
+ *
+ * @typeParam TData - The row data type of the table.
+ * @param config - `ColumnGroupConfig<TData>` with `header` and `columns`.
+ * @returns A `GroupColumnDef<TData>` suitable for passing to `useReactTable`.
+ */
+declare function createColumnGroup<TData>(config: ColumnGroupConfig<TData>): GroupColumnDef<TData>;
+
+/**
+ * MultiRowHeader — renders a multi-row `<thead>` section from TanStack
+ * `table.getHeaderGroups()`.
+ *
+ * Extracts the header rendering logic from GroupedHeaderGrid.tsx (L75-117)
+ * into a reusable Pro-package component. Uses only TanStack v8 standard APIs
+ * (C-2): `getHeaderGroups`, `header.isPlaceholder`, `header.colSpan`,
+ * `header.subHeaders`, `flexRender`.
+ *
+ * G-002 additions: `enableStickyHeader` prop for multi-row sticky (AC-001),
+ * `frozenColumns` prop as on/off switch for column pinning left-offset (AC-002),
+ * CSS variable `--grid-header-row-height` based top offset (AC-003).
+ *
+ * G-003 additions: `enableGroupToggle` prop for group header click to toggle
+ * child column visibility (AC-001). Group cells get collapse icon ▼/▶ and
+ * click handler; leaf cells retain sort handler (AC-002, D2 decision).
+ *
+ * Flat columns mixed with group columns are handled automatically by TanStack's
+ * placeholder mechanism — do NOT add custom rowSpan calculation (spec §11.2).
+ *
+ * @see AC-001, AC-002, AC-003 in G-002-spec.md
+ * @see Section 5.1/5.2 in G-002-spec.md — API design
+ * @see Section 11.2/11.4 in G-002-spec.md — implementation guidelines
+ * @see Section 6.1, 11.1 in G-003-spec.md — enableGroupToggle implementation
+ */
+
+/**
+ * Props for `MultiRowHeader`.
+ *
+ * @typeParam TData - The row data type of the table.
+ */
+interface MultiRowHeaderProps<TData = unknown> {
+    /**
+     * The TanStack table instance. Provides `getHeaderGroups()` used for
+     * multi-row header rendering.
+     */
+    table: Table<TData>;
+    /**
+     * When true, applies sticky positioning to each header row so the multi-row
+     * header remains fixed at the viewport top during vertical scroll (AC-001).
+     * Default: false (G-001 behaviour preserved — breaking: false).
+     */
+    enableStickyHeader?: boolean;
+    /**
+     * Number of columns pinned on the left that should receive `sticky left`
+     * positioning. Acts as an on/off switch; the actual frozen column identities
+     * are determined from TanStack's `columnPinning.left` state via
+     * `column.getIsPinned() === 'left'` (AC-002, D2 decision).
+     * 0 or omitted: frozen positioning inactive.
+     */
+    frozenColumns?: number;
+    /**
+     * When true, group header cells (non-leaf) become clickable toggles that
+     * show/hide all child (leaf) columns at once (G-003, AC-001).
+     * Clicking a group header that has all leaves hidden will show them all;
+     * clicking one with any visible leaf will hide them all.
+     * Leaf columns retain their sort click handler regardless.
+     * Default: false (G-001/G-002 behaviour preserved — breaking: false).
+     */
+    enableGroupToggle?: boolean;
+}
+/**
+ * Renders a multi-row `<thead>` element from a TanStack table instance.
+ *
+ * Iterates `table.getHeaderGroups()` to produce one `<tr>` per header row.
+ * Group header cells use `header.colSpan` (computed by TanStack automatically).
+ * Placeholder cells (`header.isPlaceholder`) are rendered as empty `<th>` elements.
+ * Sorting is enabled only on leaf columns (`!header.subHeaders.length`).
+ *
+ * @typeParam TData - The row data type of the table.
+ * @param props - `MultiRowHeaderProps<TData>`.
+ * @returns A `<thead>` JSX element with all header rows.
+ */
+declare function MultiRowHeader<TData>({ table, enableStickyHeader, frozenColumns, enableGroupToggle, }: MultiRowHeaderProps<TData>): JSX.Element;
+
+/**
+ * GroupedHeaderGrid — legacy alias component (G-003, C-6 deprecation alias).
+ *
+ * Wraps `useReactTable` + `MultiRowHeader` + tbody + pagination into a single
+ * self-contained component, preserving the AS-IS GroupedHeaderGrid API surface
+ * from tw-framework-front/src/components/tomis/Grid/GroupedHeaderGrid.tsx (L0).
+ *
+ * Behaviour and classNames are ported verbatim from L0 (C-17 visual preservation).
+ * `verifyOrWarn` is intentionally absent here — it runs via index.ts side-effect.
+ *
+ * D3 decision: inline type aliases for GridPaginationOptions / GridRowSelectionOptions
+ * to avoid reverse dependency on tw-framework-front.
+ *
+ * @see G-003-spec.md Section 6.2 — legacy/GroupedHeaderGrid structure
+ * @see C-6 — 1 minor version deprecation alias (breaking: false)
+ * @see C-17 — AS-IS L0 className is authoritative
+ */
+
+/**
+ * Props for the legacy `GroupedHeaderGrid` wrapper component.
+ *
+ * @typeParam TData - The row data type.
+ * @deprecated Migrate to composing `useReactTable` + `MultiRowHeader` directly.
+ */
+interface GroupedHeaderGridProps<TData = unknown> {
+    data: TData[];
+    /**
+     * Pass grouped column definitions using TanStack Table's native column grouping.
+     * Use `{ header: 'Group', columns: [...leafColumns] }` structure for grouping.
+     */
+    columns: ColumnDef<TData>[];
+    pagination?: GridPaginationOptions;
+    rowSelection?: GridRowSelectionOptions<TData>;
+    onRowClick?: (row: TData, event: MouseEvent<HTMLTableRowElement>) => void;
+    loading?: boolean;
+    emptyText?: string;
+    className?: string;
+    /** G-003 AC-001: enable group header click to toggle child column visibility. */
+    enableGroupToggle?: boolean;
+}
+/**
+ * Legacy self-contained grid component with grouped multi-row headers.
+ *
+ * Delegates header rendering to `MultiRowHeader` from `@topgrid/grid-pro-header`.
+ * tbody and pagination are ported verbatim from AS-IS L0 (C-17).
+ *
+ * @typeParam TData - The row data type (must extend `object`).
+ * @deprecated Prefer composing `useReactTable` + `MultiRowHeader` directly.
+ */
+declare function GroupedHeaderGrid<TData extends object>({ data, columns, pagination, onRowClick, loading, emptyText, className, enableGroupToggle, }: GroupedHeaderGridProps<TData>): JSX.Element;
+
+export { type ColumnGroupConfig, GroupedHeaderGrid, type GroupedHeaderGridProps, MultiRowHeader, type MultiRowHeaderProps, createColumnGroup };

package/dist/index.mjs

@@ -0,0 +1,225 @@
+import { checkLicense, useLicenseStatus, Watermark } from '@topgrid/grid-license';
+import { useState } from 'react';
+import { flexRender, useReactTable, getPaginationRowModel, getSortedRowModel, getCoreRowModel } from '@tanstack/react-table';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/index.ts
+
+// src/createColumnGroup.ts
+function createColumnGroup(config) {
+  return {
+    header: config.header,
+    columns: config.columns
+  };
+}
+function getHeaderLeftOffset(header) {
+  const direct = header.column.getStart("left");
+  if (direct !== void 0) return direct;
+  const firstLeaf = header.subHeaders[0]?.column;
+  return firstLeaf?.getStart("left") ?? 0;
+}
+function MultiRowHeader({
+  table,
+  enableStickyHeader,
+  frozenColumns,
+  enableGroupToggle
+}) {
+  const _lic = useLicenseStatus();
+  const headerGroups = table.getHeaderGroups();
+  const visibleLeafCount = table.getVisibleLeafColumns().length;
+  return /* @__PURE__ */ jsxs("thead", { className: "bg-gray-50", children: [
+    _lic.watermarkRequired && visibleLeafCount > 0 ? /* @__PURE__ */ jsx(
+      "tr",
+      {
+        ...enableStickyHeader === true ? { className: "sticky top-0 z-20" } : {},
+        children: /* @__PURE__ */ jsx(
+          "th",
+          {
+            colSpan: visibleLeafCount,
+            className: "relative bg-yellow-50 px-4 py-1 text-center text-xs text-gray-500",
+            children: /* @__PURE__ */ jsx(Watermark, { required: true })
+          }
+        )
+      }
+    ) : null,
+    headerGroups.map((headerGroup, rowIndex) => {
+      const trProps = {
+        ...enableStickyHeader === true && rowIndex === 0 && {
+          className: "sticky top-0 z-10"
+        },
+        ...enableStickyHeader === true && rowIndex > 0 && {
+          className: "sticky z-10",
+          style: {
+            top: `calc(var(--grid-header-row-height, 40px) * ${rowIndex})`
+          }
+        }
+      };
+      return /* @__PURE__ */ jsx("tr", { ...trProps, children: headerGroup.headers.map((header) => {
+        const isFrozen = (frozenColumns ?? 0) > 0 && header.column.getIsPinned() === "left";
+        const frozenZClass = isFrozen && enableStickyHeader === true ? "sticky z-30" : isFrozen ? "sticky z-20" : "";
+        const thStyle = isFrozen ? { left: `${getHeaderLeftOffset(header)}px` } : {};
+        const isLeaf = header.subHeaders.length === 0;
+        const allLeavesHidden = !isLeaf && header.column.getLeafColumns().every((c) => !c.getIsVisible());
+        const groupClickHandler = enableGroupToggle === true && !isLeaf ? () => {
+          const leafCols = header.column.getLeafColumns();
+          leafCols.forEach((c) => c.toggleVisibility(allLeavesHidden));
+        } : void 0;
+        const effectiveColSpan = enableGroupToggle === true && allLeavesHidden ? 1 : header.colSpan;
+        if (header.isPlaceholder) {
+          return /* @__PURE__ */ jsx(
+            "th",
+            {
+              colSpan: effectiveColSpan,
+              className: `px-4 py-3 border border-gray-200${frozenZClass ? ` ${frozenZClass}` : ""}`,
+              ...isFrozen ? { style: thStyle } : {}
+            },
+            header.id
+          );
+        }
+        return /* @__PURE__ */ jsx(
+          "th",
+          {
+            colSpan: effectiveColSpan,
+            className: `px-4 py-3 text-center text-xs font-medium text-gray-600 uppercase tracking-wider border border-gray-200 whitespace-nowrap select-none${header.column.getCanSort() && isLeaf ? " cursor-pointer hover:bg-gray-100" : ""}${enableGroupToggle === true && !isLeaf ? " cursor-pointer hover:bg-gray-100" : ""}${frozenZClass ? ` ${frozenZClass}` : ""}`,
+            ...isFrozen ? { style: thStyle } : {},
+            onClick: isLeaf ? header.column.getToggleSortingHandler() : groupClickHandler,
+            children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-1", children: [
+              flexRender(header.column.columnDef.header, header.getContext()),
+              header.column.getCanSort() && isLeaf && /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: { asc: "\u25B2", desc: "\u25BC" }[header.column.getIsSorted()] ?? "\u21C5" }),
+              enableGroupToggle === true && !isLeaf && /* @__PURE__ */ jsx("span", { className: "text-gray-400 ml-1", children: allLeavesHidden ? "\u25B6" : "\u25BC" })
+            ] })
+          },
+          header.id
+        );
+      }) }, headerGroup.id);
+    })
+  ] });
+}
+function GroupedHeaderGrid({
+  data,
+  columns,
+  pagination,
+  onRowClick,
+  loading = false,
+  emptyText = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.",
+  className = "",
+  enableGroupToggle
+}) {
+  const [sorting, setSorting] = useState([]);
+  const [pageIndex, setPageIndex] = useState(0);
+  const [pageSize] = useState(pagination?.pageSize ?? 20);
+  const table = useReactTable({
+    data,
+    columns,
+    state: {
+      sorting,
+      pagination: { pageIndex, pageSize }
+    },
+    onSortingChange: setSorting,
+    onPaginationChange: (updater) => {
+      const next = typeof updater === "function" ? updater({ pageIndex, pageSize }) : updater;
+      setPageIndex(next.pageIndex);
+    },
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    // C-29: exactOptionalPropertyTypes — conditional spread avoids assigning undefined
+    // to a non-optional property when pagination is absent.
+    ...pagination !== void 0 ? { getPaginationRowModel: getPaginationRowModel() } : {},
+    manualPagination: false
+  });
+  const pageCount = table.getPageCount();
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: `flex flex-col ${className}`, children: /* @__PURE__ */ jsx("div", { className: "h-40 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-10 w-10 border-t-2 border-b-2 border-blue-500" }) }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: `flex flex-col ${className}`, children: [
+    /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-lg border border-gray-200", children: /* @__PURE__ */ jsxs("table", { className: "min-w-full text-sm border-collapse", children: [
+      /* @__PURE__ */ jsx(
+        MultiRowHeader,
+        {
+          table,
+          ...enableGroupToggle === true ? { enableGroupToggle: true } : {}
+        }
+      ),
+      /* @__PURE__ */ jsx("tbody", { className: "bg-white divide-y divide-gray-100", children: table.getRowModel().rows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+        "td",
+        {
+          colSpan: table.getAllLeafColumns().length,
+          className: "px-4 py-10 text-center text-gray-400",
+          children: emptyText
+        }
+      ) }) : table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(
+        "tr",
+        {
+          className: `hover:bg-gray-50 ${onRowClick ? "cursor-pointer" : ""}`,
+          onClick: (e) => onRowClick?.(row.original, e),
+          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(
+            "td",
+            {
+              className: "px-4 py-3 whitespace-nowrap text-gray-700 border-r border-gray-100 last:border-r-0",
+              children: flexRender(cell.column.columnDef.cell, cell.getContext())
+            },
+            cell.id
+          ))
+        },
+        row.id
+      )) })
+    ] }) }),
+    pagination !== void 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2 py-3 text-sm text-gray-600", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        "\uC804\uCCB4 ",
+        /* @__PURE__ */ jsx("strong", { children: table.getFilteredRowModel().rows.length }),
+        "\uAC74"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => table.setPageIndex(0),
+            disabled: !table.getCanPreviousPage(),
+            className: "px-2 py-1 rounded border border-gray-300 disabled:opacity-40 hover:bg-gray-100",
+            children: "\xAB"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => table.previousPage(),
+            disabled: !table.getCanPreviousPage(),
+            className: "px-2 py-1 rounded border border-gray-300 disabled:opacity-40 hover:bg-gray-100",
+            children: "\u2039"
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "px-3", children: [
+          pageIndex + 1,
+          " / ",
+          pageCount || 1
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => table.nextPage(),
+            disabled: !table.getCanNextPage(),
+            className: "px-2 py-1 rounded border border-gray-300 disabled:opacity-40 hover:bg-gray-100",
+            children: "\u203A"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => table.setPageIndex(pageCount - 1),
+            disabled: !table.getCanNextPage(),
+            className: "px-2 py-1 rounded border border-gray-300 disabled:opacity-40 hover:bg-gray-100",
+            children: "\xBB"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/index.ts
+checkLicense();
+
+export { GroupedHeaderGrid, MultiRowHeader, createColumnGroup };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/createColumnGroup.ts","../src/MultiRowHeader.tsx","../src/legacy/GroupedHeaderGrid.tsx","../src/index.ts"],"names":["jsx","jsxs","flexRender"],"mappings":"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","file":"index.mjs","sourcesContent":["/**\r\n * createColumnGroup — thin wrapper to create a TanStack `GroupColumnDef<TData>`.\r\n *\r\n * Provides TypeScript generic type-safety for the standard TanStack column grouping pattern:\r\n * `{ header: string; columns: ColumnDef<TData>[] }`.\r\n *\r\n * @example\r\n * ```typescript\r\n * const infoGroup = createColumnGroup({\r\n *   header: '기본 정보',\r\n *   columns: [nameCol, deptCol],\r\n * });\r\n * ```\r\n *\r\n * @see AC-001 in G-001-spec.md — createColumnGroup signature\r\n * @see Section 5.1 in G-001-spec.md — API design\r\n */\r\n\r\nimport type { ColumnDef, GroupColumnDef } from '@tanstack/react-table';\r\n\r\n/**\r\n * Config object for `createColumnGroup`.\r\n *\r\n * @typeParam TData - The row data type of the table.\r\n */\r\nexport interface ColumnGroupConfig<TData> {\r\n  /** The display label for the column group header. */\r\n  header: string;\r\n  /** Leaf (or nested group) column definitions belonging to this group. */\r\n  columns: ColumnDef<TData>[];\r\n}\r\n\r\n/**\r\n * Creates a TanStack `GroupColumnDef<TData>` from a typed config object.\r\n *\r\n * This is a thin wrapper — no logic beyond type narrowing. The returned\r\n * object is identical to writing `{ header, columns }` inline, but provides\r\n * generic type-checking at the call site.\r\n *\r\n * @typeParam TData - The row data type of the table.\r\n * @param config - `ColumnGroupConfig<TData>` with `header` and `columns`.\r\n * @returns A `GroupColumnDef<TData>` suitable for passing to `useReactTable`.\r\n */\r\nexport function createColumnGroup<TData>(\r\n  config: ColumnGroupConfig<TData>,\r\n): GroupColumnDef<TData> {\r\n  return {\r\n    header: config.header,\r\n    columns: config.columns,\r\n  };\r\n}\r\n","/**\r\n * MultiRowHeader — renders a multi-row `<thead>` section from TanStack\r\n * `table.getHeaderGroups()`.\r\n *\r\n * Extracts the header rendering logic from GroupedHeaderGrid.tsx (L75-117)\r\n * into a reusable Pro-package component. Uses only TanStack v8 standard APIs\r\n * (C-2): `getHeaderGroups`, `header.isPlaceholder`, `header.colSpan`,\r\n * `header.subHeaders`, `flexRender`.\r\n *\r\n * G-002 additions: `enableStickyHeader` prop for multi-row sticky (AC-001),\r\n * `frozenColumns` prop as on/off switch for column pinning left-offset (AC-002),\r\n * CSS variable `--grid-header-row-height` based top offset (AC-003).\r\n *\r\n * G-003 additions: `enableGroupToggle` prop for group header click to toggle\r\n * child column visibility (AC-001). Group cells get collapse icon ▼/▶ and\r\n * click handler; leaf cells retain sort handler (AC-002, D2 decision).\r\n *\r\n * Flat columns mixed with group columns are handled automatically by TanStack's\r\n * placeholder mechanism — do NOT add custom rowSpan calculation (spec §11.2).\r\n *\r\n * @see AC-001, AC-002, AC-003 in G-002-spec.md\r\n * @see Section 5.1/5.2 in G-002-spec.md — API design\r\n * @see Section 11.2/11.4 in G-002-spec.md — implementation guidelines\r\n * @see Section 6.1, 11.1 in G-003-spec.md — enableGroupToggle implementation\r\n */\r\n\r\nimport { type CSSProperties } from 'react';\r\nimport { flexRender, type Header, type Table } from '@tanstack/react-table';\r\nimport { useLicenseStatus, Watermark } from '@topgrid/grid-license';\r\n\r\n/**\r\n * Props for `MultiRowHeader`.\r\n *\r\n * @typeParam TData - The row data type of the table.\r\n */\r\nexport interface MultiRowHeaderProps<TData = unknown> {\r\n  /**\r\n   * The TanStack table instance. Provides `getHeaderGroups()` used for\r\n   * multi-row header rendering.\r\n   */\r\n  table: Table<TData>;\r\n  /**\r\n   * When true, applies sticky positioning to each header row so the multi-row\r\n   * header remains fixed at the viewport top during vertical scroll (AC-001).\r\n   * Default: false (G-001 behaviour preserved — breaking: false).\r\n   */\r\n  enableStickyHeader?: boolean;\r\n  /**\r\n   * Number of columns pinned on the left that should receive `sticky left`\r\n   * positioning. Acts as an on/off switch; the actual frozen column identities\r\n   * are determined from TanStack's `columnPinning.left` state via\r\n   * `column.getIsPinned() === 'left'` (AC-002, D2 decision).\r\n   * 0 or omitted: frozen positioning inactive.\r\n   */\r\n  frozenColumns?: number;\r\n  /**\r\n   * When true, group header cells (non-leaf) become clickable toggles that\r\n   * show/hide all child (leaf) columns at once (G-003, AC-001).\r\n   * Clicking a group header that has all leaves hidden will show them all;\r\n   * clicking one with any visible leaf will hide them all.\r\n   * Leaf columns retain their sort click handler regardless.\r\n   * Default: false (G-001/G-002 behaviour preserved — breaking: false).\r\n   */\r\n  enableGroupToggle?: boolean;\r\n}\r\n\r\n/**\r\n * Returns the left pixel offset for a frozen header cell (AC-002, EC-05).\r\n *\r\n * TanStack's `column.getStart('left')` returns the correct offset for leaf\r\n * columns. For group header cells it may return `undefined`; in that case the\r\n * first leaf child's offset is used as a fallback (spec §11.4 EC-05).\r\n *\r\n * @typeParam TData - Row data type (matches the parent table's TData).\r\n * @see G-002-spec.md Section 11.4\r\n */\r\nfunction getHeaderLeftOffset<TData>(header: Header<TData, unknown>): number {\r\n  const direct = header.column.getStart('left');\r\n  if (direct !== undefined) return direct;\r\n  // EC-05 fallback: group header cell — use first leaf child's offset.\r\n  const firstLeaf = header.subHeaders[0]?.column;\r\n  return firstLeaf?.getStart('left') ?? 0;\r\n}\r\n\r\n/**\r\n * Renders a multi-row `<thead>` element from a TanStack table instance.\r\n *\r\n * Iterates `table.getHeaderGroups()` to produce one `<tr>` per header row.\r\n * Group header cells use `header.colSpan` (computed by TanStack automatically).\r\n * Placeholder cells (`header.isPlaceholder`) are rendered as empty `<th>` elements.\r\n * Sorting is enabled only on leaf columns (`!header.subHeaders.length`).\r\n *\r\n * @typeParam TData - The row data type of the table.\r\n * @param props - `MultiRowHeaderProps<TData>`.\r\n * @returns A `<thead>` JSX element with all header rows.\r\n */\r\nexport function MultiRowHeader<TData>({\r\n  table,\r\n  enableStickyHeader,\r\n  frozenColumns,\r\n  enableGroupToggle,\r\n}: MultiRowHeaderProps<TData>): JSX.Element {\r\n  // ADR-MOD-GRID-REFACTOR-2026-05-17-001 — license watermark wiring (H-D pattern)\r\n  // sub-spec §8 Step 4: extra <tr><th colSpan> watermark row inside <thead>.\r\n  // §9.3 D-3 = (a): sticky top-0 when enableStickyHeader is true.\r\n  const _lic = useLicenseStatus();\r\n  const headerGroups = table.getHeaderGroups();\r\n  const visibleLeafCount = table.getVisibleLeafColumns().length;\r\n\r\n  return (\r\n    <thead className=\"bg-gray-50\">\r\n      {_lic.watermarkRequired && visibleLeafCount > 0 ? (\r\n        <tr\r\n          {...(enableStickyHeader === true\r\n            ? { className: 'sticky top-0 z-20' }\r\n            : {})}\r\n        >\r\n          <th\r\n            colSpan={visibleLeafCount}\r\n            className=\"relative bg-yellow-50 px-4 py-1 text-center text-xs text-gray-500\"\r\n          >\r\n            <Watermark required />\r\n          </th>\r\n        </tr>\r\n      ) : null}\r\n      {headerGroups.map((headerGroup, rowIndex) => {\r\n        // AC-001: sticky row props — C-29 conditional spread pattern.\r\n        // Row 0: sticky top-0 z-10 (Tailwind only, no inline style needed).\r\n        // Row N≥1: sticky z-10 + inline style top: calc(var(--grid-header-row-height, 40px) * N).\r\n        const trProps = {\r\n          ...(enableStickyHeader === true && rowIndex === 0 && {\r\n            className: 'sticky top-0 z-10',\r\n          }),\r\n          ...(enableStickyHeader === true && rowIndex > 0 && {\r\n            className: 'sticky z-10',\r\n            style: {\r\n              top: `calc(var(--grid-header-row-height, 40px) * ${rowIndex})`,\r\n            } as CSSProperties,\r\n          }),\r\n        };\r\n\r\n        return (\r\n          <tr key={headerGroup.id} {...trProps}>\r\n            {headerGroup.headers.map((header) => {\r\n              // AC-002: frozen column detection via TanStack native API (D2 decision).\r\n              // frozenColumns > 0 acts as the feature on/off switch;\r\n              // actual pinned identity comes from TanStack columnPinning state.\r\n              const isFrozen =\r\n                (frozenColumns ?? 0) > 0 &&\r\n                header.column.getIsPinned() === 'left';\r\n\r\n              // D4: z-index layers.\r\n              // frozen + sticky intersection → z-30.\r\n              // frozen only (sticky off) → z-20.\r\n              // Neither → no extra z-class.\r\n              const frozenZClass =\r\n                isFrozen && enableStickyHeader === true\r\n                  ? 'sticky z-30'\r\n                  : isFrozen\r\n                  ? 'sticky z-20'\r\n                  : '';\r\n\r\n              // AC-002: left offset in px (inline style — dynamic runtime value, C-5 exception).\r\n              // EC-05 fallback: group cell getStart('left') may be undefined → subHeaders[0] fallback.\r\n              const thStyle: CSSProperties = isFrozen\r\n                ? { left: `${getHeaderLeftOffset(header as Header<unknown, unknown>)}px` }\r\n                : {};\r\n\r\n              // Leaf columns: sorting enabled. Group columns: group toggle (if enabled).\r\n              const isLeaf = header.subHeaders.length === 0;\r\n\r\n              // G-003 AC-001: pre-compute allLeavesHidden once per non-leaf header.\r\n              // Used for (a) click handler, (b) effectiveColSpan, (c) collapse icon.\r\n              const allLeavesHidden =\r\n                !isLeaf &&\r\n                header.column.getLeafColumns().every((c) => !c.getIsVisible());\r\n\r\n              // G-003 AC-001: group click handler — toggle all leaf column visibility.\r\n              // allLeavesHidden → show all (true); any visible leaf → hide all (false).\r\n              const groupClickHandler =\r\n                enableGroupToggle === true && !isLeaf\r\n                  ? () => {\r\n                      const leafCols = header.column.getLeafColumns();\r\n                      leafCols.forEach((c) => c.toggleVisibility(allLeavesHidden));\r\n                    }\r\n                  : undefined;\r\n\r\n              // G-003: effectiveColSpan — collapsed group occupies 1 column (spec §6.1).\r\n              const effectiveColSpan =\r\n                enableGroupToggle === true && allLeavesHidden\r\n                  ? 1\r\n                  : header.colSpan;\r\n\r\n              // isPlaceholder: filler cell for multi-row headers (TanStack placeholder mechanism).\r\n              // Flat columns in the group row appear as placeholder cells — rendered empty.\r\n              if (header.isPlaceholder) {\r\n                return (\r\n                  <th\r\n                    key={header.id}\r\n                    colSpan={effectiveColSpan}\r\n                    className={`px-4 py-3 border border-gray-200${frozenZClass ? ` ${frozenZClass}` : ''}`}\r\n                    {...(isFrozen ? { style: thStyle } : {})}\r\n                  />\r\n                );\r\n              }\r\n\r\n              return (\r\n                <th\r\n                  key={header.id}\r\n                  colSpan={effectiveColSpan}\r\n                  className={`px-4 py-3 text-center text-xs font-medium text-gray-600 uppercase tracking-wider border border-gray-200 whitespace-nowrap select-none${\r\n                    header.column.getCanSort() && isLeaf\r\n                      ? ' cursor-pointer hover:bg-gray-100'\r\n                      : ''\r\n                  }${\r\n                    enableGroupToggle === true && !isLeaf\r\n                      ? ' cursor-pointer hover:bg-gray-100'\r\n                      : ''\r\n                  }${frozenZClass ? ` ${frozenZClass}` : ''}`}\r\n                  {...(isFrozen ? { style: thStyle } : {})}\r\n                  onClick={\r\n                    isLeaf ? header.column.getToggleSortingHandler() : groupClickHandler\r\n                  }\r\n                >\r\n                  <div className=\"flex items-center justify-center gap-1\">\r\n                    {flexRender(header.column.columnDef.header, header.getContext())}\r\n                    {header.column.getCanSort() && isLeaf && (\r\n                      <span className=\"text-gray-400\">\r\n                        {({ asc: '▲', desc: '▼' } as Record<string, string>)[\r\n                          header.column.getIsSorted() as string\r\n                        ] ?? '⇅'}\r\n                      </span>\r\n                    )}\r\n                    {enableGroupToggle === true && !isLeaf && (\r\n                      <span className=\"text-gray-400 ml-1\">\r\n                        {allLeavesHidden ? '▶' : '▼'}\r\n                      </span>\r\n                    )}\r\n                  </div>\r\n                </th>\r\n              );\r\n            })}\r\n          </tr>\r\n        );\r\n      })}\r\n    </thead>\r\n  );\r\n}\r\n","/**\r\n * GroupedHeaderGrid — legacy alias component (G-003, C-6 deprecation alias).\r\n *\r\n * Wraps `useReactTable` + `MultiRowHeader` + tbody + pagination into a single\r\n * self-contained component, preserving the AS-IS GroupedHeaderGrid API surface\r\n * from tw-framework-front/src/components/tomis/Grid/GroupedHeaderGrid.tsx (L0).\r\n *\r\n * Behaviour and classNames are ported verbatim from L0 (C-17 visual preservation).\r\n * `verifyOrWarn` is intentionally absent here — it runs via index.ts side-effect.\r\n *\r\n * D3 decision: inline type aliases for GridPaginationOptions / GridRowSelectionOptions\r\n * to avoid reverse dependency on tw-framework-front.\r\n *\r\n * @see G-003-spec.md Section 6.2 — legacy/GroupedHeaderGrid structure\r\n * @see C-6 — 1 minor version deprecation alias (breaking: false)\r\n * @see C-17 — AS-IS L0 className is authoritative\r\n */\r\n\r\nimport { useState } from 'react';\r\nimport type { MouseEvent } from 'react';\r\nimport {\r\n  useReactTable,\r\n  getCoreRowModel,\r\n  getSortedRowModel,\r\n  getPaginationRowModel,\r\n  flexRender,\r\n  type SortingState,\r\n  type ColumnDef,\r\n} from '@tanstack/react-table';\r\nimport type { GridPaginationOptions, GridRowSelectionOptions } from '@topgrid/grid-core';\r\nimport { MultiRowHeader } from '../MultiRowHeader';\r\n\r\n/**\r\n * Props for the legacy `GroupedHeaderGrid` wrapper component.\r\n *\r\n * @typeParam TData - The row data type.\r\n * @deprecated Migrate to composing `useReactTable` + `MultiRowHeader` directly.\r\n */\r\nexport interface GroupedHeaderGridProps<TData = unknown> {\r\n  data: TData[];\r\n  /**\r\n   * Pass grouped column definitions using TanStack Table's native column grouping.\r\n   * Use `{ header: 'Group', columns: [...leafColumns] }` structure for grouping.\r\n   */\r\n  columns: ColumnDef<TData>[];\r\n  pagination?: GridPaginationOptions;\r\n  rowSelection?: GridRowSelectionOptions<TData>;\r\n  onRowClick?: (row: TData, event: MouseEvent<HTMLTableRowElement>) => void;\r\n  loading?: boolean;\r\n  emptyText?: string;\r\n  className?: string;\r\n  /** G-003 AC-001: enable group header click to toggle child column visibility. */\r\n  enableGroupToggle?: boolean;\r\n}\r\n\r\n/**\r\n * Legacy self-contained grid component with grouped multi-row headers.\r\n *\r\n * Delegates header rendering to `MultiRowHeader` from `@topgrid/grid-pro-header`.\r\n * tbody and pagination are ported verbatim from AS-IS L0 (C-17).\r\n *\r\n * @typeParam TData - The row data type (must extend `object`).\r\n * @deprecated Prefer composing `useReactTable` + `MultiRowHeader` directly.\r\n */\r\nexport function GroupedHeaderGrid<TData extends object>({\r\n  data,\r\n  columns,\r\n  pagination,\r\n  onRowClick,\r\n  loading = false,\r\n  emptyText = '데이터가 없습니다.',\r\n  className = '',\r\n  enableGroupToggle,\r\n}: GroupedHeaderGridProps<TData>): JSX.Element {\r\n  const [sorting, setSorting] = useState<SortingState>([]);\r\n  const [pageIndex, setPageIndex] = useState(0);\r\n  const [pageSize] = useState(pagination?.pageSize ?? 20);\r\n\r\n  const table = useReactTable({\r\n    data,\r\n    columns,\r\n    state: {\r\n      sorting,\r\n      pagination: { pageIndex, pageSize },\r\n    },\r\n    onSortingChange: setSorting,\r\n    onPaginationChange: (updater) => {\r\n      const next =\r\n        typeof updater === 'function' ? updater({ pageIndex, pageSize }) : updater;\r\n      setPageIndex(next.pageIndex);\r\n    },\r\n    getCoreRowModel: getCoreRowModel(),\r\n    getSortedRowModel: getSortedRowModel(),\r\n    // C-29: exactOptionalPropertyTypes — conditional spread avoids assigning undefined\r\n    // to a non-optional property when pagination is absent.\r\n    ...(pagination !== undefined\r\n      ? { getPaginationRowModel: getPaginationRowModel() }\r\n      : {}),\r\n    manualPagination: false,\r\n  });\r\n\r\n  const pageCount = table.getPageCount();\r\n\r\n  if (loading) {\r\n    return (\r\n      <div className={`flex flex-col ${className}`}>\r\n        <div className=\"h-40 flex items-center justify-center\">\r\n          <div className=\"animate-spin rounded-full h-10 w-10 border-t-2 border-b-2 border-blue-500\" />\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div className={`flex flex-col ${className}`}>\r\n      <div className=\"overflow-x-auto rounded-lg border border-gray-200\">\r\n        <table className=\"min-w-full text-sm border-collapse\">\r\n          <MultiRowHeader\r\n            table={table}\r\n            {...(enableGroupToggle === true ? { enableGroupToggle: true } : {})}\r\n          />\r\n          <tbody className=\"bg-white divide-y divide-gray-100\">\r\n            {table.getRowModel().rows.length === 0 ? (\r\n              <tr>\r\n                <td\r\n                  colSpan={table.getAllLeafColumns().length}\r\n                  className=\"px-4 py-10 text-center text-gray-400\"\r\n                >\r\n                  {emptyText}\r\n                </td>\r\n              </tr>\r\n            ) : (\r\n              table.getRowModel().rows.map((row) => (\r\n                <tr\r\n                  key={row.id}\r\n                  className={`hover:bg-gray-50 ${onRowClick ? 'cursor-pointer' : ''}`}\r\n                  onClick={(e) => onRowClick?.(row.original, e)}\r\n                >\r\n                  {row.getVisibleCells().map((cell) => (\r\n                    <td\r\n                      key={cell.id}\r\n                      className=\"px-4 py-3 whitespace-nowrap text-gray-700 border-r border-gray-100 last:border-r-0\"\r\n                    >\r\n                      {flexRender(cell.column.columnDef.cell, cell.getContext())}\r\n                    </td>\r\n                  ))}\r\n                </tr>\r\n              ))\r\n            )}\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n\r\n      {pagination !== undefined && (\r\n        <div className=\"flex items-center justify-between px-2 py-3 text-sm text-gray-600\">\r\n          <span>\r\n            전체 <strong>{table.getFilteredRowModel().rows.length}</strong>건\r\n          </span>\r\n          <div className=\"flex items-center gap-1\">\r\n            <button\r\n              onClick={() => table.setPageIndex(0)}\r\n              disabled={!table.getCanPreviousPage()}\r\n              className=\"px-2 py-1 rounded border border-gray-300 disabled:opacity-40 hover:bg-gray-100\"\r\n            >\r\n              {'«'}\r\n            </button>\r\n            <button\r\n              onClick={() => table.previousPage()}\r\n              disabled={!table.getCanPreviousPage()}\r\n              className=\"px-2 py-1 rounded border border-gray-300 disabled:opacity-40 hover:bg-gray-100\"\r\n            >\r\n              {'‹'}\r\n            </button>\r\n            <span className=\"px-3\">\r\n              {pageIndex + 1} / {pageCount || 1}\r\n            </span>\r\n            <button\r\n              onClick={() => table.nextPage()}\r\n              disabled={!table.getCanNextPage()}\r\n              className=\"px-2 py-1 rounded border border-gray-300 disabled:opacity-40 hover:bg-gray-100\"\r\n            >\r\n              {'›'}\r\n            </button>\r\n            <button\r\n              onClick={() => table.setPageIndex(pageCount - 1)}\r\n              disabled={!table.getCanNextPage()}\r\n              className=\"px-2 py-1 rounded border border-gray-300 disabled:opacity-40 hover:bg-gray-100\"\r\n            >\r\n              {'»'}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n","import { checkLicense } from '@topgrid/grid-license';\r\n\r\ncheckLicense();\r\n\r\n// createColumnGroup helper (AC-001)\r\nexport { createColumnGroup } from './createColumnGroup';\r\nexport type { ColumnGroupConfig } from './types';\r\n\r\n// MultiRowHeader component (AC-002, AC-003, AC-004)\r\nexport { MultiRowHeader } from './MultiRowHeader';\r\nexport type { MultiRowHeaderProps } from './types';\r\n\r\n// GroupedHeaderGrid legacy alias (G-003, C-6 deprecation alias)\r\nexport { GroupedHeaderGrid } from './legacy/GroupedHeaderGrid';\r\nexport type { GroupedHeaderGridProps } from './legacy/GroupedHeaderGrid';\r\n"]}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@topgrid/grid-pro-header",
+  "version": "0.1.0",
+  "type": "module",
+  "license": "SEE LICENSE IN EULA",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Pro: Multi-row Header (Column Groups)",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": [
+    "./src/index.ts"
+  ],
+  "dependencies": {
+    "@topgrid/grid-core": "0.1.0",
+    "@topgrid/grid-license": "0.1.0"
+  },
+  "peerDependencies": {
+    "@tanstack/react-table": "^8.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "test": "echo TODO"
+  }
+}