kokotable 0.95.0

package/dist/mui/src/columns/displayColumns.d.ts

@@ -0,0 +1,100 @@
+import type { ReactNode } from "react";
+import type { Row, RowData, Table } from "@tanstack/react-table";
+import type { TableColumnDef, TableColumnDefs } from "../../../core/src/index";
+/**
+ * 표시 전용 컬럼(display column) — 기존 MRT 의 `mrt-row-select` / `mrt-row-expand` /
+ * `mrt-row-actions` / `mrt-row-numbers` 에 대응한다.
+ *
+ * TanStack 은 컬럼 목록에 없는 열을 그릴 수 없으므로 **`useDataTable` 의 `columns` 에
+ * 함께 넘겨야 한다** (`withDisplayColumns` 로 합친다). `useTableSearch` 의 `columns` 에는
+ * 넣지 않는다 — 필터·정렬 후보가 아니다(accessor 가 없어 `getCanFilter/getCanSort` 도 false).
+ *
+ * id 는 모두 `koko-row-` 접두를 가진다. 컬럼 표시 토글·컬럼 메뉴는 이 접두로 걸러낸다.
+ */
+export declare const DISPLAY_COLUMN_PREFIX = "koko-row-";
+/** MRT 가 쓰던 접두 — 저장된 프리셋(`columnVisibility`/`columnOrder`)과 호환하려면 `legacyIds` 로 이 id 를 쓴다 */
+export declare const LEGACY_DISPLAY_COLUMN_PREFIX = "mrt-row-";
+export declare const ROW_SELECT_COLUMN_ID = "koko-row-select";
+export declare const ROW_EXPAND_COLUMN_ID = "koko-row-expand";
+export declare const ROW_ACTIONS_COLUMN_ID = "koko-row-actions";
+export declare const ROW_NUMBER_COLUMN_ID = "koko-row-number";
+/** MRT 의 display column id — `withDisplayColumns(cols, { legacyIds: true })` 가 쓴다 */
+export declare const LEGACY_DISPLAY_COLUMN_IDS: {
+    readonly select: "mrt-row-select";
+    readonly expand: "mrt-row-expand";
+    readonly actions: "mrt-row-actions";
+    readonly number: "mrt-row-numbers";
+};
+export declare function isDisplayColumnId(id: string): boolean;
+export interface SelectionColumnOptions {
+    /** 헤더 전체 선택 체크박스. `enableMultiRowSelection: false` 면 자동으로 숨긴다 */
+    selectAll?: boolean;
+    size?: number;
+    /** 컬럼 id. 기본 `koko-row-select`, 프리셋 호환이 필요하면 `mrt-row-select` */
+    id?: string;
+}
+/**
+ * 체크박스 컬럼. 다중 선택이 꺼진 테이블(`tableOptions.enableMultiRowSelection: false`)
+ * 에서는 라디오로 그리고 헤더 전체 선택을 숨긴다.
+ * 선택 가능 여부는 `tableOptions.enableRowSelection` (boolean 또는 `(row) => boolean`) 이 정한다.
+ */
+export declare function selectionColumn<T extends RowData>(options?: SelectionColumnOptions): TableColumnDef<T, unknown>;
+export interface ExpandColumnOptions {
+    /** 헤더에 전체 펼침/접기 버튼 */
+    expandAll?: boolean;
+    size?: number;
+    /** 컬럼 id. 기본 `koko-row-expand`, 프리셋 호환이 필요하면 `mrt-row-expand` */
+    id?: string;
+}
+/** 이 행이 펼쳐질 수 있는가 — `tableOptions.getRowCanExpand` 가 있으면 그 판단을 따른다 */
+export declare function canExpandRow<T extends RowData>(row: Row<T>, table: Table<T>): boolean;
+/**
+ * 확장 토글 컬럼. `TableContent.renderDetailPanel` 과 짝이다.
+ *
+ * TanStack 의 `expanded` 상태는 `getExpandedRowModel` 을 등록하지 않아도
+ * `row.toggleExpanded()` / `row.getIsExpanded()` 로 관리된다 — row model 은 하위 행
+ * (subRows) 을 평탄화할 때만 필요하고 detail panel 은 하위 행이 아니다.
+ */
+export declare function expandColumn<T extends RowData>(options?: ExpandColumnOptions): TableColumnDef<T, unknown>;
+export interface RowActionsColumnOptions<T extends RowData> {
+    /** 기존 `renderRowActions({ row, table })` 대응 — 인자 `table` 은 TanStack 인스턴스다 */
+    render: (row: Row<T>, table: Table<T>) => ReactNode;
+    /** `withDisplayColumns` 가 배치할 위치. 기존 `positionActionsColumn` */
+    position?: "first" | "last";
+    header?: ReactNode;
+    size?: number;
+    /** 컬럼 id. 기본 `koko-row-actions`, 프리셋 호환이 필요하면 `mrt-row-actions` */
+    id?: string;
+}
+export declare function rowActionsColumn<T extends RowData>(options: RowActionsColumnOptions<T>): TableColumnDef<T, unknown>;
+export interface RowNumberColumnOptions {
+    header?: ReactNode;
+    size?: number;
+    /** 컬럼 id. 기본 `koko-row-number`, 프리셋 호환이 필요하면 `mrt-row-numbers` */
+    id?: string;
+}
+/**
+ * 행 번호 — 페이지 오프셋을 반영한다(`pagination.pageIndex * pageSize + row.index + 1`).
+ * `useDataTable` 은 페이지가 잘린 행만 TanStack 에 넣으므로 `row.index` 는 페이지 내 순번이다.
+ */
+export declare function rowNumberColumn<T extends RowData>(options?: RowNumberColumnOptions): TableColumnDef<T, unknown>;
+export interface WithDisplayColumnsOptions<T extends RowData> {
+    /** 기존 `enableRowNumbers` */
+    rowNumber?: boolean | RowNumberColumnOptions;
+    /** 기존 `enableRowSelection` (선택 가능 여부 자체는 `tableOptions.enableRowSelection`) */
+    selection?: boolean | SelectionColumnOptions;
+    /** 기존 `enableExpanding` + `renderDetailPanel` */
+    expand?: boolean | ExpandColumnOptions;
+    /** 기존 `enableRowActions` + `renderRowActions` + `positionActionsColumn` */
+    rowActions?: RowActionsColumnOptions<T>;
+    /**
+     * id 를 MRT 것(`mrt-row-select`/`mrt-row-expand`/`mrt-row-actions`/`mrt-row-numbers`)으로 쓴다 —
+     * 저장된 프리셋의 `columnVisibility`/`columnOrder` 키가 그대로 맞는다. 개별 옵션의 `id` 가 우선한다.
+     */
+    legacyIds?: boolean;
+}
+/**
+ * 데이터 컬럼 앞뒤에 표시 전용 컬럼을 끼운다. 순서는 MRT 와 같다:
+ * `actions(first)` → `expand` → `select` → `number` → 데이터 컬럼 → `actions(last)`.
+ */
+export declare function withDisplayColumns<T extends RowData>(columns: TableColumnDefs<T>, options: WithDisplayColumnsOptions<T>): TableColumnDefs<T>;

