kokotable 0.95.0

package/dist/mui/src/content/HeaderCell.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { TableCell } from "@mui/material";
+import { flexRender } from "@tanstack/react-table";
+import { ColumnMenu } from "./ColumnMenu";
+import { isDisplayColumnId } from "../columns/displayColumns";
+import { explicitWidth, pinnedSx } from "./pinning";
+import { useKokoTableConfig } from "../provider/KokoTableProvider";
+import { createHeaderContext } from "./menuItems";
+import { applyHeaderRules, resolveHeaderDef } from "../headers/defineHeader";
+import { defaultHeader, headerRegistry, materializeHeader } from "../headers/defaultHeader";
+import { headerRuleMetaOf, resolveCellAlign } from "../headers/meta";
+export { headerRuleMetaOf, resolveCellAlign } from "../headers/meta";
+/**
+ * 헤더 셀 — 바깥 `<th>`(colSpan · 고정 sticky · 폭 · 드래그 · 우클릭 메뉴)를 맡고,
+ * 안쪽 내용은 **헤더 정의**(`defineHeader`)가 그린다.
+ *
+ * 정의 적용 순서: `headerDef` prop → `column.meta.header`(id 또는 정의) → Provider `headers[]` 중 `when` 이 참인 첫 정의 → 기본.
+ * 정의의 `rules` 는 여기서 해석돼 정렬 클릭·리사이즈 핸들·드래그·메뉴 항목 `when` 과 TanStack `column.getCan*()` 모두에 반영된다.
+ *
+ * 정렬은 `SortSource` 로만 받는다. 콘텐츠 계약에 섞지 않은 이유는
+ * 카드 화면처럼 헤더가 없는 곳에서도 정렬 컨트롤을 따로 둘 수 있어야 하기 때문이다.
+ * 컬럼 단위 규칙은 `meta.headerTooltip` / `meta.headerAlign` / `meta.align` 을 읽는다.
+ */
+export function HeaderCell({ header, sort, table: tableProp, enableColumnMenu = true, size, draggableGroup, columnMenuItems, grouping, onGroupingChange, aggregation, onAggregationChange, onOpenFilter, headerCellProps, renderHeader, headerDef, }) {
+    const { components, labels, headers } = useKokoTableConfig();
+    const ColumnMenuComponent = (components.ColumnMenu ?? ColumnMenu);
+    const column = header.column;
+    const table = tableProp ?? header.getContext().table;
+    const rule = headerRuleMetaOf(column.columnDef);
+    const isDisplay = isDisplayColumnId(column.id);
+    const resizingEnabled = !!table.options.enableColumnResizing;
+    const [menuAnchor, setMenuAnchor] = useState(null);
+    // ── 헤더 정의 해석 ──
+    const baseCtx = createHeaderContext({ header, column, table, sort, labels });
+    const def = headerDef ?? resolveHeaderDef(baseCtx, headers, headerRegistry, defaultHeader);
+    const can = applyHeaderRules(baseCtx, def);
+    const { render, slots } = materializeHeader(def);
+    const canDragGroup = (draggableGroup ?? table.options.enableGrouping === true)
+        && !isDisplay && !header.isPlaceholder && can.canGroup;
+    const canResize = resizingEnabled && can.canResize;
+    const showMenu = !!tableProp && enableColumnMenu && !isDisplay && !header.isPlaceholder && header.subHeaders.length === 0;
+    const width = explicitWidth(column, table);
+    const align = isDisplay ? "center" : (rule.headerAlign ?? resolveCellAlign(column.columnDef));
+    const rawContent = header.isPlaceholder ? null : flexRender(column.columnDef.header, header.getContext());
+    const defaultContent = renderHeader ? renderHeader({ header, table, defaultContent: rawContent }) : rawContent;
+    const renderCtx = {
+        ...baseCtx,
+        can,
+        defaultContent,
+        align,
+        menuEnabled: showMenu,
+        openMenu: (anchor) => { if (showMenu)
+            setMenuAnchor(anchor); },
+        size,
+    };
+    const extra = headerCellProps?.(header, tableProp) ?? {};
+    const { sx: extraSx, onContextMenu: extraOnContextMenu, ...extraRest } = extra;
+    const state = baseCtx.sortState;
+    return (_jsxs(TableCell, { colSpan: header.colSpan, align: align, size: size, "data-column-id": column.id, "data-header-def": def.id, ...extraRest, sx: [
+            {
+                fontWeight: 600,
+                whiteSpace: "nowrap",
+                backgroundColor: "background.paper",
+                borderBottom: "2px solid",
+                borderColor: "divider",
+                width,
+                minWidth: width,
+                maxWidth: canResize ? width : undefined,
+                position: "relative",
+                // 메뉴 버튼은 hover 전까지 흐리게 — 헤더가 버튼으로 어지러워지지 않게
+                "&:hover .koko-column-menu-button": { opacity: 1 },
+                // sticky header(z 2) 위에 고정 컬럼 헤더가 오도록
+                ...(pinnedSx(column, 3) ?? {}),
+                ...(column.getIsPinned() ? { top: 0 } : {}),
+            },
+            ...(Array.isArray(extraSx) ? extraSx : extraSx ? [extraSx] : []),
+        ], sortDirection: state ? (state.desc ? "desc" : "asc") : false, draggable: canDragGroup || undefined, onDragStart: canDragGroup ? (event) => {
+            event.dataTransfer.effectAllowed = "copyMove";
+            event.dataTransfer.setData("text/koko-column", column.id);
+        } : undefined, onContextMenu: (event) => {
+            extraOnContextMenu?.(event);
+            if (!showMenu || event.defaultPrevented)
+                return;
+            event.preventDefault();
+            setMenuAnchor({ top: event.clientY, left: event.clientX });
+        }, children: [render(renderCtx, slots), showMenu && (_jsx(ColumnMenuComponent, { table: table, column: column, header: header, sort: sort, grouping: grouping, onGroupingChange: onGroupingChange, aggregation: aggregation, onAggregationChange: onAggregationChange, onOpenFilter: onOpenFilter, items: columnMenuItems, hideButton: true, anchor: menuAnchor, onAnchorClose: () => setMenuAnchor(null) }))] }));
+}

