react-open-source-grid 1.6.4 → 1.6.6

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.
@@ -1 +1 @@
1
- export * from './index-BczRxCQn.js';
1
+ export * from './index-DgcHJP8T.js';
@@ -1 +1 @@
1
- import{a as e,c as t,i as n,n as r,o as i,r as a,s as o,t as s}from"./index-BczRxCQn.js";export{e as createPreset};
1
+ import{a as e,c as t,i as n,n as r,o as i,r as a,s as o,t as s}from"./index-DgcHJP8T.js";export{e as createPreset};
package/dist/index.html CHANGED
@@ -70,8 +70,8 @@
70
70
  }
71
71
  })();
72
72
  </script>
73
- <script type="module" crossorigin src="/assets/index-BczRxCQn.js"></script>
74
- <link rel="stylesheet" crossorigin href="/assets/index-DqLWhpvP.css">
73
+ <script type="module" crossorigin src="/assets/index-DgcHJP8T.js"></script>
74
+ <link rel="stylesheet" crossorigin href="/assets/index-CQcTDWao.css">
75
75
  </head>
76
76
  <body>
77
77
  <!-- SEO Content Section -->
@@ -0,0 +1,15 @@
1
+ import React from 'react';
2
+ /**
3
+ * AdvancedEditorsDemo - Showcase of Advanced Cell Editors
4
+ *
5
+ * This demo demonstrates all five advanced cell editors:
6
+ * - RichSelectEditor: Searchable dropdown for single selection
7
+ * - DateEditor: Calendar-based date/time picker
8
+ * - NumericEditor: Numeric input with validation and formatting
9
+ * - MultiSelectEditor: Multiple selection with chips/tags
10
+ * - MarkdownEditor: Rich text editor with markdown preview
11
+ *
12
+ * These editors are fully integrated with the DataGrid and can also be
13
+ * used as standalone components in your own applications via npm.
14
+ */
15
+ export declare const AdvancedEditorsDemo: React.FC;
@@ -0,0 +1,29 @@
1
+ /**
2
+ * PivotToolbar Component
3
+ *
4
+ * Exportable toolbar for configuring pivot table settings
5
+ * Can be used standalone by npm package consumers
6
+ */
7
+ import React from 'react';
8
+ import type { PivotConfig } from './pivotEngine';
9
+ export interface PivotToolbarProps {
10
+ /** Available columns for pivot/grouping/values */
11
+ columns: Array<{
12
+ field: string;
13
+ headerName: string;
14
+ }>;
15
+ /** Current pivot configuration */
16
+ pivotConfig?: Partial<PivotConfig> | null;
17
+ /** Callback when pivot is enabled/disabled */
18
+ onPivotToggle: (enabled: boolean) => void;
19
+ /** Callback when configuration changes */
20
+ onConfigChange: (config: PivotConfig | null) => void;
21
+ /** Whether pivot mode is currently active */
22
+ isPivotMode?: boolean;
23
+ /** Custom styles */
24
+ style?: React.CSSProperties;
25
+ /** Custom class name */
26
+ className?: string;
27
+ }
28
+ export declare const PivotToolbar: React.FC<PivotToolbarProps>;
29
+ export default PivotToolbar;
@@ -39,3 +39,7 @@ export type { WebSocketConfig, MarketDataSubscription, ConnectionState, UseMarke
39
39
  export { WebSocketMockFeed, createMockFeed, createMockWebSocket } from './WebSocketMockFeed';
40
40
  export type { MockMarketData, MockFeedConfig, MockWebSocket } from './WebSocketMockFeed';
41
41
  export type { MarketDataConfig } from './types';
42
+ export { PivotToolbar } from './PivotToolbar';
43
+ export type { PivotToolbarProps } from './PivotToolbar';
44
+ export { buildPivot, exportPivotToCSV, downloadCSV } from './pivotEngine';
45
+ export type { PivotConfig, PivotResult, PivotColumn, AggregatorType } from './pivotEngine';
@@ -0,0 +1,55 @@
1
+ /**
2
+ * Pivot Table Engine
3
+ *
4
+ * Transforms flat data into pivoted format with dynamic columns based on unique values
5
+ * Supports aggregation functions: sum, count, avg, min, max, custom
6
+ */
7
+ export type AggregatorType = 'sum' | 'count' | 'avg' | 'min' | 'max';
8
+ export interface PivotConfig {
9
+ /** Column whose unique values become new columns */
10
+ pivotColumn: string;
11
+ /** Column to aggregate values from */
12
+ valueColumn: string;
13
+ /** Column to group rows by (becomes first column) */
14
+ rowGroupColumn: string;
15
+ /** Aggregation function to apply */
16
+ aggregator: AggregatorType | ((values: number[]) => number);
17
+ /** Show totals row at bottom */
18
+ showTotals?: boolean;
19
+ /** Show grand total column */
20
+ showGrandTotal?: boolean;
21
+ }
22
+ export interface PivotColumn {
23
+ field: string;
24
+ headerName: string;
25
+ width?: number;
26
+ sortable?: boolean;
27
+ filterable?: boolean;
28
+ isPivotColumn?: boolean;
29
+ isTotalColumn?: boolean;
30
+ }
31
+ export interface PivotResult {
32
+ columns: PivotColumn[];
33
+ rows: Record<string, any>[];
34
+ pivotValues: string[];
35
+ totalsRow?: Record<string, any>;
36
+ }
37
+ /**
38
+ * Build pivot table from flat data
39
+ *
40
+ * Complexity: O(n) where n is number of rows
41
+ * Memory: O(n * m) where m is number of unique pivot values
42
+ *
43
+ * @param data - Source data array
44
+ * @param config - Pivot configuration
45
+ * @returns Pivoted dataset with dynamic columns
46
+ */
47
+ export declare function buildPivot(data: any[], config: PivotConfig): PivotResult;
48
+ /**
49
+ * Export pivoted data to CSV
50
+ */
51
+ export declare function exportPivotToCSV(pivotResult: PivotResult): string;
52
+ /**
53
+ * Download CSV file
54
+ */
55
+ export declare function downloadCSV(csvContent: string, filename?: string): void;
@@ -2,6 +2,7 @@ import React from 'react';
2
2
  import type { ThemeName } from './themes';
3
3
  import type { DensityMode } from './densityModes';
4
4
  import type { GridApi } from './gridApi.types';
5
+ import type { PivotConfig } from './pivotEngine';
5
6
  export type FilterType = 'text' | 'number' | 'date' | 'set' | 'multi';
6
7
  export interface Column {
7
8
  field: string;
@@ -13,6 +14,8 @@ export interface Column {
13
14
  pinnable?: boolean;
14
15
  filterType?: FilterType;
15
16
  renderCell?: (row: Row) => React.ReactNode;
17
+ editor?: (props: any) => React.ReactElement;
18
+ editorParams?: any;
16
19
  }
17
20
  export interface Row {
18
21
  id: string | number;
@@ -522,6 +525,7 @@ export interface DataGridProps {
522
525
  marketDataConfig?: MarketDataConfig;
523
526
  contextMenuConfig?: ContextMenuConfig;
524
527
  tooltipConfig?: TooltipConfig;
528
+ pivotConfig?: PivotConfig | null;
525
529
  tableId?: string;
526
530
  theme?: ThemeName;
527
531
  densityMode?: DensityMode;
@@ -0,0 +1,8 @@
1
+ /**
2
+ * Pivot Table Demo Page
3
+ *
4
+ * Demonstrates the pivot table functionality with multiple examples
5
+ */
6
+ import React from 'react';
7
+ export declare const PivotDemo: React.FC;
8
+ export default PivotDemo;
@@ -0,0 +1,23 @@
1
+ import React from 'react';
2
+ import type { DataGridEditorProps } from './editorTypes';
3
+ import './editors.css';
4
+ export interface DateEditorProps<TRow = any> extends DataGridEditorProps<string | Date | null, TRow> {
5
+ /** Date format string (e.g., "yyyy-MM-dd", "MM/dd/yyyy") */
6
+ dateFormat?: string;
7
+ /** Show time picker in addition to date */
8
+ showTime?: boolean;
9
+ /** Minimum selectable date */
10
+ minDate?: Date;
11
+ /** Maximum selectable date */
12
+ maxDate?: Date;
13
+ /** Auto-commit when date is selected */
14
+ autoCommit?: boolean;
15
+ }
16
+ /**
17
+ * DateEditor component for DataGrid cells.
18
+ * Provides a calendar popup for date selection with optional time picker.
19
+ */
20
+ export declare function DateEditor<TRow = any>(props: DateEditorProps<TRow>): React.ReactElement;
21
+ export declare namespace DateEditor {
22
+ var displayName: string;
23
+ }
@@ -0,0 +1,23 @@
1
+ import React from 'react';
2
+ import type { DataGridEditorProps } from './editorTypes';
3
+ import './editors.css';
4
+ export interface MarkdownEditorProps<TRow = any> extends DataGridEditorProps<string, TRow> {
5
+ /** Maximum character length */
6
+ maxLength?: number;
7
+ /** Show preview panel */
8
+ showPreview?: boolean;
9
+ /** Minimum height of the editor in pixels */
10
+ minHeight?: number;
11
+ /** Maximum height of the editor in pixels */
12
+ maxHeight?: number;
13
+ /** Number of visible rows in textarea */
14
+ rows?: number;
15
+ }
16
+ /**
17
+ * MarkdownEditor component for DataGrid cells.
18
+ * Provides a multi-line textarea with optional markdown preview.
19
+ */
20
+ export declare function MarkdownEditor<TRow = any>(props: MarkdownEditorProps<TRow>): React.ReactElement;
21
+ export declare namespace MarkdownEditor {
22
+ var displayName: string;
23
+ }
@@ -0,0 +1,31 @@
1
+ import React from 'react';
2
+ import type { DataGridEditorProps, EditorOption } from './editorTypes';
3
+ import './editors.css';
4
+ export interface MultiSelectOption extends EditorOption {
5
+ label: string;
6
+ value: string | number;
7
+ icon?: React.ReactNode;
8
+ disabled?: boolean;
9
+ }
10
+ export interface MultiSelectEditorProps<TValue = any, TRow = any> extends DataGridEditorProps<TValue[], TRow> {
11
+ /** Array of options to select from */
12
+ options: MultiSelectOption[];
13
+ /** Placeholder text when no values selected */
14
+ placeholder?: string;
15
+ /** Maximum number of tags to display before collapsing */
16
+ maxTagCount?: number;
17
+ /** Enable filtering/search functionality */
18
+ filterable?: boolean;
19
+ /** Maximum height of dropdown in pixels */
20
+ maxDropdownHeight?: number;
21
+ /** Allow deselecting all values */
22
+ allowEmpty?: boolean;
23
+ }
24
+ /**
25
+ * MultiSelectEditor component for DataGrid cells.
26
+ * Allows selecting multiple values displayed as chips/tags.
27
+ */
28
+ export declare function MultiSelectEditor<TValue = any, TRow = any>(props: MultiSelectEditorProps<TValue, TRow>): React.ReactElement;
29
+ export declare namespace MultiSelectEditor {
30
+ var displayName: string;
31
+ }
@@ -0,0 +1,33 @@
1
+ import React from 'react';
2
+ import type { DataGridEditorProps } from './editorTypes';
3
+ import './editors.css';
4
+ export interface NumericEditorProps<TRow = any> extends DataGridEditorProps<number | null, TRow> {
5
+ /** Minimum allowed value */
6
+ min?: number;
7
+ /** Maximum allowed value */
8
+ max?: number;
9
+ /** Step size for increment/decrement */
10
+ step?: number;
11
+ /** Number of decimal places to display */
12
+ decimals?: number;
13
+ /** Prefix text (e.g., "$", "€") */
14
+ prefix?: string;
15
+ /** Suffix text (e.g., "kg", "%", "USD") */
16
+ suffix?: string;
17
+ /** Allow negative numbers */
18
+ allowNegative?: boolean;
19
+ /** Show stepper buttons */
20
+ showSteppers?: boolean;
21
+ /** Thousands separator character */
22
+ thousandsSeparator?: string;
23
+ /** Decimal separator character */
24
+ decimalSeparator?: string;
25
+ }
26
+ /**
27
+ * NumericEditor component for DataGrid cells.
28
+ * Provides numeric input with optional stepper buttons and validation.
29
+ */
30
+ export declare function NumericEditor<TRow = any>(props: NumericEditorProps<TRow>): React.ReactElement;
31
+ export declare namespace NumericEditor {
32
+ var displayName: string;
33
+ }
@@ -0,0 +1,32 @@
1
+ import React from 'react';
2
+ import type { DataGridEditorProps, EditorOption } from './editorTypes';
3
+ import './editors.css';
4
+ export interface RichSelectOption extends EditorOption {
5
+ label: string;
6
+ value: string | number;
7
+ icon?: React.ReactNode;
8
+ disabled?: boolean;
9
+ description?: string;
10
+ }
11
+ export interface RichSelectEditorProps<TValue = any, TRow = any> extends DataGridEditorProps<TValue, TRow> {
12
+ /** Array of options to select from */
13
+ options: RichSelectOption[];
14
+ /** Placeholder text when no value selected */
15
+ placeholder?: string;
16
+ /** Allow clearing the selected value */
17
+ allowClear?: boolean;
18
+ /** Enable filtering/search functionality */
19
+ filterable?: boolean;
20
+ /** Custom render function for option labels */
21
+ renderOptionLabel?: (option: RichSelectOption) => React.ReactNode;
22
+ /** Maximum height of dropdown in pixels */
23
+ maxDropdownHeight?: number;
24
+ }
25
+ /**
26
+ * RichSelectEditor component for DataGrid cells.
27
+ * Provides a searchable dropdown for selecting a single option from a list.
28
+ */
29
+ export declare function RichSelectEditor<TValue = any, TRow = any>(props: RichSelectEditorProps<TValue, TRow>): React.ReactElement;
30
+ export declare namespace RichSelectEditor {
31
+ var displayName: string;
32
+ }
@@ -0,0 +1,60 @@
1
+ import type { ReactNode } from 'react';
2
+ import type { Column } from '../components/DataGrid/types';
3
+ /**
4
+ * Base props interface for all DataGrid cell editors.
5
+ * This interface matches the grid's editing API expectations.
6
+ */
7
+ export interface DataGridEditorProps<TValue = any, TRow = any> {
8
+ /** Current value being edited */
9
+ value: TValue;
10
+ /** The row data object */
11
+ row: TRow;
12
+ /** Column definition for this cell */
13
+ column: Column;
14
+ /** Callback to update the value during editing */
15
+ onChange: (value: TValue) => void;
16
+ /** Callback to commit the edit and close the editor */
17
+ onCommit: () => void;
18
+ /** Callback to cancel the edit and close the editor */
19
+ onCancel: () => void;
20
+ /** Whether the editor should auto-focus on mount */
21
+ autoFocus?: boolean;
22
+ }
23
+ /**
24
+ * Keyboard event handlers for editor navigation
25
+ */
26
+ export interface EditorKeyboardHandlers {
27
+ onEnter?: () => void;
28
+ onEscape?: () => void;
29
+ onTab?: (shiftKey: boolean) => void;
30
+ onArrowUp?: () => void;
31
+ onArrowDown?: () => void;
32
+ onBlur?: () => void;
33
+ }
34
+ /**
35
+ * Configuration for editor keyboard navigation behavior
36
+ */
37
+ export interface EditorKeyboardConfig {
38
+ /** Commit on Enter key (default: true) */
39
+ commitOnEnter?: boolean;
40
+ /** Cancel on Escape key (default: true) */
41
+ cancelOnEscape?: boolean;
42
+ /** Commit on Tab key (default: true) */
43
+ commitOnTab?: boolean;
44
+ /** Commit on blur/focus loss (default: true) */
45
+ commitOnBlur?: boolean;
46
+ /** Prevent default for handled keys (default: true) */
47
+ preventDefault?: boolean;
48
+ /** Stop propagation for handled keys (default: true) */
49
+ stopPropagation?: boolean;
50
+ }
51
+ /**
52
+ * Option interface for select-based editors
53
+ */
54
+ export interface EditorOption {
55
+ label: string;
56
+ value: string | number;
57
+ icon?: ReactNode;
58
+ disabled?: boolean;
59
+ description?: string;
60
+ }
@@ -0,0 +1,38 @@
1
+ import type { EditorKeyboardHandlers, EditorKeyboardConfig } from './editorTypes';
2
+ /**
3
+ * Hook for standardized keyboard navigation in cell editors.
4
+ * Handles common editor keyboard interactions (Enter, Escape, Tab, etc.)
5
+ */
6
+ export declare function useEditorKeyboardNavigation(handlers: EditorKeyboardHandlers, config?: EditorKeyboardConfig): {
7
+ handleKeyDown: (event: React.KeyboardEvent) => void;
8
+ };
9
+ /**
10
+ * Hook for auto-focusing an element when the editor mounts
11
+ */
12
+ export declare function useEditorAutoFocus<T extends HTMLElement>(autoFocus?: boolean, selectAll?: boolean): import("react").RefObject<T | null>;
13
+ /**
14
+ * Hook for handling click outside to commit editor
15
+ */
16
+ export declare function useEditorClickOutside(ref: React.RefObject<HTMLElement | null>, onClickOutside: () => void, enabled?: boolean): void;
17
+ /**
18
+ * Hook for positioning a popup/dropdown relative to an anchor element
19
+ */
20
+ export declare function usePopupPosition(anchorRef: React.RefObject<HTMLElement | null>, popupRef: React.RefObject<HTMLElement | null>, isOpen: boolean, placement?: 'top' | 'bottom' | 'left' | 'right' | 'auto'): void;
21
+ /**
22
+ * Debounce utility for editor operations
23
+ */
24
+ export declare function debounce<T extends (...args: any[]) => any>(func: T, wait: number): (...args: Parameters<T>) => void;
25
+ /**
26
+ * Format number with thousands separator and decimal places
27
+ */
28
+ export declare function formatNumber(value: number, decimals?: number, thousandsSeparator?: string, decimalSeparator?: string): string;
29
+ /**
30
+ * Parse formatted number string back to number
31
+ */
32
+ export declare function parseFormattedNumber(value: string, thousandsSeparator?: string, decimalSeparator?: string): number | null;
33
+ /**
34
+ * Filter options based on search query
35
+ */
36
+ export declare function filterOptions<T extends {
37
+ label: string;
38
+ }>(options: T[], searchQuery: string): T[];
@@ -0,0 +1,12 @@
1
+ export type { DataGridEditorProps, EditorKeyboardHandlers, EditorKeyboardConfig, EditorOption, } from './editorTypes';
2
+ export { useEditorKeyboardNavigation, useEditorAutoFocus, useEditorClickOutside, usePopupPosition, debounce, formatNumber, parseFormattedNumber, filterOptions, } from './editorUtils';
3
+ export { RichSelectEditor } from './RichSelectEditor';
4
+ export type { RichSelectOption, RichSelectEditorProps } from './RichSelectEditor';
5
+ export { DateEditor } from './DateEditor';
6
+ export type { DateEditorProps } from './DateEditor';
7
+ export { NumericEditor } from './NumericEditor';
8
+ export type { NumericEditorProps } from './NumericEditor';
9
+ export { MultiSelectEditor } from './MultiSelectEditor';
10
+ export type { MultiSelectOption, MultiSelectEditorProps } from './MultiSelectEditor';
11
+ export { MarkdownEditor } from './MarkdownEditor';
12
+ export type { MarkdownEditorProps } from './MarkdownEditor';