package/dist/mui/src/columns/displayColumns.js

@@ -0,0 +1,174 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox, IconButton, Radio, Tooltip } from "@mui/material";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
+import UnfoldLessIcon from "@mui/icons-material/UnfoldLess";
+import UnfoldMoreIcon from "@mui/icons-material/UnfoldMore";
+import { useKokoTableConfig } from "../provider/KokoTableProvider";
+/** 헤더 전체 선택 — 라벨은 Provider 에서 (`labels.ui.selectAll`) */
+function SelectAllCheckbox({ table }) {
+    const { labels } = useKokoTableConfig();
+    return (_jsx(Checkbox, { size: "small", inputProps: { "aria-label": labels.ui.selectAll }, checked: table.getIsAllRowsSelected(), indeterminate: !table.getIsAllRowsSelected() && table.getIsSomeRowsSelected(), onChange: table.getToggleAllRowsSelectedHandler(), sx: { p: 0.25 } }));
+}
+/**
+ * 표시 전용 컬럼(display column) — 기존 MRT 의 `mrt-row-select` / `mrt-row-expand` /
+ * `mrt-row-actions` / `mrt-row-numbers` 에 대응한다.
+ *
+ * TanStack 은 컬럼 목록에 없는 열을 그릴 수 없으므로 **`useDataTable` 의 `columns` 에
+ * 함께 넘겨야 한다** (`withDisplayColumns` 로 합친다). `useTableSearch` 의 `columns` 에는
+ * 넣지 않는다 — 필터·정렬 후보가 아니다(accessor 가 없어 `getCanFilter/getCanSort` 도 false).
+ *
+ * id 는 모두 `koko-row-` 접두를 가진다. 컬럼 표시 토글·컬럼 메뉴는 이 접두로 걸러낸다.
+ */
+export const DISPLAY_COLUMN_PREFIX = "koko-row-";
+/** MRT 가 쓰던 접두 — 저장된 프리셋(`columnVisibility`/`columnOrder`)과 호환하려면 `legacyIds` 로 이 id 를 쓴다 */
+export const LEGACY_DISPLAY_COLUMN_PREFIX = "mrt-row-";
+export const ROW_SELECT_COLUMN_ID = `${DISPLAY_COLUMN_PREFIX}select`;
+export const ROW_EXPAND_COLUMN_ID = `${DISPLAY_COLUMN_PREFIX}expand`;
+export const ROW_ACTIONS_COLUMN_ID = `${DISPLAY_COLUMN_PREFIX}actions`;
+export const ROW_NUMBER_COLUMN_ID = `${DISPLAY_COLUMN_PREFIX}number`;
+/** MRT 의 display column id — `withDisplayColumns(cols, { legacyIds: true })` 가 쓴다 */
+export const LEGACY_DISPLAY_COLUMN_IDS = {
+    select: "mrt-row-select",
+    expand: "mrt-row-expand",
+    actions: "mrt-row-actions",
+    number: "mrt-row-numbers",
+};
+export function isDisplayColumnId(id) {
+    return id.startsWith(DISPLAY_COLUMN_PREFIX) || id.startsWith(LEGACY_DISPLAY_COLUMN_PREFIX);
+}
+/** 표시 전용 컬럼 공통 — 정렬·필터·숨김·리사이즈 대상이 아니다 */
+function displayBase(id, size, extra = {}) {
+    return {
+        id,
+        header: "",
+        size,
+        minSize: size,
+        maxSize: size,
+        enableSorting: false,
+        enableColumnFilter: false,
+        enableGlobalFilter: false,
+        enableHiding: false,
+        enableResizing: false,
+        enableGrouping: false,
+        ...extra,
+    };
+}
+/**
+ * 체크박스 컬럼. 다중 선택이 꺼진 테이블(`tableOptions.enableMultiRowSelection: false`)
+ * 에서는 라디오로 그리고 헤더 전체 선택을 숨긴다.
+ * 선택 가능 여부는 `tableOptions.enableRowSelection` (boolean 또는 `(row) => boolean`) 이 정한다.
+ */
+export function selectionColumn(options = {}) {
+    const { selectAll = true, size = 48, id = ROW_SELECT_COLUMN_ID } = options;
+    return displayBase(id, size, {
+        header: ({ table }) => {
+            if (!selectAll || table.options.enableMultiRowSelection === false)
+                return null;
+            return _jsx(SelectAllCheckbox, { table: table });
+        },
+        cell: ({ row, table }) => {
+            const multi = table.options.enableMultiRowSelection !== false;
+            const common = {
+                size: "small",
+                checked: row.getIsSelected(),
+                disabled: !row.getCanSelect(),
+                onChange: row.getToggleSelectedHandler(),
+                // 행 클릭 선택(`selectOnRowClick`)과 겹치면 두 번 토글된다
+                onClick: (event) => event.stopPropagation(),
+                inputProps: { "aria-label": "행 선택" },
+                sx: { p: 0.25 },
+            };
+            return multi ? _jsx(Checkbox, { ...common }) : _jsx(Radio, { ...common });
+        },
+    });
+}
+/** 이 행이 펼쳐질 수 있는가 — `tableOptions.getRowCanExpand` 가 있으면 그 판단을 따른다 */
+export function canExpandRow(row, table) {
+    if (table.options.enableExpanding === false)
+        return false;
+    return table.options.getRowCanExpand ? row.getCanExpand() : true;
+}
+/**
+ * 확장 토글 컬럼. `TableContent.renderDetailPanel` 과 짝이다.
+ *
+ * TanStack 의 `expanded` 상태는 `getExpandedRowModel` 을 등록하지 않아도
+ * `row.toggleExpanded()` / `row.getIsExpanded()` 로 관리된다 — row model 은 하위 행
+ * (subRows) 을 평탄화할 때만 필요하고 detail panel 은 하위 행이 아니다.
+ */
+export function expandColumn(options = {}) {
+    const { expandAll = true, size = 48, id = ROW_EXPAND_COLUMN_ID } = options;
+    return displayBase(id, size, {
+        header: ({ table }) => {
+            if (!expandAll)
+                return null;
+            const all = table.getIsAllRowsExpanded();
+            return (_jsx(Tooltip, { title: all ? "모두 접기" : "모두 펼치기", children: _jsx(IconButton, { size: "small", "aria-label": all ? "모두 접기" : "모두 펼치기", onClick: () => table.toggleAllRowsExpanded(!all), children: all ? _jsx(UnfoldLessIcon, { fontSize: "small" }) : _jsx(UnfoldMoreIcon, { fontSize: "small" }) }) }));
+        },
+        cell: ({ row, table }) => {
+            if (!canExpandRow(row, table))
+                return null;
+            const expanded = row.getIsExpanded();
+            return (_jsx(IconButton, { size: "small", "aria-label": expanded ? "접기" : "펼치기", "aria-expanded": expanded, onClick: (event) => {
+                    event.stopPropagation();
+                    row.toggleExpanded();
+                }, children: expanded ? _jsx(KeyboardArrowDownIcon, { fontSize: "small" }) : _jsx(KeyboardArrowRightIcon, { fontSize: "small" }) }));
+        },
+    });
+}
+export function rowActionsColumn(options) {
+    const { render, header = "", size = 96, id = ROW_ACTIONS_COLUMN_ID } = options;
+    const column = displayBase(id, size, {
+        header: () => header,
+        cell: ({ row, table }) => (
+        // 액션 버튼 클릭이 행 클릭(선택·상세)으로 번지지 않게 한다
+        _jsx("span", { onClick: (event) => event.stopPropagation(), style: { display: "inline-flex", alignItems: "center" }, children: render(row, table) })),
+    });
+    column.meta = {
+        ...(column.meta ?? {}),
+        // 렌더러가 읽지 않는 로컬 표식 — `withDisplayColumns` 가 위치를 정할 때 쓴다
+        rowActionsPosition: options.position ?? "last",
+    };
+    return column;
+}
+/**
+ * 행 번호 — 페이지 오프셋을 반영한다(`pagination.pageIndex * pageSize + row.index + 1`).
+ * `useDataTable` 은 페이지가 잘린 행만 TanStack 에 넣으므로 `row.index` 는 페이지 내 순번이다.
+ */
+export function rowNumberColumn(options = {}) {
+    const { header = "#", size = 56, id = ROW_NUMBER_COLUMN_ID } = options;
+    return displayBase(id, size, {
+        header: () => header,
+        cell: ({ row, table }) => {
+            const pagination = table.getState().pagination;
+            const offset = pagination && pagination.pageSize > 0 && table.options.manualPagination !== false
+                ? pagination.pageIndex * pagination.pageSize
+                : 0;
+            return (_jsx("span", { style: { color: "var(--mui-palette-text-secondary, #6b7280)", fontVariantNumeric: "tabular-nums" }, children: (offset + row.index + 1).toLocaleString("ko-KR") }));
+        },
+    });
+}
+/**
+ * 데이터 컬럼 앞뒤에 표시 전용 컬럼을 끼운다. 순서는 MRT 와 같다:
+ * `actions(first)` → `expand` → `select` → `number` → 데이터 컬럼 → `actions(last)`.
+ */
+export function withDisplayColumns(columns, options) {
+    const leading = [];
+    const trailing = [];
+    const legacy = options.legacyIds ? LEGACY_DISPLAY_COLUMN_IDS : undefined;
+    const opts = (given, fallbackId) => {
+        const base = (typeof given === "object" ? given : {});
+        return fallbackId && !base.id ? { ...base, id: fallbackId } : base;
+    };
+    if (options.rowActions) {
+        const actions = rowActionsColumn(opts(options.rowActions, legacy?.actions));
+        (options.rowActions.position === "first" ? leading : trailing).push(actions);
+    }
+    if (options.expand)
+        leading.push(expandColumn(opts(options.expand, legacy?.expand)));
+    if (options.selection)
+        leading.push(selectionColumn(opts(options.selection, legacy?.select)));
+    if (options.rowNumber)
+        leading.push(rowNumberColumn(opts(options.rowNumber, legacy?.number)));
+    return [...leading, ...columns, ...trailing];
+}

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

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+import type { RowData } from "@tanstack/react-table";
+import type { AnyContentSource } from "../../../core/src/index";
+export interface CardContentProps<T extends RowData> {
+    source: AnyContentSource<T>;
+    /** 카드 하나를 그리는 함수 */
+    renderCard: (row: T, index: number) => ReactNode;
+    /** 반응형 열 수 (12분할) */
+    columns?: {
+        xs?: number;
+        sm?: number;
+        md?: number;
+        lg?: number;
+    };
+    emptyMessage?: ReactNode;
+}
+/**
+ * 콘텐츠 구역 — 카드 그리드.
+ *
+ * **테이블 인스턴스를 요구하지 않는다.** `ContentSource` 만 있으면 되므로
+ * `contentSource(data)` 를 넘겨 테이블 없이 화면을 구성할 수 있다.
+ * 같은 필터·페이지네이션 컴포넌트를 그대로 옆에 붙일 수 있는 게 요점이다.
+ */
+export declare function CardContent<T extends RowData>({ source, renderCard, columns, emptyMessage, }: CardContentProps<T>): import("react").JSX.Element;

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, Box, Button, Card, CardContent as MuiCardContent, Grid, LinearProgress, Typography } from "@mui/material";
+import { toContentSource } from "../../../core/src/index";
+/**
+ * 콘텐츠 구역 — 카드 그리드.
+ *
+ * **테이블 인스턴스를 요구하지 않는다.** `ContentSource` 만 있으면 되므로
+ * `contentSource(data)` 를 넘겨 테이블 없이 화면을 구성할 수 있다.
+ * 같은 필터·페이지네이션 컴포넌트를 그대로 옆에 붙일 수 있는 게 요점이다.
+ */
+export function CardContent({ source, renderCard, columns = { xs: 12, sm: 6, md: 4, lg: 3 }, emptyMessage = "표시할 데이터가 없습니다", }) {
+    const content = toContentSource(source);
+    const status = content.getStatus();
+    const rows = content.getRows();
+    if (status.isError) {
+        return (_jsx(Alert, { severity: "error", action: _jsx(Button, { color: "inherit", size: "small", onClick: () => content.refetch(), children: "\uB2E4\uC2DC \uC2DC\uB3C4" }), children: status.error?.message ?? "조회에 실패했습니다" }));
+    }
+    if (status.isInitialLoading) {
+        return (_jsx(Box, { sx: { py: 6, textAlign: "center", color: "text.secondary" }, children: "\uBD88\uB7EC\uC624\uB294 \uC911\u2026" }));
+    }
+    if (status.isEmpty) {
+        return (_jsx(Box, { sx: { py: 6, textAlign: "center", color: "text.secondary" }, children: _jsx(Typography, { variant: "body2", children: emptyMessage }) }));
+    }
+    return (_jsxs(Box, { sx: { position: "relative" }, children: [status.isLoading && _jsx(LinearProgress, { sx: { position: "absolute", top: -4, left: 0, right: 0 } }), _jsx(Grid, { container: true, spacing: 2, children: rows.map((row, index) => (_jsx(Grid, { size: columns, children: _jsx(Card, { variant: "outlined", sx: { height: "100%" }, children: _jsx(MuiCardContent, { children: renderCard(row, index) }) }) }, index))) })] }));
+}

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