package/dist/mui/src/content/SelectionActionBar.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+import type { RowData } from "@tanstack/react-table";
+import { type AnySelectionSource } from "../../../core/src/index";
+export interface SelectionActionBarProps<T extends RowData> {
+    /** 테이블 인스턴스 또는 `SelectionSource` */
+    source: AnySelectionSource<T>;
+    /** 선택된 행에 대한 액션 — 기존 `renderSelectAction({ table, selectedRows })` 대응 */
+    renderActions?: (selectedRows: T[]) => ReactNode;
+    children?: ReactNode;
+    /** 선택이 없어도 자리를 유지할지. 기본은 접힌다 */
+    keepMounted?: boolean;
+}
+/**
+ * 선택 액션바 — 행이 하나라도 선택되면 슬라이드로 나타난다.
+ * `SelectionSource` 계약 위에서 동작하므로 테이블 없는 카드 화면에서도 같은 바를 쓴다.
+ */
+export declare function SelectionActionBar<T extends RowData>({ source, renderActions, children, keepMounted, }: SelectionActionBarProps<T>): import("react").JSX.Element;

package/dist/mui/src/content/SelectionActionBar.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, Checkbox, Collapse, Typography } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import { toSelectionSource } from "../../../core/src/index";
+/**
+ * 선택 액션바 — 행이 하나라도 선택되면 슬라이드로 나타난다.
+ * `SelectionSource` 계약 위에서 동작하므로 테이블 없는 카드 화면에서도 같은 바를 쓴다.
+ */
+export function SelectionActionBar({ source, renderActions, children, keepMounted = false, }) {
+    const selection = toSelectionSource(source);
+    const selectedRows = selection.getSelectedRows();
+    const count = selectedRows.length;
+    const visible = count > 0;
+    const allSelected = selection.isAllSelected();
+    return (_jsx(Collapse, { in: visible, timeout: 250, unmountOnExit: !keepMounted, children: _jsxs(Box, { role: "toolbar", "aria-label": "\uC120\uD0DD \uC561\uC158", sx: {
+                display: "flex", alignItems: "center", gap: 1.5, px: 1.5, py: 0.75, mb: 1,
+                bgcolor: "primary.50", borderRadius: 1, border: "1px solid", borderColor: "primary.200",
+            }, children: [_jsx(Checkbox, { size: "small", checked: allSelected, indeterminate: !allSelected && visible, inputProps: { "aria-label": allSelected ? "전체 해제" : "전체 선택" }, onChange: () => (allSelected ? selection.deselectAll() : selection.selectAll()), sx: { p: 0.25 } }), _jsxs(Typography, { variant: "body2", fontWeight: 600, color: "primary.main", sx: { whiteSpace: "nowrap" }, children: [count, "\uAC1C \uC120\uD0DD"] }), _jsxs(Box, { sx: { display: "flex", gap: 0.5, flex: 1, alignItems: "center" }, children: [renderActions?.(selectedRows), children] }), _jsx(Button, { size: "small", color: "inherit", startIcon: _jsx(CloseIcon, { fontSize: "small" }), onClick: () => selection.deselectAll(), sx: { minWidth: "auto", color: "text.secondary", fontSize: "0.75rem" }, children: "\uD574\uC81C" })] }) }));
+}

