react-kd-grid 2.2.3 → 3.0.0

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.
package/dist/types.d.ts CHANGED
@@ -1,10 +1,21 @@
1
1
  import { CSSProperties, MouseEvent, ReactNode } from "react";
2
+ /** Used internally by useVirtualization and GridRows. Not part of the public API. */
3
+ export interface VirtualizedRange {
4
+ startIndex: number;
5
+ endIndex: number;
6
+ offsetY: number;
7
+ }
2
8
  export type FilterType = "text" | "multiselect" | "number" | "date" | "boolean";
3
9
  export type Density = "sm" | "md" | "lg";
10
+ export type SortDirection = "asc" | "desc" | null;
11
+ export type PaginationMode = "client" | "server";
12
+ export type SearchMode = "contains" | "exact" | "startsWith" | "endsWith" | "regex";
4
13
  export interface FilterOption {
5
14
  label: string;
6
- value: any;
15
+ /** Tightened from `any` — filter values must be scalar. */
16
+ value: string | number | boolean;
7
17
  }
18
+ /** Inline column filter configuration (used as `filterable: { type, ... }`). */
8
19
  export interface ColumnFilter {
9
20
  type: FilterType;
10
21
  options?: FilterOption[];
@@ -12,251 +23,342 @@ export interface ColumnFilter {
12
23
  min?: number;
13
24
  max?: number;
14
25
  }
26
+ export interface ColumnFilterValue {
27
+ type: FilterType;
28
+ /**
29
+ * The filter value.
30
+ * - Text/boolean: `string | boolean`
31
+ * - Number: `number | string`
32
+ * - Date: `Date | string`
33
+ * - Multiselect: `any[]` (array of selected option values)
34
+ */
35
+ value: string | number | boolean | Date | any[] | null;
36
+ operator?: "equals" | "contains" | "startsWith" | "endsWith" | "gt" | "lt" | "gte" | "lte" | "between";
37
+ /** Secondary value for the `between` operator. */
38
+ secondValue?: string | number | boolean | Date | null;
39
+ }
40
+ export interface ActiveFilters {
41
+ [columnKey: string]: ColumnFilterValue;
42
+ }
43
+ /** @internal Used by FilterPopup component. */
44
+ export interface FilterPopupProps {
45
+ column: GridColumn;
46
+ data: GridRow[];
47
+ currentFilter?: ColumnFilterValue;
48
+ onApplyFilter: (filter: ColumnFilterValue | null) => void;
49
+ onClose: () => void;
50
+ position: {
51
+ top: number;
52
+ left: number;
53
+ };
54
+ autoApply?: boolean;
55
+ }
15
56
  export interface GridColumn {
16
57
  key: string;
17
58
  header: string;
18
59
  width?: number;
19
60
  /**
20
- * Flexible sizing. When true or a positive number, the column can expand to fill
21
- * available horizontal space. If a number is provided, it represents the flex grow weight.
22
- * Note: runtime support may require renderer updates; currently a type hint.
61
+ * Flexible sizing. When `true` or a positive number the column can expand to
62
+ * fill available horizontal space. A number sets the flex-grow weight.
23
63
  */
24
64
  flex?: boolean | number;
25
- /** Minimum width in pixels for this column */
65
+ /** Minimum width in pixels. */
26
66
  minWidth?: number;
27
- /** Maximum width in pixels for this column */
67
+ /** Maximum width in pixels. */
28
68
  maxWidth?: number;
29
- /** Allows column to be resizable via UI (if the header implements it) */
69
+ /** Allow the user to drag-resize this column. */
30
70
  resizable?: boolean;
71
+ /** Whether the column header is clickable to sort. Default `true`. */
72
+ sortable?: boolean;
31
73
  /**
32
- * Whether the column is sortable. Defaults to true; set explicitly to false to disable.
74
+ * Enable or configure the column filter.
75
+ * `true` → text filter with defaults
76
+ * `false` → no filter (overrides the grid-level `filterable` prop)
77
+ * object → full configuration
33
78
  */
34
- sortable?: boolean;
35
79
  filterable?: boolean | ColumnFilter;
80
+ /** Format the raw cell value to a display string. */
36
81
  formatter?: (value: any) => string;
82
+ /** Fully custom cell renderer; takes precedence over `formatter`. */
37
83
  cellRenderer?: (value: any, row: GridRow) => ReactNode;
84
+ /** Whether the column is visible. Default `true`. */
38
85
  visible?: boolean;
39
86
  /**
40
- * Group aggregate to compute for this column when grouping is enabled.
41
- * If a function is provided, it will receive the array of raw cell values and should return the aggregate value.
87
+ * Aggregate function applied to this column's values inside group footers.
88
+ * Built-ins: `"sum" | "avg" | "min" | "max"`.
89
+ * Custom: `(values: any[]) => any`.
42
90
  */
43
91
  aggregate?: "sum" | "avg" | "min" | "max" | ((values: any[]) => any);
44
- /**
45
- * Optional formatter for the aggregate value displayed in group footers.
46
- * Falls back to the column's formatter if not provided.
47
- */
92
+ /** Formatter for the group-footer aggregate value. Falls back to `formatter`. */
48
93
  aggregateFormatter?: (value: any) => string;
49
94
  /**
50
- * Footer aggregate to compute for this column and display at the bottom of all rows.
51
- * If a function is provided, it will receive the array of raw cell values and should return the aggregate value.
52
- */
53
- footer_aggregate?: "count" | "sum" | "avg" | "min" | "max" | ((values: any[]) => any);
54
- /**
55
- * Optional formatter for the footer aggregate value.
56
- * Falls back to the column's formatter if not provided.
95
+ * Aggregate function for the global footer row at the bottom of all rows.
96
+ * Built-ins: `"count" | "sum" | "avg" | "min" | "max"`.
97
+ *
98
+ * @renamed Was `footer_aggregate` (snake_case) in v2. Now `footerAggregate`.
57
99
  */
100
+ footerAggregate?: "count" | "sum" | "avg" | "min" | "max" | ((values: any[]) => any);
101
+ /** Formatter for the global footer aggregate value. Falls back to `formatter`. */
58
102
  footerAggregateFormatter?: (value: any) => string;
59
- /**
60
- * Horizontal alignment for cell content: left | center | right
61
- */
103
+ /** Horizontal alignment for cell content. */
62
104
  align?: "left" | "center" | "right";
63
- /**
64
- * Horizontal alignment for header content: left | center | right
65
- */
105
+ /** Horizontal alignment for the header cell. */
66
106
  headerAlign?: "left" | "center" | "right";
67
- /** Optional CSS class for body cells of this column */
107
+ /** CSS class for body cells static string or derived from value + row. */
68
108
  className?: string | ((value: any, row: GridRow) => string);
69
- /** Optional inline style for body cells of this column */
109
+ /** Inline style for body cells static or derived. */
70
110
  cellStyle?: CSSProperties | ((value: any, row: GridRow) => CSSProperties);
71
- /** Optional CSS class for the header cell of this column */
111
+ /** CSS class for the header cell. */
72
112
  headerClassName?: string;
73
- /** If true, removes default padding from the cell container for this column */
113
+ /** Remove default padding from the cell container. */
74
114
  noPadding?: boolean;
75
- /** If false, do not wrap renderer output with the default truncation div */
115
+ /** Set to `false` to opt out of the default truncation wrapper. */
76
116
  wrapCellContent?: boolean;
77
117
  }
78
118
  export interface GridRow {
119
+ /** Optional unique identifier. Provide `getRowId` on the grid for custom keys. */
79
120
  id?: string | number;
80
121
  [key: string]: any;
81
122
  }
123
+ /** Runtime multi-level grouping state. */
82
124
  export interface GroupConfig {
83
125
  /** Ordered list of column keys to group by (multi-level). */
84
126
  columnKeys: string[];
85
127
  /**
86
- * Expanded group paths. Each path is a stable string key built from the sequence of
87
- * grouping values, e.g. "City=SF|Status=Open". Root groups are single segment.
128
+ * Expanded group paths. Each path is a stable string built from the sequence
129
+ * of grouping values, e.g. `"City=SF|Status=Open"`.
88
130
  */
89
131
  expanded: Set<string>;
90
132
  }
91
- export interface GroupedData {
92
- [groupValue: string]: {
93
- rows: GridRow[];
94
- count: number;
95
- };
133
+ export interface SortConfig {
134
+ key: string | null;
135
+ direction: SortDirection;
96
136
  }
97
- export type SearchMode = "contains" | "exact" | "startsWith" | "endsWith" | "regex";
98
- export type BulkAction = "delete" | "archive" | "copy" | "edit" | "export";
99
- export interface SavedFilter {
137
+ export interface PaginationConfig {
138
+ enabled: boolean;
139
+ pageSize: number;
140
+ currentPage: number;
141
+ totalPages: number;
142
+ totalRows: number;
143
+ showPageSizeSelector?: boolean;
144
+ pageSizeOptions?: number[];
145
+ }
146
+ export interface ServerPaginationConfig {
147
+ enabled: boolean;
148
+ onPageChange: (page: number, pageSize: number) => Promise<void> | void;
149
+ onPageSizeChange?: (pageSize: number) => Promise<void> | void;
150
+ loading?: boolean;
151
+ totalRows: number;
152
+ }
153
+ /** Export configuration for the grid toolbar. */
154
+ export interface ExportOptions {
155
+ /** Allowed export formats. Defaults to `["xlsx"]`. */
156
+ formats?: Array<"csv" | "json" | "xlsx">;
157
+ /** Default filename without extension. Defaults to `"grid-data"`. */
158
+ filename?: string;
159
+ /** When `false`, export is disabled even if `showExport` is `true`. */
160
+ enabled?: boolean;
161
+ /** `"client"` processes data in the browser; `"server"` calls `onServerExport`. */
162
+ exportMode?: "client" | "server";
163
+ /**
164
+ * Called when `exportMode === "server"`.
165
+ * @param format Requested file format.
166
+ * @param exportSelected Whether only selected rows should be exported.
167
+ * @param selectedRowIds IDs of selected rows when `exportSelected` is `true`.
168
+ */
169
+ onServerExport?: (format: "csv" | "json" | "xlsx", exportSelected: boolean, selectedRowIds?: Array<string | number>) => void;
170
+ }
171
+ /** Client/server pagination options passed to the `pagination` prop. */
172
+ export interface PaginationOptions {
173
+ enabled?: boolean;
174
+ mode?: PaginationMode;
175
+ pageSize?: number;
176
+ showPageSizeSelector?: boolean;
177
+ pageSizeOptions?: number[];
178
+ serverConfig?: ServerPaginationConfig;
179
+ }
180
+ /** Performance tuning knobs for large datasets. */
181
+ export interface PerformanceConfig {
182
+ /** Enable horizontal (column) virtualization. Default `true`. */
183
+ enableHorizontalVirtualization?: boolean;
184
+ /** Column count above which horizontal virtualization activates. Default `50`. */
185
+ horizontalVirtualizationThreshold?: number;
186
+ /** Row count above which sorting is offloaded to a Web Worker. Default `5000`. Set to `0` to disable. */
187
+ sortWorkerThreshold?: number;
188
+ /** Maximum search-cache size for global filtering. Default `5000`. */
189
+ maxFilterCacheSize?: number;
190
+ /** Enable aggressive memoization for large datasets. Default `true`. */
191
+ enableAggressiveMemoization?: boolean;
192
+ }
193
+ export interface ContextMenuItem {
100
194
  id: string;
101
- name: string;
102
- globalFilter: string;
103
- columnFilters: Record<string, any>;
104
- searchMode: SearchMode;
195
+ label: string;
196
+ icon?: ReactNode;
197
+ onClick: (row: GridRow) => void;
198
+ disabled?: boolean;
199
+ /** Renders as a horizontal divider; `label` and `onClick` are ignored. */
200
+ separator?: boolean;
105
201
  }
106
202
  export interface BulkActionOption {
107
- id: BulkAction;
203
+ /**
204
+ * Unique identifier for this action.
205
+ * Open string type — add any custom id (e.g. `"approve"`, `"flag"`).
206
+ */
207
+ id: string;
108
208
  label: string;
109
209
  icon: ReactNode;
110
210
  onClick: (selectedRows: Set<string | number>) => void;
111
211
  disabled?: boolean;
112
212
  destructive?: boolean;
113
213
  }
214
+ export interface SavedFilter {
215
+ id: string;
216
+ name: string;
217
+ globalFilter: string;
218
+ columnFilters: Record<string, ColumnFilterValue>;
219
+ searchMode: SearchMode;
220
+ }
221
+ export interface ServerFilterChangePayload {
222
+ globalFilter: string;
223
+ columnFilters: ActiveFilters;
224
+ filterableKeys: string[];
225
+ searchMode?: SearchMode;
226
+ }
227
+ export interface ColumnConfig {
228
+ columnWidths: Record<string, number>;
229
+ columnVisibility: Record<string, boolean>;
230
+ pinnedColumns: string[];
231
+ sortConfig: SortConfig;
232
+ /** Multi-level grouping state persisted to storage. */
233
+ groupConfig?: {
234
+ columnKeys?: string[];
235
+ };
236
+ filters: {
237
+ globalFilter: string;
238
+ columnFilters: ActiveFilters;
239
+ };
240
+ columnOrder?: string[];
241
+ density?: Density;
242
+ }
243
+ export interface RowEventParams {
244
+ row: GridRow;
245
+ event: MouseEvent;
246
+ }
247
+ export interface CellClickParams {
248
+ row: GridRow;
249
+ column: GridColumn;
250
+ value: any;
251
+ event: MouseEvent;
252
+ }
253
+ export interface CellContextMenuParams {
254
+ row: GridRow;
255
+ column: GridColumn;
256
+ value: any;
257
+ displayValue: string;
258
+ event: MouseEvent;
259
+ }
260
+ export interface CellFocusParams {
261
+ row: GridRow;
262
+ column: GridColumn;
263
+ value: any;
264
+ rowIndex: number;
265
+ colIndex: number;
266
+ }
267
+ export interface CellSelectionPayload {
268
+ bounds: {
269
+ rowStart: number;
270
+ rowEnd: number;
271
+ colStart: number;
272
+ colEnd: number;
273
+ } | null;
274
+ cells: Array<CellFocusParams>;
275
+ }
276
+ export interface CopyCellsPayload {
277
+ text: string;
278
+ bounds?: {
279
+ rowStart: number;
280
+ rowEnd: number;
281
+ colStart: number;
282
+ colEnd: number;
283
+ } | null;
284
+ cells: Array<CellFocusParams>;
285
+ isRectangular: boolean;
286
+ isFocusedCell: boolean;
287
+ }
114
288
  export interface KDGridProps {
115
289
  data: GridRow[];
116
290
  columns: GridColumn[];
117
291
  /**
118
- * Optional function to derive unique row identifier from a row object.
119
- * Priority order:
120
- * 1. If getRowId is provided, use it to extract the ID from the row
121
- * 2. Else if row.id exists, use it
122
- * 3. Else use the row's index as fallback (may cause issues with pagination/filtering)
292
+ * Derive a unique row identifier from a row object.
123
293
  *
124
- * Examples:
125
- * - (row) => row.employeeId
126
- * - (row) => `${row.dept}_${row.name}` (composite key)
127
- * - (row) => row.uuid
128
- *
129
- * Recommendation: Always provide either row.id or getRowId prop for best results.
294
+ * Priority:
295
+ * 1. `getRowId(row)` if provided
296
+ * 2. `row.id` if present
297
+ * 3. Row index (⚠️ may cause issues with pagination / filtering)
130
298
  */
131
299
  getRowId?: (row: GridRow) => string | number;
300
+ /** Fixed height of the grid container in pixels. */
132
301
  height?: number;
302
+ /** Row density. Default `"md"`. */
133
303
  density?: Density;
134
304
  onDensityChange?: (density: Density) => void;
135
- /**
136
- * Optional header size controls (independent of row density).
137
- * - If headerHeight is provided, it takes precedence (fixed pixel height).
138
- * - Else if headerDensity is provided, it maps to the density sizing (sm|md|lg).
139
- * - Else defaults to medium (md).
140
- */
141
- headerDensity?: Density;
142
- headerHeight?: number;
305
+ /** Show a density toggle in the toolbar. */
143
306
  showDensityControl?: boolean;
144
- onRowSelect?: (row: GridRow) => void;
145
- onSelectedRowsChange?: (selectedRows: Set<string | number>) => void;
146
- selectable?: boolean;
147
- isRowSelectable?: (row: GridRow) => boolean;
148
- showToolbar?: boolean;
149
- showExport?: boolean;
307
+ /** Override the header row height in pixels. Takes precedence over `headerDensity`. */
308
+ headerHeight?: number;
309
+ /** Independent density for the header row. */
310
+ headerDensity?: Density;
311
+ rowHeight?: number;
312
+ overscan?: number;
150
313
  /**
151
- * Optional export options to control which formats are allowed and default filename.
152
- * If not provided, only Excel ("xlsx") will be allowed by default.
314
+ * When total post-filter rows this number, virtualization is disabled for
315
+ * simpler DOM. Default `300`.
153
316
  */
154
- exportOptions?: {
155
- /** Allowed export formats (defaults to ["xlsx"]) */
156
- formats?: Array<"csv" | "json" | "xlsx">;
157
- /** Default exported filename without extension (defaults to "grid-data") */
158
- filename?: string;
159
- /** Enable/disable export action (defaults to true; combined with showExport) */
160
- enabled?: boolean;
161
- /** Export execution mode. Default: 'client'. */
162
- exportMode?: "client" | "server";
163
- /**
164
- * Optional handler to perform server-side export when exportMode === 'server'.
165
- * If exportSelected is true, selectedRowIds will contain the ids that are currently selected in the grid.
166
- */
167
- onServerExport?: (format: "csv" | "json" | "xlsx", exportSelected: boolean, selectedRowIds?: Array<string | number>) => void;
168
- };
317
+ virtualizationThreshold?: number;
318
+ selectable?: boolean;
169
319
  sortable?: boolean;
170
320
  filterable?: boolean;
171
321
  groupable?: boolean;
172
322
  virtualized?: boolean;
173
- rowHeight?: number;
174
- overscan?: number;
175
- rowStyle?: (row: GridRow) => CSSProperties | undefined;
176
- onContextMenu?: (row: GridRow, event: MouseEvent) => void;
177
- onRowDoubleClick?: (row: GridRow, event: MouseEvent) => void;
178
- onRowClick?: (row: GridRow, event: MouseEvent) => void;
179
- onCellClick?: (args: {
180
- row: GridRow;
181
- column: GridColumn;
182
- value: any;
183
- event: MouseEvent;
184
- }) => void;
185
- onCellContextMenu?: (args: {
186
- row: GridRow;
187
- column: GridColumn;
188
- value: any;
189
- displayValue: string;
190
- event: MouseEvent;
191
- }) => void;
192
- cellFocusEnabled?: boolean;
193
- onCellFocusChange?: (args: {
194
- row: GridRow;
195
- column: GridColumn;
196
- value: any;
197
- rowIndex: number;
198
- colIndex: number;
199
- }) => void;
200
- cellSelectionEnabled?: boolean;
201
- canSelectCell?: (row: GridRow, column: GridColumn) => boolean;
202
- onCellSelectionChange?: (payload: {
203
- bounds: {
204
- rowStart: number;
205
- rowEnd: number;
206
- colStart: number;
207
- colEnd: number;
208
- } | null;
209
- cells: Array<{
210
- row: GridRow;
211
- column: GridColumn;
212
- value: any;
213
- rowIndex: number;
214
- colIndex: number;
215
- }>;
216
- }) => void;
217
- onAutosizeColumn?: (columnKey: string) => void;
218
- onAutosizeAllColumns?: () => void;
219
- onResetColumns?: () => void;
220
- pagination?: {
221
- enabled?: boolean;
222
- mode?: PaginationMode;
223
- pageSize?: number;
224
- showPageSizeSelector?: boolean;
225
- pageSizeOptions?: number[];
226
- serverConfig?: ServerPaginationConfig;
227
- };
228
- /** If provided, when total (post-filter) rows <= threshold virtualization is auto-disabled for simpler DOM (default: 300). */
229
- virtualizationThreshold?: number;
323
+ /** Show a loading overlay / skeleton. Replaces `isLoading` from v2. */
324
+ loading?: boolean;
325
+ /** Text to show when there are no rows to display. */
326
+ noDataMessage?: string;
327
+ /** Fully custom empty-state renderer; overrides `noDataMessage`. */
328
+ noDataRenderer?: () => ReactNode;
329
+ showToolbar?: boolean;
330
+ showExport?: boolean;
331
+ exportOptions?: ExportOptions;
332
+ toolbarLeft?: ReactNode;
333
+ toolbarRight?: ReactNode;
230
334
  onRefresh?: () => void;
231
- isLoading?: boolean;
335
+ /** Externally controlled selection ids (controlled mode). */
336
+ selectedRowIds?: Iterable<string | number> | null;
337
+ onRowSelect?: (row: GridRow) => void;
338
+ onSelectedRowsChange?: (selectedRows: Set<string | number>) => void;
339
+ /** Predicate; return `false` to make a specific row non-selectable. */
340
+ isRowSelectable?: (row: GridRow) => boolean;
232
341
  bulkActions?: BulkActionOption[];
342
+ pagination?: PaginationOptions;
343
+ /**
344
+ * Controls how the global search bar matches text.
345
+ * Default `"contains"`.
346
+ */
347
+ searchMode?: SearchMode;
233
348
  savedFilters?: SavedFilter[];
234
349
  onSaveFilter?: (filter: Omit<SavedFilter, "id">) => void;
235
350
  onLoadFilter?: (filter: SavedFilter) => void;
236
351
  onDeleteFilter?: (filterId: string) => void;
352
+ /** Fired on every filter change — useful for server-side filtering. */
237
353
  onFilterChange?: (payload: ServerFilterChangePayload) => void;
238
- onSort?: (columnKey: string, direction: "asc" | "desc") => void;
239
- onColumnConfigChange?: (config: ColumnConfig) => void;
240
- initialColumnConfig?: Partial<ColumnConfig>;
241
- toolbarLeft?: ReactNode;
242
- toolbarRight?: ReactNode;
243
354
  /**
244
- * Controls the visibility of the Group Bar (the area where you can drop headers to group).
245
- * - 'hidden': never show the bar
246
- * - 'auto': show only when there are active grouped columns
247
- * - 'visible': always show when groupable is true
355
+ * Called when the user sorts a column.
356
+ * `direction` is `null` when the sort is cleared.
248
357
  */
358
+ onSort?: (columnKey: string, direction: "asc" | "desc" | null) => void;
249
359
  groupBarVisibility?: "hidden" | "auto" | "visible";
250
- /**
251
- * How to render group aggregation footer rows when grouping is enabled.
252
- * - 'chips': render a colored summary bar with chips (default)
253
- * - 'columns': render a full-width colored row placing aggregate values under their respective columns
254
- */
255
360
  groupFooterVariant?: "chips" | "columns";
256
- /**
257
- * Optional custom renderer for actions on grouped rows.
258
- * Receives information about the group and its rows.
259
- */
361
+ showGroupExpandControls?: boolean;
260
362
  renderGroupActions?: (groupInfo: {
261
363
  groupKey: string;
262
364
  columnKey: string;
@@ -265,160 +367,58 @@ export interface KDGridProps {
265
367
  count: number;
266
368
  level: number;
267
369
  }) => ReactNode;
370
+ /** CSS class applied to each row — static string or derived from row + index. */
371
+ rowClassName?: string | ((row: GridRow, index: number) => string);
372
+ rowStyle?: (row: GridRow) => CSSProperties | undefined;
373
+ onRowClick?: (params: RowEventParams) => void;
374
+ onRowDoubleClick?: (params: RowEventParams) => void;
375
+ /** Right-click on a row (before the built-in context menu opens). */
376
+ onContextMenu?: (params: RowEventParams) => void;
377
+ /** Custom items for the row right-click context menu. */
378
+ contextMenuItems?: ContextMenuItem[];
379
+ onCellClick?: (params: CellClickParams) => void;
380
+ onCellContextMenu?: (params: CellContextMenuParams) => void;
381
+ /** Enable single-cell focus with arrow-key navigation. */
382
+ cellFocusEnabled?: boolean;
383
+ onCellFocusChange?: (params: CellFocusParams) => void;
384
+ /** Enable rectangular cell selection (disables browser text selection). */
385
+ cellSelectionEnabled?: boolean;
386
+ /** Return `false` to prevent a specific cell from being selected. */
387
+ canSelectCell?: (row: GridRow, column: GridColumn) => boolean;
388
+ onCellSelectionChange?: (payload: CellSelectionPayload) => void;
268
389
  /**
269
- * Show expand/collapse all group buttons in the toolbar when grouping is enabled.
270
- * Defaults to true.
271
- */
272
- showGroupExpandControls?: boolean;
273
- /**
274
- * Callback invoked when user copies cells (Ctrl/Cmd + C) while cell focus or rectangular selection is active.
275
- * Provides the plain text that was written to the clipboard (tab/newline delimited) and metadata.
276
- */
277
- onCopyCells?: (payload: {
278
- text: string;
279
- /** Present only for rectangular selections */
280
- bounds?: {
281
- rowStart: number;
282
- rowEnd: number;
283
- colStart: number;
284
- colEnd: number;
285
- } | null;
286
- cells: Array<{
287
- row: GridRow;
288
- column: GridColumn;
289
- value: any;
290
- rowIndex: number;
291
- colIndex: number;
292
- }>;
293
- isRectangular: boolean;
294
- isFocusedCell: boolean;
295
- }) => void;
296
- /** Optional controlled selection ids */
297
- selectedRowIds?: Iterable<string | number> | null;
298
- /** Performance optimization settings for large datasets */
299
- performanceConfig?: {
300
- /** Enable horizontal virtualization for large column sets (default: true) */
301
- enableHorizontalVirtualization?: boolean;
302
- /** Column count threshold to enable horizontal virtualization (default: 50) */
303
- horizontalVirtualizationThreshold?: number;
304
- /** Row count threshold to offload sorting to a Web Worker (default: 5000). Set to 0 to always sort inline. */
305
- sortWorkerThreshold?: number;
306
- /** Maximum cache size for filtering operations (default: 5000) */
307
- maxFilterCacheSize?: number;
308
- /** Enable aggressive memoization for large datasets (default: true) */
309
- enableAggressiveMemoization?: boolean;
310
- };
311
- }
312
- export interface ContextMenuItem {
313
- id: string;
314
- label: string;
315
- icon?: ReactNode;
316
- onClick: (row: GridRow) => void;
317
- disabled?: boolean;
318
- separator?: boolean;
319
- }
320
- export type SortDirection = "asc" | "desc" | null;
321
- export interface SortConfig {
322
- key: string | null;
323
- direction: SortDirection;
324
- }
325
- export interface VirtualizedRange {
326
- startIndex: number;
327
- endIndex: number;
328
- offsetY: number;
329
- }
330
- export interface ColumnFilterValue {
331
- type: FilterType;
332
- value: any;
333
- operator?: "equals" | "contains" | "startsWith" | "endsWith" | "gt" | "lt" | "gte" | "lte" | "between";
334
- secondValue?: any;
335
- }
336
- export interface ActiveFilters {
337
- [columnKey: string]: ColumnFilterValue;
338
- }
339
- export interface ColumnConfig {
340
- columnWidths: Record<string, number>;
341
- columnVisibility: Record<string, boolean>;
342
- pinnedColumns: string[];
343
- sortConfig: SortConfig;
344
- /**
345
- * Persisted grouping configuration. New multi-level shape uses columnKeys.
346
- * The legacy single-key field (columnKey) is retained for backward compatibility.
390
+ * Called when the user copies cells with Ctrl/⌘+C while cell focus or
391
+ * rectangular selection is active.
347
392
  */
348
- groupConfig?: {
349
- columnKeys?: string[];
350
- columnKey?: string | null;
351
- };
352
- filters: {
353
- globalFilter: string;
354
- columnFilters: ActiveFilters;
355
- };
356
- columnOrder?: string[];
357
- density?: Density;
358
- }
359
- export interface PaginationConfig {
360
- enabled: boolean;
361
- pageSize: number;
362
- currentPage: number;
363
- totalPages: number;
364
- totalRows: number;
365
- showPageSizeSelector?: boolean;
366
- pageSizeOptions?: number[];
367
- }
368
- export interface ServerPaginationConfig {
369
- enabled: boolean;
370
- onPageChange: (page: number, pageSize: number) => Promise<void> | void;
371
- onPageSizeChange?: (pageSize: number) => Promise<void> | void;
372
- loading?: boolean;
373
- totalRows: number;
374
- }
375
- export type PaginationMode = "client" | "server";
376
- export interface FilterPopupProps {
377
- column: GridColumn;
378
- data: GridRow[];
379
- currentFilter?: ColumnFilterValue;
380
- onApplyFilter: (filter: ColumnFilterValue | null) => void;
381
- onClose: () => void;
382
- position: {
383
- top: number;
384
- left: number;
385
- };
386
- autoApply?: boolean;
387
- }
388
- export interface ServerFilterChangePayload {
389
- globalFilter: string;
390
- columnFilters: ActiveFilters;
391
- filterableKeys: string[];
392
- searchMode?: SearchMode;
393
+ onCopyCells?: (payload: CopyCellsPayload) => void;
394
+ onAutosizeColumn?: (columnKey: string) => void;
395
+ onAutosizeAllColumns?: () => void;
396
+ onResetColumns?: () => void;
397
+ onColumnConfigChange?: (config: ColumnConfig) => void;
398
+ initialColumnConfig?: Partial<ColumnConfig>;
399
+ performanceConfig?: PerformanceConfig;
393
400
  }
394
- /**
395
- * Imperative handle for KDGrid to allow external control of grouping.
396
- * Use with React.forwardRef and useImperativeHandle in the grid component.
397
- */
398
401
  export interface KDGridRef {
399
- /** Replace the entire ordered grouping keys */
402
+ /** Replace the entire ordered grouping key list. */
400
403
  setGroupKeys: (keys: string[]) => void;
401
- /** Add a grouping key at the end if not already present */
404
+ /** Append a grouping key if not already present. */
402
405
  addGroupKey: (key: string) => void;
403
- /** Remove a specific grouping key */
406
+ /** Remove a specific grouping key. */
404
407
  removeGroupKey: (key: string) => void;
405
- /** Expand all group paths for the current grouping keys */
408
+ /** Expand every group for the current grouping keys. */
406
409
  expandAllGroups: () => void;
407
- /** Collapse all group paths */
410
+ /** Collapse all groups. */
408
411
  collapseAllGroups: () => void;
409
- /** Toggle a specific group path, e.g. "City=SF|Status=Open" */
412
+ /** Toggle a specific group path, e.g. `"City=SF|Status=Open"`. */
410
413
  toggleGroupExpansion: (groupPath: string) => void;
411
- /** Read the current in-grid grouping configuration */
414
+ /** Read the current grouping configuration. */
412
415
  getGroupConfig: () => GroupConfig;
413
- /** Set a column filter programmatically */
414
- setColumnFilter: (columnKey: string, filter: any) => void;
415
- /** Clear a specific column filter */
416
+ /** Apply a column filter programmatically. Pass `null` to clear. */
417
+ setColumnFilter: (columnKey: string, filter: ColumnFilterValue | null) => void;
418
+ /** Clear a single column filter. */
416
419
  clearColumnFilter: (columnKey: string) => void;
417
- /** Clear all column filters */
420
+ /** Clear all active filters (global + column). */
418
421
  clearAllFilters: () => void;
419
- /** Set global filter */
422
+ /** Set the global search text. */
420
423
  setGlobalFilter: (value: string) => void;
421
424
  }
422
- export interface CustomDataGridProps extends KDGridProps {
423
- }
424
- export type CustomDataGridRef = KDGridRef;