@@ -0,0 +1,43 @@
+import type { AggregationSpec } from "../../../core/src/index";
+import { type PopoverPosition } from "@mui/material";
+import type { Column, Header, RowData, Table } from "@tanstack/react-table";
+import type { SortSource } from "../../../core/src/index";
+import { type ColumnMenuItemsFn } from "./menuItems";
+export { moveColumn, canMoveColumn } from "./columnOrder";
+export type ColumnMenuAnchor = HTMLElement | PopoverPosition;
+export interface ColumnMenuProps<T extends RowData> {
+    table: Table<T>;
+    column: Column<T, unknown>;
+    /** 헤더 인스턴스 — 없으면 테이블에서 찾는다 */
+    header?: Header<T, unknown>;
+    sort?: SortSource;
+    /** 현재 그룹 기준. 미지정 시 `table.getState().grouping` */
+    grouping?: string[];
+    /** 있으면 "그룹 기준 추가/제거" 항목이 생긴다 */
+    onGroupingChange?: (grouping: string[]) => void;
+    aggregation?: AggregationSpec;
+    onAggregationChange?: (next: AggregationSpec) => void;
+    /** 있으면 "필터 열기" 항목이 생긴다. 미지정 시 Provider `onOpenFilter` */
+    onOpenFilter?: (column: Column<T, unknown>, table: Table<T>) => void;
+    /** 항목 추가·제거·재배열 — 레지스트리를 해석한 기본 항목을 `ctx.defaultItems` 로 받는다 */
+    items?: ColumnMenuItemsFn<T>;
+    /**
+     * 외부 앵커 — 요소(버튼)면 그 아래, 좌표면 그 자리에 연다 (`HeaderCell` 의 메뉴 트리거 슬롯·우클릭).
+     * 있으면 내부 버튼 상태보다 우선한다.
+     */
+    anchor?: ColumnMenuAnchor | null;
+    /** 외부 앵커로 연 메뉴를 닫을 때 */
+    onAnchorClose?: () => void;
+    /** @deprecated `anchor` 로 통합 — 우클릭 좌표 */
+    anchorPosition?: PopoverPosition | null;
+    /** @deprecated `onAnchorClose` */
+    onAnchorPositionClose?: () => void;
+    /** 메뉴 버튼을 그리지 않는다 — 트리거를 밖에서 그릴 때 (`HeaderCell` 슬롯) */
+    hideButton?: boolean;
+}
+/**
+ * 헤더 컬럼 메뉴 — 정렬 / 고정 / 이동 / 숨기기 / 그룹 기준 / 필터 열기 / 너비 초기화 / 헤더 복사.
+ * 항목은 Provider `menus.column` 레지스트리에서 오고(`when` 으로 조건부), `items` prop 이 마지막으로 손본다.
+ * 드래그 순서 변경은 두지 않는다(버튼 이동으로 충분하고 터치·접근성이 낫다).
+ */
+export declare function ColumnMenu<T extends RowData>({ table, column, header, sort, grouping, onGroupingChange, aggregation, onAggregationChange, onOpenFilter, items, anchor, onAnchorClose, anchorPosition, onAnchorPositionClose, hideButton, }: ColumnMenuProps<T>): import("react").JSX.Element;

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