package/dist/mui/src/content/SortControl.d.ts

@@ -0,0 +1,17 @@
+import type { RowData } from "@tanstack/react-table";
+import type { AnySortSource, TableColumnDefs } from "../../../core/src/index";
+export interface SortControlProps<T extends RowData> {
+    source: AnySortSource<T>;
+    /** 정렬 후보 컬럼. `search.columns` 를 그대로 넘기면 된다 */
+    columns: TableColumnDefs<T>;
+    /** 정렬이 하나도 없을 때 보여줄 문구 */
+    placeholder?: string;
+}
+/**
+ * 단독 정렬 컨트롤 — **테이블 헤더 없이** 정렬을 조작한다.
+ *
+ * 정렬을 `ContentSource` 에 넣지 않고 `SortSource` 로 분리한 이유가 이것이다.
+ * 카드 그리드·차트처럼 헤더가 없는 화면에서도 같은 정렬 상태를 그대로 쓴다.
+ * 테이블 화면에서는 헤더(`HeaderCell`)가 같은 계약을 쓰므로 둘이 항상 일치한다.
+ */
+export declare function SortControl<T extends RowData>({ source, columns, placeholder, }: SortControlProps<T>): import("react").JSX.Element;

package/dist/mui/src/content/SortControl.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button, Chip, ListItemText, Menu, MenuItem, Stack, Tooltip, Typography, } from "@mui/material";
+import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
+import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
+import SortIcon from "@mui/icons-material/Sort";
+import { columnKey, toSortSource } from "../../../core/src/index";
+function candidates(columns) {
+    const list = [];
+    for (const column of columns) {
+        const id = columnKey(column);
+        if (!id)
+            continue;
+        if (column.enableSorting === false)
+            continue;
+        if (column.meta?.forceHidden)
+            continue;
+        const header = column.filterLabel ?? column.header;
+        list.push({ id, label: typeof header === "string" ? header : id });
+    }
+    return list;
+}
+/**
+ * 단독 정렬 컨트롤 — **테이블 헤더 없이** 정렬을 조작한다.
+ *
+ * 정렬을 `ContentSource` 에 넣지 않고 `SortSource` 로 분리한 이유가 이것이다.
+ * 카드 그리드·차트처럼 헤더가 없는 화면에서도 같은 정렬 상태를 그대로 쓴다.
+ * 테이블 화면에서는 헤더(`HeaderCell`)가 같은 계약을 쓰므로 둘이 항상 일치한다.
+ */
+export function SortControl({ source, columns, placeholder = "정렬 없음", }) {
+    const sort = toSortSource(source);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const all = candidates(columns);
+    const labelOf = (id) => all.find((c) => c.id === id)?.label ?? id;
+    const current = sort.getSort();
+    const remaining = all.filter((c) => !current.some((s) => s.id === c.id));
+    return (_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, sx: { flexWrap: "wrap", gap: 0.5 }, children: [_jsx(SortIcon, { fontSize: "small", sx: { color: "text.disabled" } }), current.length === 0 ? (_jsx(Typography, { variant: "body2", color: "text.disabled", children: placeholder })) : (current.map((entry, index) => (_jsx(Tooltip, { title: "\uD074\uB9AD: \uBC29\uD5A5 \uC804\uD658", children: _jsx(Chip, { size: "small", variant: "outlined", color: "primary", icon: entry.desc ? _jsx(ArrowDownwardIcon, {}) : _jsx(ArrowUpwardIcon, {}), label: current.length > 1
+                        ? `${index + 1}. ${labelOf(entry.id)}`
+                        : labelOf(entry.id), 
+                    // 방향 전환은 multi 로 — 아니면 다른 정렬 기준이 함께 날아간다
+                    onClick: () => sort.toggleSort(entry.id, { desc: !entry.desc, multi: true }), onDelete: () => sort.clearSort(entry.id) }) }, entry.id)))), _jsx(Button, { size: "small", disabled: remaining.length === 0, onClick: (event) => setAnchorEl(event.currentTarget), children: "\uC815\uB82C \uCD94\uAC00" }), current.length > 0 && (_jsx(Button, { size: "small", color: "inherit", onClick: () => sort.clearSort(), children: "\uD574\uC81C" })), _jsx(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), children: remaining.map((candidate) => (_jsx(MenuItem, { onClick: () => {
+                        sort.toggleSort(candidate.id, { multi: current.length > 0 });
+                        setAnchorEl(null);
+                    }, children: _jsx(ListItemText, { primary: candidate.label }) }, candidate.id))) })] }));
+}

