react-glide-table 0.0.1 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.cjs +1691 -0
  2. package/dist/index.d.cts +146 -0
  3. package/dist/index.d.ts +146 -0
  4. package/dist/index.js +1666 -0
  5. package/dist/style.css +404 -0
  6. package/package.json +9 -1
package/dist/index.d.cts ADDED
@@ -0,0 +1,146 @@
1
+ import * as react from 'react';
2
+ import { ReactNode, ReactElement } from 'react';
3
+ import { ColumnDef, RowSelectionState, Updater, Row } from '@tanstack/react-table';
4
+ export { ColumnDef, RowSelectionState } from '@tanstack/react-table';
5
+
6
+ type RowSelectionMode = "none" | "single" | "multi";
7
+ type CellEditType = "text" | "number";
8
+ declare module "@tanstack/react-table" {
9
+ interface ColumnMeta<TData, TValue> {
10
+ /** 세로 병합 대상 컬럼 여부 */
11
+ rowSpan?: boolean;
12
+ /** 병합 기준 필드. 미지정 시 컬럼 id 사용 */
13
+ rowSpanKey?: string;
14
+ align?: "left" | "center" | "right";
15
+ className?: string;
16
+ headerClassName?: string;
17
+ /** true면 더블클릭으로 인라인 편집 가능 */
18
+ editable?: boolean;
19
+ /** 편집 입력 타입. 기본 text */
20
+ editType?: CellEditType;
21
+ }
22
+ }
23
+ type DataTableProps<T extends Record<string, unknown>> = {
24
+ data: T[];
25
+ columns: ColumnDef<T, unknown>[];
26
+ rowSelectionMode?: RowSelectionMode;
27
+ rowSelection?: RowSelectionState;
28
+ onRowSelectionChange?: (updater: Updater<RowSelectionState>) => void;
29
+ /** 전체 건수 (검색 전) */
30
+ totalCount?: number;
31
+ /** 현재 표시 건수 (검색 후) */
32
+ filteredCount?: number;
33
+ /** 좌측 요약 영역 (예: 총 생산수량) */
34
+ summary?: ReactNode;
35
+ /** 우측 액션 슬롯 (Excel, 삭제, 작업전송 등) */
36
+ toolbar?: ReactNode;
37
+ /** 선택 문구 커스터마이즈. 미지정 시 기본 "N개 선택됨" */
38
+ selectionLabel?: (selectedCount: number) => ReactNode;
39
+ isPending?: boolean;
40
+ emptyText?: string;
41
+ enableRowSpan?: boolean;
42
+ getRowId?: (row: T, index: number) => string;
43
+ onRowClick?: (row: T, index: number) => void;
44
+ preserveRowSelection?: boolean;
45
+ getRowClassName?: (row: T, index: number) => string | undefined;
46
+ /** false를 반환하면 해당 행은 선택할 수 없음 (행 클릭·체크박스 모두 적용) */
47
+ getRowCanSelect?: (row: T, index: number) => boolean;
48
+ /** false면 행 클릭으로 선택 토글하지 않음 (체크박스 컬럼만 선택할 때) */
49
+ selectOnRowClick?: boolean;
50
+ /** 셀 편집·채우기 핸들 완료 시 데이터 갱신 콜백 */
51
+ onDataChange?: (data: T[]) => void;
52
+ className?: string;
53
+ /** 확장 키 필드. 지정 시 트리 변환·로우 확장 UI 활성화 (예: materialCode) */
54
+ toggleField?: string;
55
+ /** 자식 → 부모 참조 필드 (기본: assemblyCode) */
56
+ childField?: string;
57
+ /** 중첩 자식 배열 필드 (기본: assemblyMaterials) */
58
+ flattenField?: string;
59
+ /** 펼쳐진 행 키 Set (controlled) */
60
+ expandedRows?: Set<string>;
61
+ onExpandedRowsChange?: (next: Set<string>) => void;
62
+ /** true면 토글 비활성(자식 항상 표시) */
63
+ preventExpand?: boolean;
64
+ /**
65
+ * 행 가상화 활성화. 기본 true.
66
+ * enableRowSpan이 true면 셀 병합 유지를 위해 가상화를 강제 비활성화합니다.
67
+ * (HTML table + spacer 방식 유지, absolute/translateY 미사용)
68
+ */
69
+ enableVirtualization?: boolean;
70
+ /** 가상화 행 예상 높이(px). 기본 44. 실측은 measureElement로 보정 */
71
+ estimateRowHeight?: number;
72
+ /** 가상화 overscan 행 수. 기본 8 */
73
+ virtualOverscan?: number;
74
+ };
75
+ type TableColumnProps<T extends Record<string, unknown>, K extends string = keyof T & string> = {
76
+ /** 컬럼 id. 데이터 필드명이거나 virtual 컬럼용 임의 문자열 */
77
+ field: K;
78
+ /** true면 accessorKey 없이 id만 사용하는 가상 컬럼 (선택 체크박스, No. 등) */
79
+ virtual?: boolean;
80
+ children?: ReactNode;
81
+ sortable?: boolean;
82
+ width?: number;
83
+ align?: "left" | "center" | "right";
84
+ rowSpan?: boolean;
85
+ rowSpanKey?: string;
86
+ editable?: boolean;
87
+ editType?: CellEditType;
88
+ className?: string;
89
+ headerClassName?: string;
90
+ render?: (value: K extends keyof T ? T[K] : unknown, row: Row<T>, index: number) => ReactNode;
91
+ };
92
+ type TableProps<T extends Record<string, unknown>> = Omit<DataTableProps<T>, "columns"> & {
93
+ children: ReactNode;
94
+ };
95
+
96
+ declare function DataTable<T extends Record<string, unknown>>({ data, columns, rowSelectionMode, rowSelection: controlledRowSelection, onRowSelectionChange, totalCount, filteredCount, summary, toolbar, selectionLabel, isPending, emptyText, enableRowSpan, getRowId, onRowClick, getRowClassName, getRowCanSelect, selectOnRowClick, onDataChange, className, preserveRowSelection, toggleField, childField, flattenField, expandedRows: controlledExpandedRows, onExpandedRowsChange, preventExpand, enableVirtualization, estimateRowHeight, virtualOverscan, }: DataTableProps<T>): react.JSX.Element;
97
+
98
+ /** 본문 슬롯 마커. 실제 tbody는 DataTable이 렌더합니다. */
99
+ declare function TableBody(): null;
100
+ declare namespace TableBody {
101
+ var displayName: string;
102
+ }
103
+
104
+ /** Table.Header 안에서만 사용합니다. DOM을 렌더하지 않고 컬럼 정의만 등록합니다. */
105
+ declare function TableColumn<T extends Record<string, unknown>, K extends string = keyof T & string>(props: TableColumnProps<T, K>): null;
106
+ declare namespace TableColumn {
107
+ var displayName: string;
108
+ }
109
+
110
+ type TableHeaderProps = {
111
+ children: ReactNode;
112
+ };
113
+ /** 컬럼 선언 슬롯. DOM을 렌더하지 않습니다. */
114
+ declare function TableHeader(props: TableHeaderProps): null;
115
+ declare namespace TableHeader {
116
+ var displayName: string;
117
+ }
118
+
119
+ type TablePaginationProps = {
120
+ page: number;
121
+ pageSize?: number;
122
+ totalCount?: number;
123
+ onChange: (page: number) => void;
124
+ className?: string;
125
+ };
126
+ declare function TablePagination({ page, pageSize, totalCount, onChange, className, }: TablePaginationProps): react.JSX.Element;
127
+ declare namespace TablePagination {
128
+ var displayName: string;
129
+ }
130
+
131
+ type TableCompoundComponent<T extends Record<string, unknown>> = ((props: TableProps<T>) => ReactElement) & {
132
+ Header: typeof TableHeader;
133
+ Column: <K extends string>(props: TableColumnProps<T, K>) => null;
134
+ Body: typeof TableBody;
135
+ Pagination: typeof TablePagination;
136
+ };
137
+ declare function TableRoot<T extends Record<string, unknown>>({ data, children, className, totalCount, filteredCount, ...dataTableProps }: TableProps<T>): react.JSX.Element;
138
+ declare function createTable<T extends Record<string, unknown>>(): TableCompoundComponent<T>;
139
+ declare const Table: typeof TableRoot & {
140
+ Header: typeof TableHeader;
141
+ Column: typeof TableColumn;
142
+ Body: typeof TableBody;
143
+ Pagination: typeof TablePagination;
144
+ };
145
+
146
+ export { DataTable, type DataTableProps, type RowSelectionMode, Table, type TableColumnProps, type TableCompoundComponent, type TableProps, createTable };
package/dist/index.d.ts ADDED
@@ -0,0 +1,146 @@
1
+ import * as react from 'react';
2
+ import { ReactNode, ReactElement } from 'react';
3
+ import { ColumnDef, RowSelectionState, Updater, Row } from '@tanstack/react-table';
4
+ export { ColumnDef, RowSelectionState } from '@tanstack/react-table';
5
+
6
+ type RowSelectionMode = "none" | "single" | "multi";
7
+ type CellEditType = "text" | "number";
8
+ declare module "@tanstack/react-table" {
9
+ interface ColumnMeta<TData, TValue> {
10
+ /** 세로 병합 대상 컬럼 여부 */
11
+ rowSpan?: boolean;
12
+ /** 병합 기준 필드. 미지정 시 컬럼 id 사용 */
13
+ rowSpanKey?: string;
14
+ align?: "left" | "center" | "right";
15
+ className?: string;
16
+ headerClassName?: string;
17
+ /** true면 더블클릭으로 인라인 편집 가능 */
18
+ editable?: boolean;
19
+ /** 편집 입력 타입. 기본 text */
20
+ editType?: CellEditType;
21
+ }
22
+ }
23
+ type DataTableProps<T extends Record<string, unknown>> = {
24
+ data: T[];
25
+ columns: ColumnDef<T, unknown>[];
26
+ rowSelectionMode?: RowSelectionMode;
27
+ rowSelection?: RowSelectionState;
28
+ onRowSelectionChange?: (updater: Updater<RowSelectionState>) => void;
29
+ /** 전체 건수 (검색 전) */
30
+ totalCount?: number;
31
+ /** 현재 표시 건수 (검색 후) */
32
+ filteredCount?: number;
33
+ /** 좌측 요약 영역 (예: 총 생산수량) */
34
+ summary?: ReactNode;
35
+ /** 우측 액션 슬롯 (Excel, 삭제, 작업전송 등) */
36
+ toolbar?: ReactNode;
37
+ /** 선택 문구 커스터마이즈. 미지정 시 기본 "N개 선택됨" */
38
+ selectionLabel?: (selectedCount: number) => ReactNode;
39
+ isPending?: boolean;
40
+ emptyText?: string;
41
+ enableRowSpan?: boolean;
42
+ getRowId?: (row: T, index: number) => string;
43
+ onRowClick?: (row: T, index: number) => void;
44
+ preserveRowSelection?: boolean;
45
+ getRowClassName?: (row: T, index: number) => string | undefined;
46
+ /** false를 반환하면 해당 행은 선택할 수 없음 (행 클릭·체크박스 모두 적용) */
47
+ getRowCanSelect?: (row: T, index: number) => boolean;
48
+ /** false면 행 클릭으로 선택 토글하지 않음 (체크박스 컬럼만 선택할 때) */
49
+ selectOnRowClick?: boolean;
50
+ /** 셀 편집·채우기 핸들 완료 시 데이터 갱신 콜백 */
51
+ onDataChange?: (data: T[]) => void;
52
+ className?: string;
53
+ /** 확장 키 필드. 지정 시 트리 변환·로우 확장 UI 활성화 (예: materialCode) */
54
+ toggleField?: string;
55
+ /** 자식 → 부모 참조 필드 (기본: assemblyCode) */
56
+ childField?: string;
57
+ /** 중첩 자식 배열 필드 (기본: assemblyMaterials) */
58
+ flattenField?: string;
59
+ /** 펼쳐진 행 키 Set (controlled) */
60
+ expandedRows?: Set<string>;
61
+ onExpandedRowsChange?: (next: Set<string>) => void;
62
+ /** true면 토글 비활성(자식 항상 표시) */
63
+ preventExpand?: boolean;
64
+ /**
65
+ * 행 가상화 활성화. 기본 true.
66
+ * enableRowSpan이 true면 셀 병합 유지를 위해 가상화를 강제 비활성화합니다.
67
+ * (HTML table + spacer 방식 유지, absolute/translateY 미사용)
68
+ */
69
+ enableVirtualization?: boolean;
70
+ /** 가상화 행 예상 높이(px). 기본 44. 실측은 measureElement로 보정 */
71
+ estimateRowHeight?: number;
72
+ /** 가상화 overscan 행 수. 기본 8 */
73
+ virtualOverscan?: number;
74
+ };
75
+ type TableColumnProps<T extends Record<string, unknown>, K extends string = keyof T & string> = {
76
+ /** 컬럼 id. 데이터 필드명이거나 virtual 컬럼용 임의 문자열 */
77
+ field: K;
78
+ /** true면 accessorKey 없이 id만 사용하는 가상 컬럼 (선택 체크박스, No. 등) */
79
+ virtual?: boolean;
80
+ children?: ReactNode;
81
+ sortable?: boolean;
82
+ width?: number;
83
+ align?: "left" | "center" | "right";
84
+ rowSpan?: boolean;
85
+ rowSpanKey?: string;
86
+ editable?: boolean;
87
+ editType?: CellEditType;
88
+ className?: string;
89
+ headerClassName?: string;
90
+ render?: (value: K extends keyof T ? T[K] : unknown, row: Row<T>, index: number) => ReactNode;
91
+ };
92
+ type TableProps<T extends Record<string, unknown>> = Omit<DataTableProps<T>, "columns"> & {
93
+ children: ReactNode;
94
+ };
95
+
96
+ declare function DataTable<T extends Record<string, unknown>>({ data, columns, rowSelectionMode, rowSelection: controlledRowSelection, onRowSelectionChange, totalCount, filteredCount, summary, toolbar, selectionLabel, isPending, emptyText, enableRowSpan, getRowId, onRowClick, getRowClassName, getRowCanSelect, selectOnRowClick, onDataChange, className, preserveRowSelection, toggleField, childField, flattenField, expandedRows: controlledExpandedRows, onExpandedRowsChange, preventExpand, enableVirtualization, estimateRowHeight, virtualOverscan, }: DataTableProps<T>): react.JSX.Element;
97
+
98
+ /** 본문 슬롯 마커. 실제 tbody는 DataTable이 렌더합니다. */
99
+ declare function TableBody(): null;
100
+ declare namespace TableBody {
101
+ var displayName: string;
102
+ }
103
+
104
+ /** Table.Header 안에서만 사용합니다. DOM을 렌더하지 않고 컬럼 정의만 등록합니다. */
105
+ declare function TableColumn<T extends Record<string, unknown>, K extends string = keyof T & string>(props: TableColumnProps<T, K>): null;
106
+ declare namespace TableColumn {
107
+ var displayName: string;
108
+ }
109
+
110
+ type TableHeaderProps = {
111
+ children: ReactNode;
112
+ };
113
+ /** 컬럼 선언 슬롯. DOM을 렌더하지 않습니다. */
114
+ declare function TableHeader(props: TableHeaderProps): null;
115
+ declare namespace TableHeader {
116
+ var displayName: string;
117
+ }
118
+
119
+ type TablePaginationProps = {
120
+ page: number;
121
+ pageSize?: number;
122
+ totalCount?: number;
123
+ onChange: (page: number) => void;
124
+ className?: string;
125
+ };
126
+ declare function TablePagination({ page, pageSize, totalCount, onChange, className, }: TablePaginationProps): react.JSX.Element;
127
+ declare namespace TablePagination {
128
+ var displayName: string;
129
+ }
130
+
131
+ type TableCompoundComponent<T extends Record<string, unknown>> = ((props: TableProps<T>) => ReactElement) & {
132
+ Header: typeof TableHeader;
133
+ Column: <K extends string>(props: TableColumnProps<T, K>) => null;
134
+ Body: typeof TableBody;
135
+ Pagination: typeof TablePagination;
136
+ };
137
+ declare function TableRoot<T extends Record<string, unknown>>({ data, children, className, totalCount, filteredCount, ...dataTableProps }: TableProps<T>): react.JSX.Element;
138
+ declare function createTable<T extends Record<string, unknown>>(): TableCompoundComponent<T>;
139
+ declare const Table: typeof TableRoot & {
140
+ Header: typeof TableHeader;
141
+ Column: typeof TableColumn;
142
+ Body: typeof TableBody;
143
+ Pagination: typeof TablePagination;
144
+ };
145
+
146
+ export { DataTable, type DataTableProps, type RowSelectionMode, Table, type TableColumnProps, type TableCompoundComponent, type TableProps, createTable };