@@ -0,0 +1,40 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { IconButton, Menu } from "@mui/material";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import { useKokoTableConfig } from "../provider/KokoTableProvider";
+import { MenuItemList, defaultColumnMenuItems, } from "./menuItems";
+export { moveColumn, canMoveColumn } from "./columnOrder";
+function isElement(anchor) {
+    return typeof anchor.getBoundingClientRect === "function";
+}
+/**
+ * 헤더 컬럼 메뉴 — 정렬 / 고정 / 이동 / 숨기기 / 그룹 기준 / 필터 열기 / 너비 초기화 / 헤더 복사.
+ * 항목은 Provider `menus.column` 레지스트리에서 오고(`when` 으로 조건부), `items` prop 이 마지막으로 손본다.
+ * 드래그 순서 변경은 두지 않는다(버튼 이동으로 충분하고 터치·접근성이 낫다).
+ */
+export function ColumnMenu({ table, column, header, sort, grouping, onGroupingChange, aggregation, onAggregationChange, onOpenFilter, items, anchor, onAnchorClose, anchorPosition, onAnchorPositionClose, hideButton = false, }) {
+    const { labels, menus, headers, onOpenFilter: providerOpenFilter } = useKokoTableConfig();
+    const [anchorEl, setAnchorEl] = useState(null);
+    const external = anchor ?? anchorPosition ?? null;
+    const close = () => {
+        setAnchorEl(null);
+        if (external)
+            (onAnchorClose ?? onAnchorPositionClose)?.();
+    };
+    const openFilter = (onOpenFilter ?? providerOpenFilter);
+    const ctx = {
+        column, table, sort, header,
+        grouping: grouping ?? table.getState().grouping ?? [],
+        onGroupingChange,
+        aggregation, onAggregationChange,
+        openFilter: openFilter ? () => openFilter(column, table) : undefined,
+    };
+    // 상태(정렬·고정·순서)가 바뀔 때마다 disabled 가 다시 계산되도록 메뉴가 열려 있는 동안 매 렌더 새로 만든다
+    const defaultItems = defaultColumnMenuItems(ctx, labels, menus.column, headers);
+    const resolved = items ? items({ ...ctx, defaultItems }) : defaultItems;
+    const open = !!anchorEl || !!external;
+    const externalEl = external && isElement(external) ? external : null;
+    const externalPos = external && !isElement(external) ? external : null;
+    return (_jsxs(_Fragment, { children: [!hideButton && (_jsx(IconButton, { size: "small", "aria-label": `${column.id} ${labels.ui.columnMenu}`, "aria-haspopup": "menu", className: "koko-column-menu-button", onClick: (event) => { event.stopPropagation(); setAnchorEl(event.currentTarget); }, sx: { p: 0.25, ml: 0.25, opacity: anchorEl ? 1 : 0.35, "&:hover": { opacity: 1 } }, children: _jsx(MoreVertIcon, { sx: { fontSize: 16 } }) })), _jsx(Menu, { open: open, onClose: close, anchorEl: externalPos ? undefined : (externalEl ?? anchorEl), anchorReference: externalPos ? "anchorPosition" : "anchorEl", anchorPosition: externalPos ?? undefined, onContextMenu: (event) => { event.preventDefault(); event.stopPropagation(); }, children: _jsx(MenuItemList, { items: resolved, ctx: ctx, onPick: close }) })] }));
+}

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