package/dist/mui/src/content/TableContent.d.ts

@@ -0,0 +1,191 @@
+import type { AggregationSpec } from "../../../core/src/index";
+import { type ReactNode, type Ref } from "react";
+import { type TableCellProps, type TableRowProps } from "@mui/material";
+import { type Column, type Header, type Row, type RowData, type Table as TanTable } from "@tanstack/react-table";
+import type { AggFnKey, ContentSource, FieldErrors, FlatItem, GroupPath, GroupTreeNode, SortSource } from "../../../core/src/index";
+import { type RenderHeaderContext } from "./HeaderCell";
+import { type CellValueOptions } from "./cellValue";
+import { type Density } from "./density";
+import { type ColumnMenuItemsFn, type RowMenuItemsFn } from "./menuItems";
+/** 행에 얹을 MUI `TableRow` props — 기존 `muiTableBodyRowProps` 대응 */
+export type RowProps = Omit<TableRowProps, "children" | "ref">;
+/** detail panel 행·셀에 얹을 props — 기존 `muiDetailPanelProps`(셀) 대응 + 행 */
+export interface DetailPanelProps {
+    row?: RowProps;
+    cell?: Omit<TableCellProps, "children" | "ref" | "colSpan">;
+}
+export type EditMode = "cell" | "row" | "modal";
+export interface EditingOptions<T extends RowData> {
+    /**
+     * cell — 셀 더블클릭으로 그 셀만 편집. Enter/blur 확정, Escape 취소.
+     * row — `editingRowId` 행의 편집 가능 컬럼을 모두 입력으로 그린다(행 더블클릭 또는 외부 제어).
+     * modal — 행 더블클릭 시 `onEditRow` 를 부르고 `renderEditDialog` 가 있으면 그것을 띄운다.
+     */
+    mode: EditMode;
+    /** row 모드에서 편집 중인 행 id (제어형). 없으면 행 더블클릭으로 내부 상태가 정한다 */
+    editingRowId?: string | null;
+    /**
+     * 값 확정. 없으면 `meta.edit.onCommit(value, row.original)`, 그것도 없으면
+     * `row.original[columnId]` 에 직접 반영한다(EditSpec 의 기본 규칙).
+     */
+    onCommit?: (value: unknown, row: Row<T>, columnId: string) => void;
+    /** row/modal 모드에서 편집 진입(행 더블클릭) 알림 */
+    onEditRow?: (row: Row<T>) => void;
+    onCancel?: (row: Row<T>) => void;
+}
+/** 가상화 어댑터 — `VirtualTableContent` 가 채운다. 이 파일은 virtualizer 라이브러리를 모른다 */
+export interface VirtualRows {
+    items: Array<{
+        index: number;
+        start: number;
+        end: number;
+    }>;
+    totalSize: number;
+    measureElement?: (element: Element | null) => void;
+}
+/**
+ * 열 가상화 어댑터 — **가운데(고정되지 않은) 보이는 리프 컬럼** 의 인덱스 범위다.
+ * 고정 컬럼은 항상 그린다. `VirtualTableContent({ virtualizeColumns })` 가 채운다.
+ */
+export interface VirtualColumns {
+    items: Array<{
+        index: number;
+        start: number;
+        end: number;
+    }>;
+    totalSize: number;
+}
+export interface TableContentProps<T extends RowData> {
+    /** 헤더·셀 렌더에 필요하므로 콘텐츠 구역 중 **테이블 본문만** 인스턴스를 요구한다 */
+    table: TanTable<T>;
+    content?: ContentSource<T>;
+    sort?: SortSource;
+    /** 그룹핑이 켜져 있으면 평탄화된 항목을 넘긴다 */
+    groupItems?: Array<FlatItem<T>>;
+    onToggleGroup?: (node: GroupTreeNode<T>) => void;
+    isGroupExpanded?: (node: GroupTreeNode<T>) => boolean;
+    /** 서버 그룹핑의 "더 보기" — 그 경로의 하위를 배치만큼 더 받는다 */
+    onLoadMore?: (path: GroupPath) => void;
+    emptyMessage?: ReactNode;
+    /** 빈 상태 슬롯 — 있으면 `emptyMessage` 대신 그린다 (기존 `renderEmptyRowsFallback`) */
+    renderEmpty?: () => ReactNode;
+    /** 초기 로딩 스켈레톤 행 수. 0 이면 "불러오는 중…" 텍스트 */
+    skeletonRows?: number;
+    /** 에러 UI 의 "필터 초기화" — 있으면 버튼이 생긴다 (`search.reset`) */
+    onResetFilters?: () => void;
+    /** 에러 UI 교체 슬롯 */
+    renderError?: (error: Error | undefined, retry: () => void) => ReactNode;
+    /** 조밀도 (`density` 가 있으면 무시) */
+    dense?: boolean;
+    /** 프리셋 `density` 값을 그대로 받는다 */
+    density?: Density;
+    maxHeight?: number | string;
+    stickyHeader?: boolean;
+    /** 행별 `TableRow` props — 기존 `muiTableBodyRowProps({ row, table })` 대응 */
+    getRowProps?: (row: Row<T>, table: TanTable<T>) => RowProps | undefined;
+    /** 행 클릭으로 선택 토글 (`tableOptions.enableRowSelection` 이 허용하는 행만) */
+    selectOnRowClick?: boolean;
+    /** 펼친 행 아래 전체 폭 패널 — `expandColumn()` 과 짝. 기존 `renderDetailPanel({ row, table })` */
+    renderDetailPanel?: (row: Row<T>, table: TanTable<T>) => ReactNode;
+    /** detail panel 행·셀 props — 기존 `muiDetailPanelProps({ row, table })` */
+    getDetailPanelProps?: (row: Row<T>, table: TanTable<T>) => DetailPanelProps | undefined;
+    editing?: EditingOptions<T>;
+    /** modal 모드의 편집 다이얼로그 — 내용은 소비자가 그린다 */
+    renderEditDialog?: (row: Row<T>, close: () => void) => ReactNode;
+    /** 셀 단위 에러. 없으면 `useDataTable({ fieldErrors })` 로 얹은 값을 읽는다 */
+    fieldErrors?: FieldErrors;
+    /** 링크 셀(`meta.link`) 클릭 — SPA 라우터 연결 자리 */
+    onNavigate?: CellValueOptions<T>["onNavigate"];
+    /** 헤더 컬럼 메뉴(정렬·고정·이동·숨기기). 기본 true (Provider `defaults.enableColumnMenu`). 우클릭 메뉴도 같이 꺼진다 */
+    enableColumnMenu?: boolean;
+    /**
+     * 컬럼 메뉴(버튼·헤더 우클릭) 항목 추가·제거·재배열.
+     * `ctx.defaultItems` 가 기본 항목(정렬·고정·이동·숨기기·그룹·너비 초기화)이다.
+     */
+    columnMenuItems?: ColumnMenuItemsFn<T>;
+    /** 있으면 컬럼 메뉴에 "그룹 기준 추가/제거" 항목이 생긴다 (`search.setGrouping` 등) */
+    onGroupingChange?: (grouping: string[]) => void;
+    /** 그룹핑 중 헤더 메뉴 "집계" 항목 — `search.params.aggregation` / `patchParams({ aggregation })` */
+    aggregation?: AggregationSpec;
+    onAggregationChange?: (next: AggregationSpec) => void;
+    /** 있으면 컬럼 메뉴에 "필터 열기" 항목이 생긴다 (미지정 시 Provider `onOpenFilter`) */
+    onOpenFilter?: (column: Column<T, unknown>, table: TanTable<T>) => void;
+    /** 헤더 `TableCell` props — 기존 `muiTableHeadCellProps({ column, table })` 대응 */
+    headerCellProps?: (header: Header<T, unknown>, table: TanTable<T>) => TableCellProps | undefined;
+    /** 헤더 내용 규칙 덮어쓰기 — 단위·필수 표시·툴팁. `ctx.defaultContent` 를 감싸거나 대체한다 */
+    renderHeader?: (ctx: RenderHeaderContext<T>) => ReactNode;
+    /**
+     * 본문 행 우클릭 메뉴. 말단 행은 `ctx.row`, 그룹 행은 `ctx.group` 이 있다.
+     * 기본 항목(Provider `menus.row` 레지스트리 — 말단: 행 복사 / 그룹: 펼치기·접기·N단계까지 펼치기)은
+     * `ctx.defaultItems` 로 온다 — 미지정이면 그 기본 항목이 그대로 뜬다. 빈 배열을 돌려주면 메뉴를 열지 않는다(브라우저 기본 메뉴).
+     */
+    rowMenuItems?: RowMenuItemsFn<T>;
+    /** 그룹 행 메뉴의 "N단계까지 펼치기" — `group.expand.expandToDepth` 를 넘긴다. 없으면 그 항목이 빠진다 */
+    onExpandGroupToDepth?: (depth: number, node: GroupTreeNode<T>) => void;
+    /**
+     * 그룹핑이 켜져 있을 때(`groupItems` 있음) 그룹 기준 컬럼을 어떻게 놓을지.
+     * - `reorder`(기본) — 그룹 컬럼을 맨 앞(왼쪽 고정 컬럼 다음)으로 당긴다. TanStack 상태는 건드리지
+     *   않고 **렌더 순서만** 바꾼다 (`row.getVisibleCells()` / `headerGroup.headers` 재배열).
+     * - `remove` — 그룹 컬럼을 헤더·본문에서 뺀다. 값은 그룹 행 헤더에 이미 보인다. colSpan 도 줄어든다.
+     * - `false` — 선언 순서 그대로.
+     * 열 가상화(`VirtualTableContent({ virtualizeColumns })`)가 켜져 있거나 헤더가 2단 이상이면
+     * 순서·colSpan 을 맞출 수 없어 **둘 다 건너뛴다**(선언 순서 그대로).
+     */
+    groupedColumnMode?: GroupedColumnMode;
+    /**
+     * 그룹 기준 컬럼 id. 기본은 `table.getState().grouping` — `useDataTable` 이 `search.params.grouping`
+     * 을 넣어 준다. TanStack 상태와 다른 기준으로 그리고 있으면 여기로 덮어쓴다.
+     */
+    grouping?: string[];
+    /**
+     * 그룹 행 배치.
+     * - `columns`(기본) — 그룹 행도 **컬럼별 셀**로 그린다. 현재 depth 의 그룹 컬럼 셀에 펼침 아이콘 + 그룹값 + `(n)`,
+     *   다른 그룹 컬럼은 빈 셀, 나머지 컬럼에는 그 컬럼의 집계 칩(`AggregateChip`)이 **그 컬럼 아래** 놓인다.
+     * - `inline` — 한 셀(colSpan)에 그룹값과 집계 캡션을 줄줄이 붙인다. 카드·좁은 화면용.
+     */
+    groupRowLayout?: GroupRowLayout;
+    /** 그룹 행 높이(px). 미지정 시 내용에 맞춘다 */
+    groupRowHeight?: number;
+    /**
+     * 컬럼별로 그룹 행에 보일 집계 함수 `{ 컬럼: 함수 }` (제어형). 컬럼에 집계가 둘 이상이면 칩을 눌러 바꾼다.
+     * 없으면 내부 상태로 관리한다. 목록에 없는 컬럼은 첫 집계 값을 보인다.
+     */
+    aggregateSelection?: Record<string, AggFnKey>;
+    /** 칩으로 함수를 바꿨을 때. `aggregateSelection` 없이 주면 내부 상태도 함께 바뀐다 */
+    onAggregateSelectionChange?: (columnId: string, fn: AggFnKey) => void;
+}
+export type GroupRowLayout = "columns" | "inline";
+export type GroupedColumnMode = "reorder" | "remove" | false;
+/**
+ * 그룹 컬럼 배치 — 렌더 순서만 바꾼다.
+ * `reorder`: 왼쪽 고정 → 그룹 컬럼(grouping 순) → 나머지 → 오른쪽 고정.
+ * `remove`: 그룹 컬럼 제외.
+ * `false`: 선언 순서. `declaredRank`(선언 순서 + `columnOrder`, 그룹핑 무시)를 주면 그 순서로 되돌린다 —
+ *   TanStack 은 `grouping` 상태가 있으면 자체 `groupedColumnMode`(기본 `reorder`)로 이미 그룹 컬럼을
+ *   앞으로 당겨 놓기 때문에, "그대로" 를 그리려면 되돌려야 한다.
+ * 고정 컬럼은 sticky 오프셋(`getStart`)이 TanStack 순서 기준이므로 자리를 옮기지 않는다.
+ */
+export declare function arrangeGroupedColumns<C extends {
+    id: string;
+    getIsPinned: () => false | "left" | "right";
+}>(columns: C[], grouping: readonly string[], mode: GroupedColumnMode, declaredRank?: ReadonlyMap<string, number>): C[];
+/** 내부 전용 — `VirtualTableContent` 가 컨테이너 ref 와 가상 행 범위를 넘긴다 */
+export interface TableContentInternalProps<T extends RowData> extends TableContentProps<T> {
+    virtual?: VirtualRows;
+    virtualColumns?: VirtualColumns;
+    containerRef?: Ref<HTMLDivElement>;
+}
+/**
+ * 콘텐츠 구역 — 테이블 본문.
+ *
+ * 로딩·에러·빈 상태를 **제자리에서** 그린다. 조회 실패를 throw 해서 상위
+ * ErrorBoundary 로 올리면 테이블 트리가 통째로 파괴되고, 리마운트가 캐시의
+ * 에러를 다시 읽어 즉시 재-throw 하므로 경계 리셋으로 복구가 안 된다.
+ *
+ * 행 선택·확장·고정·리사이즈·순서는 TanStack 상태를 그대로 그린다. 기능을 켜는 것은
+ * `useDataTable` 의 `tableOptions` (`enableRowSelection`, `enableColumnResizing`,
+ * `getRowCanExpand` …) 몫이고, 체크박스·확장 토글·행 번호·행 액션 열은
+ * `withDisplayColumns()` 로 컬럼 목록에 끼운다.
+ */
+export declare function TableContent<T extends RowData>(props: TableContentProps<T>): import("react").JSX.Element;
+export declare function TableContentBase<T extends RowData>(rawProps: TableContentInternalProps<T>): import("react").JSX.Element;