@@ -0,0 +1,14 @@
+import { type ReactNode } from "react";
+import { type RowData, type Table } from "@tanstack/react-table";
+export interface ColumnVisibilityMenuProps<T extends RowData> {
+    table: Table<T>;
+    /** 버튼 라벨. 아이콘만 쓰려면 "" */
+    label?: ReactNode;
+    size?: "small" | "medium";
+}
+/**
+ * 컬럼 표시 토글 — 기존 MRT `ShowHideColumnsMenu` 대응.
+ * `forceHidden`(값 보관 전용) 과 표시 전용 컬럼은 목록에서 뺀다.
+ * 표시 상태는 `useDataTable` 이 제어형으로 들고 있어 토글이 다음 렌더에 되돌아가지 않는다.
+ */
+export declare function ColumnVisibilityMenu<T extends RowData>({ table, label, size, }: ColumnVisibilityMenuProps<T>): import("react").JSX.Element;

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button, Checkbox, Divider, ListItemIcon, ListItemText, Menu, MenuItem, Tooltip, } from "@mui/material";
+import ViewColumnIcon from "@mui/icons-material/ViewColumn";
+import { flexRender } from "@tanstack/react-table";
+import { columnMetaOf } from "../../../core/src/index";
+import { isDisplayColumnId } from "../columns/displayColumns";
+function headerLabel(table, column) {
+    const header = column.columnDef.header;
+    if (typeof header === "string")
+        return header;
+    if (header === undefined)
+        return column.id;
+    // 함수 헤더는 헤더 컨텍스트가 필요하다 — 숨겨진 컬럼은 헤더가 없으므로 id 로 대신한다
+    const found = table.getFlatHeaders().find((h) => h.column.id === column.id);
+    return found ? flexRender(header, found.getContext()) : column.id;
+}
+/**
+ * 컬럼 표시 토글 — 기존 MRT `ShowHideColumnsMenu` 대응.
+ * `forceHidden`(값 보관 전용) 과 표시 전용 컬럼은 목록에서 뺀다.
+ * 표시 상태는 `useDataTable` 이 제어형으로 들고 있어 토글이 다음 렌더에 되돌아가지 않는다.
+ */
+export function ColumnVisibilityMenu({ table, label = "컬럼", size = "small", }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const columns = table.getAllLeafColumns().filter((column) => column.getCanHide() && !isDisplayColumnId(column.id) && !columnMetaOf(column.columnDef)?.forceHidden);
+    const visibleCount = columns.filter((column) => column.getIsVisible()).length;
+    const allVisible = visibleCount === columns.length;
+    const setAll = (visible) => {
+        table.setColumnVisibility((prev) => {
+            const next = { ...prev };
+            for (const column of columns)
+                next[column.id] = visible;
+            return next;
+        });
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { title: "\uCEEC\uB7FC \uD45C\uC2DC/\uC228\uAE40", children: _jsx(Button, { size: size, color: "inherit", startIcon: _jsx(ViewColumnIcon, {}), "aria-label": "\uCEEC\uB7FC \uD45C\uC2DC/\uC228\uAE40", onClick: (event) => setAnchorEl(event.currentTarget), children: label }) }), _jsxs(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), children: [_jsx(MenuItem, { dense: true, onClick: () => setAll(true), disabled: allVisible, children: _jsx(ListItemText, { primary: "\uC804\uCCB4 \uD45C\uC2DC" }) }), _jsx(MenuItem, { dense: true, onClick: () => setAll(false), disabled: visibleCount === 0, children: _jsx(ListItemText, { primary: "\uC804\uCCB4 \uC228\uAE40" }) }), _jsx(Divider, {}), columns.map((column) => (_jsxs(MenuItem, { dense: true, onClick: () => column.toggleVisibility(), children: [_jsx(ListItemIcon, { children: _jsx(Checkbox, { size: "small", edge: "start", checked: column.getIsVisible(), tabIndex: -1, disableRipple: true, inputProps: { "aria-label": `${column.id} 표시` }, sx: { p: 0 } }) }), _jsx(ListItemText, { primary: headerLabel(table, column) })] }, column.id)))] })] }));
+}

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

@@ -0,0 +1,19 @@
+import type { RowData } from "@tanstack/react-table";
+import type { ColumnMeta } from "../../../core/src/index";
+export type EditSpecMeta = NonNullable<ColumnMeta["edit"]>;
+export interface EditCellProps<T extends RowData> {
+    spec: EditSpecMeta;
+    value: unknown;
+    row: T;
+    /** 값 확정 — Enter/blur(텍스트·숫자) 또는 선택 즉시(select) */
+    onCommit: (value: unknown) => void;
+    /** Escape */
+    onCancel?: () => void;
+    autoFocus?: boolean;
+}
+/**
+ * 인라인 편집 입력 — `meta.edit`(EditSpec) 을 읽어 그린다.
+ * text/number 는 TextField, select 는 variant 에 따라 dropdown/chip/button.
+ * 기존 `renderEditCell.tsx` + `EditSelectComponents.tsx` 를 합친 것이다.
+ */
+export declare function EditCell<T extends RowData>({ spec, value, row, onCommit, onCancel, autoFocus, }: EditCellProps<T>): import("react").JSX.Element;

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

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Box, Chip, MenuItem, TextField, ToggleButton, ToggleButtonGroup } from "@mui/material";
+function resolveOptions(spec, row) {
+    const options = spec.options;
+    if (!options)
+        return [];
+    return typeof options === "function" ? options(row) : options;
+}
+/**
+ * 인라인 편집 입력 — `meta.edit`(EditSpec) 을 읽어 그린다.
+ * text/number 는 TextField, select 는 variant 에 따라 dropdown/chip/button.
+ * 기존 `renderEditCell.tsx` + `EditSelectComponents.tsx` 를 합친 것이다.
+ */
+export function EditCell({ spec, value, row, onCommit, onCancel, autoFocus = true, }) {
+    const size = spec.size ?? "small";
+    const color = spec.color ?? "primary";
+    const initial = value === null || value === undefined ? "" : String(value);
+    const [local, setLocal] = useState(initial);
+    useEffect(() => { setLocal(initial); }, [initial]);
+    if (spec.kind === "select") {
+        const options = resolveOptions(spec, row);
+        const select = (next) => {
+            setLocal(next);
+            onCommit(next);
+        };
+        if (spec.variant === "chip") {
+            return (_jsx(Box, { sx: { display: "flex", gap: 0.5, flexWrap: "wrap" }, children: options.map((option) => (_jsx(Chip, { label: option.label, size: size, color: color, variant: local === option.value ? "filled" : "outlined", onClick: () => select(option.value), sx: { cursor: "pointer" } }, option.value))) }));
+        }
+        if (spec.variant === "button") {
+            return (_jsx(ToggleButtonGroup, { exclusive: true, size: size, color: color, value: local, onChange: (_, next) => { if (next !== null)
+                    select(next); }, sx: { flexWrap: "wrap" }, children: options.map((option) => (_jsx(ToggleButton, { value: option.value, sx: { py: 0.25, px: 1, fontSize: "0.75rem" }, children: option.label }, option.value))) }));
+        }
+        return (_jsx(TextField, { select: true, size: "small", fullWidth: true, autoFocus: autoFocus, value: local, onChange: (event) => select(event.target.value), onKeyDown: (event) => { if (event.key === "Escape")
+                onCancel?.(); }, slotProps: { htmlInput: { "aria-label": "값 선택", ...spec.inputProps } }, children: options.map((option) => (_jsx(MenuItem, { value: option.value, children: option.label }, option.value))) }));
+    }
+    const isNumber = spec.kind === "number";
+    const commit = () => {
+        if (isNumber) {
+            if (local.trim() === "")
+                return onCommit(null);
+            const parsed = Number(local);
+            return onCommit(Number.isNaN(parsed) ? value : parsed);
+        }
+        onCommit(local);
+    };
+    const onKeyDown = (event) => {
+        // 헤더 정렬 등 상위 단축키로 번지지 않게 한다
+        event.stopPropagation();
+        if (event.key === "Enter") {
+            event.preventDefault();
+            commit();
+        }
+        else if (event.key === "Escape") {
+            event.preventDefault();
+            setLocal(initial);
+            onCancel?.();
+        }
+    };
+    return (_jsx(TextField, { size: "small", variant: "standard", fullWidth: true, autoFocus: autoFocus, type: isNumber ? "number" : "text", value: local, onChange: (event) => setLocal(event.target.value), onBlur: commit, onKeyDown: onKeyDown, slotProps: { htmlInput: { "aria-label": "값 입력", ...spec.inputProps } } }));
+}

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

@@ -0,0 +1,59 @@
+import type { AggregationSpec } from "../../../core/src/index";
+import { type ReactNode } from "react";
+import { type TableCellProps } from "@mui/material";
+import { type Column, type Header, type RowData, type Table } from "@tanstack/react-table";
+import type { SortSource } from "../../../core/src/index";
+import { type ColumnMenuItemsFn } from "./menuItems";
+import type { HeaderDef } from "../headers/types";
+export { headerRuleMetaOf, resolveCellAlign } from "../headers/meta";
+export type { HeaderRuleMeta, CellAlign } from "../headers/meta";
+export interface RenderHeaderContext<T extends RowData> {
+    header: Header<T, unknown>;
+    table?: Table<T>;
+    /** 기본 규칙으로 만든 헤더 내용 (`columnDef.header` 렌더 결과) */
+    defaultContent: ReactNode;
+}
+export interface HeaderCellProps<T extends RowData> {
+    header: Header<T, unknown>;
+    sort?: SortSource;
+    /** 컬럼 메뉴(고정·이동·숨기기)를 붙이려면 테이블 인스턴스가 필요하다. 없으면 `header.getContext().table` */
+    table?: Table<T>;
+    /** 컬럼 메뉴 표시. 기본 true. 우클릭 메뉴도 같이 꺼진다 */
+    enableColumnMenu?: boolean;
+    size?: "small" | "medium";
+    /**
+     * 헤더를 끌어 `GroupingBar` 에 놓으면 그룹 기준이 되게 한다 — `draggable` 을 켜고
+     * `dataTransfer` 에 `text/koko-column` = 컬럼 id 를 싣는다.
+     * 기본값은 `table.options.enableGrouping === true` (표시 전용 컬럼·`rules.canGroup` 거짓은 제외).
+     */
+    draggableGroup?: boolean;
+    /** 컬럼 메뉴 항목 추가·제거·재배열 (레지스트리 결과가 `defaultItems`) */
+    columnMenuItems?: ColumnMenuItemsFn<T>;
+    /** 현재 그룹 기준 (메뉴의 "그룹 기준 추가/제거" 판단용) */
+    grouping?: string[];
+    /** 있으면 메뉴에 "그룹 기준 추가/제거" 항목이 생긴다 */
+    onGroupingChange?: (grouping: string[]) => void;
+    /** 그룹핑 중 집계 함수 토글 (메뉴 "집계" 항목) */
+    aggregation?: AggregationSpec;
+    onAggregationChange?: (next: AggregationSpec) => void;
+    /** 있으면 메뉴에 "필터 열기" 항목이 생긴다 (미지정 시 Provider `onOpenFilter`) */
+    onOpenFilter?: (column: Column<T, unknown>, table: Table<T>) => void;
+    /** `TableCell` 에 얹을 props — sx 는 기본 위에 병합된다 */
+    headerCellProps?: (header: Header<T, unknown>, table: Table<T> | undefined) => TableCellProps | undefined;
+    /** 헤더 내용 규칙 덮어쓰기 — 단위·필수 표시·툴팁 등. `defaultContent` 를 감싸거나 대체한다 (content 슬롯 앞 단계) */
+    renderHeader?: (ctx: RenderHeaderContext<T>) => ReactNode;
+    /** 이 셀에만 쓸 헤더 정의 — `meta.header` 와 Provider `headers[]` 보다 우선 */
+    headerDef?: HeaderDef<T>;
+}
+/**
+ * 헤더 셀 — 바깥 `<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 declare function HeaderCell<T extends RowData>({ header, sort, table: tableProp, enableColumnMenu, size, draggableGroup, columnMenuItems, grouping, onGroupingChange, aggregation, onAggregationChange, onOpenFilter, headerCellProps, renderHeader, headerDef, }: HeaderCellProps<T>): import("react").JSX.Element;