react-excel-lite 0.0.7 → 0.1.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/README.md CHANGED
@@ -27,7 +27,7 @@ npm install react-excel-lite
27
27
 
28
28
  ## Quick Start
29
29
 
30
- ```tsx
30
+ ````tsx
31
31
  import { useState } from "react";
32
32
  import { ExcelGrid } from "react-excel-lite";
33
33
 
@@ -40,7 +40,6 @@ function App() {
40
40
 
41
41
  return <ExcelGrid data={data} onChange={setData} />;
42
42
  }
43
- ```
44
43
 
45
44
  ## Props
46
45
 
@@ -99,7 +98,7 @@ function App() {
99
98
  />
100
99
  );
101
100
  }
102
- ```
101
+ ````
103
102
 
104
103
  ## Styling
105
104
 
@@ -108,6 +107,7 @@ The component comes with sensible default styles built-in. You can customize sty
108
107
  ### Default Styles
109
108
 
110
109
  Out of the box, the grid has:
110
+
111
111
  - Light gray borders and headers
112
112
  - Blue selection highlight
113
113
  - Blue fill handle
@@ -178,13 +178,13 @@ const styles: GridStyles = {
178
178
 
179
179
  ```ts
180
180
  interface GridStyles {
181
- cell?: string; // CSS class for data cells
182
- selected?: string; // CSS class for selected cells (overrides default)
181
+ cell?: string; // CSS class for data cells
182
+ selected?: string; // CSS class for selected cells (overrides default)
183
183
  fillTarget?: string; // CSS class for fill target cells (overrides default)
184
184
  fillHandle?: string; // CSS class for fill handle (overrides default)
185
- colGroup?: string; // CSS class for column group headers
186
- colHeader?: string; // CSS class for individual column headers
187
- rowHeader?: string; // CSS class for row headers
185
+ colGroup?: string; // CSS class for column group headers
186
+ colHeader?: string; // CSS class for individual column headers
187
+ rowHeader?: string; // CSS class for row headers
188
188
  }
189
189
  ```
190
190
 
@@ -312,3 +312,20 @@ interface ExcelGridProps {
312
312
  styles?: GridStyles;
313
313
  }
314
314
  ```
315
+
316
+ ## Development
317
+
318
+ ```bash
319
+ # Install dependencies
320
+ npm install
321
+
322
+ # Run demo
323
+ npm run dev
324
+
325
+ # Build library
326
+ cd lib && npm run build
327
+ ```
328
+
329
+ ## License
330
+
331
+ MIT License © 2025 prkgnt
@@ -1 +1 @@
1
- {"version":3,"file":"excel-grid.d.ts","sourceRoot":"","sources":["../../src/components/excel-grid.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAa,MAAM,UAAU,CAAC;AA2D1D,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,UAAU,EACV,SAAS,EACT,cAAmB,EACnB,MAAM,GACP,EAAE,cAAc,2CA+PhB"}
1
+ {"version":3,"file":"excel-grid.d.ts","sourceRoot":"","sources":["../../src/components/excel-grid.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAa,MAAM,UAAU,CAAC;AAsE1D,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,UAAU,EACV,SAAS,EACT,cAAmB,EACnB,MAAM,GACP,EAAE,cAAc,2CAoShB"}
@@ -1 +1 @@
1
- {"version":3,"file":"grid-cell.d.ts","sourceRoot":"","sources":["../../src/components/grid-cell.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AA8C9C,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,KAAK,EACL,UAAU,EACV,YAAY,EACZ,cAAc,EACd,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,qBAAqB,EACrB,MAAM,GACP,EAAE,aAAa,2CA+Df"}
1
+ {"version":3,"file":"grid-cell.d.ts","sourceRoot":"","sources":["../../src/components/grid-cell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AA+C9C,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,KAAK,EACL,UAAU,EACV,YAAY,EACZ,cAAc,EACd,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,qBAAqB,EACrB,MAAM,GACP,EAAE,aAAa,2CAwHf"}
@@ -6,6 +6,7 @@ interface UseGridClipboardProps {
6
6
  coord: CellCoord;
7
7
  value: string;
8
8
  }[]) => void;
9
+ setSelection: (range: SelectionRange) => void;
9
10
  rowCount: number;
10
11
  colCount: number;
11
12
  }
@@ -14,6 +15,6 @@ interface UseGridClipboardReturn {
14
15
  handlePaste: () => Promise<void>;
15
16
  handleKeyDown: (e: React.KeyboardEvent) => void;
16
17
  }
17
- export declare function useGridClipboard({ selection, getValue, setValues, rowCount, colCount, }: UseGridClipboardProps): UseGridClipboardReturn;
18
+ export declare function useGridClipboard({ selection, getValue, setValues, setSelection, rowCount, colCount, }: UseGridClipboardProps): UseGridClipboardReturn;
18
19
  export {};
19
20
  //# sourceMappingURL=use-grid-clipboard.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"use-grid-clipboard.d.ts","sourceRoot":"","sources":["../../src/hooks/use-grid-clipboard.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAG1D,UAAU,qBAAqB;IAC7B,SAAS,EAAE,cAAc,CAAC;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,MAAM,CAAC;IACvC,SAAS,EAAE,CAAC,OAAO,EAAE;QAAE,KAAK,EAAE,SAAS,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,KAAK,IAAI,CAAC;IACpE,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,sBAAsB;IAC9B,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAChC,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACjC,aAAa,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CACjD;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAQ,GACT,EAAE,qBAAqB,GAAG,sBAAsB,CAmHhD"}
1
+ {"version":3,"file":"use-grid-clipboard.d.ts","sourceRoot":"","sources":["../../src/hooks/use-grid-clipboard.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAG1D,UAAU,qBAAqB;IAC7B,SAAS,EAAE,cAAc,CAAC;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,MAAM,CAAC;IACvC,SAAS,EAAE,CAAC,OAAO,EAAE;QAAE,KAAK,EAAE,SAAS,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,KAAK,IAAI,CAAC;IACpE,YAAY,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,sBAAsB;IAC9B,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAChC,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACjC,aAAa,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CACjD;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,QAAQ,GACT,EAAE,qBAAqB,GAAG,sBAAsB,CA2JhD"}
@@ -1,4 +1,8 @@
1
+ import { RefObject } from 'react';
1
2
  import { CellCoord, SelectionRange } from '../types';
3
+ interface UseGridSelectionProps {
4
+ containerRef: RefObject<HTMLDivElement | null>;
5
+ }
2
6
  interface UseGridSelectionReturn {
3
7
  selection: SelectionRange;
4
8
  isSelecting: boolean;
@@ -9,6 +13,6 @@ interface UseGridSelectionReturn {
9
13
  clearSelection: () => void;
10
14
  setSelection: (range: SelectionRange) => void;
11
15
  }
12
- export declare function useGridSelection(): UseGridSelectionReturn;
16
+ export declare function useGridSelection({ containerRef, }: UseGridSelectionProps): UseGridSelectionReturn;
13
17
  export {};
14
18
  //# sourceMappingURL=use-grid-selection.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"use-grid-selection.d.ts","sourceRoot":"","sources":["../../src/hooks/use-grid-selection.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAG1D,UAAU,sBAAsB;IAC9B,SAAS,EAAE,cAAc,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,OAAO,CAAC;IAC9C,mBAAmB,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAChD,oBAAoB,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACjD,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;CAC/C;AAED,wBAAgB,gBAAgB,IAAI,sBAAsB,CA8DzD"}
1
+ {"version":3,"file":"use-grid-selection.d.ts","sourceRoot":"","sources":["../../src/hooks/use-grid-selection.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAG1D,UAAU,qBAAqB;IAC7B,YAAY,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CAChD;AAED,UAAU,sBAAsB;IAC9B,SAAS,EAAE,cAAc,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,OAAO,CAAC;IAC9C,mBAAmB,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAChD,oBAAoB,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACjD,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;CAC/C;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,YAAY,GACb,EAAE,qBAAqB,GAAG,sBAAsB,CA6EhD"}
package/dist/index.d.ts CHANGED
@@ -6,5 +6,5 @@ export { useGridDragFill } from './hooks/use-grid-drag-fill';
6
6
  export { cn } from './utils/cn';
7
7
  export { formatCurrency, parseCurrency } from './utils/format-utils';
8
8
  export { coordToKey, keyToCoord, getCellsInRange, isCellInRange, parseTSV, toTSV, normalizeRange, getFillTargetCells, } from './utils/grid-utils';
9
- export type { CellCoord, SelectionRange, ColHeader, ColHeaderGroup, RowHeaderGroup, GridStyles, ExcelGridProps, GridCellProps, } from './types';
9
+ export type { CellCoord, SelectionRange, ColHeader, ColHeaderGroup, RowHeader, RowHeaderGroup, GridStyles, ExcelGridProps, GridCellProps, } from './types';
10
10
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAGlD,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAG7D,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAChC,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EACL,UAAU,EACV,UAAU,EACV,eAAe,EACf,aAAa,EACb,QAAQ,EACR,KAAK,EACL,cAAc,EACd,kBAAkB,GACnB,MAAM,oBAAoB,CAAC;AAG5B,YAAY,EACV,SAAS,EACT,cAAc,EACd,SAAS,EACT,cAAc,EACd,cAAc,EACd,UAAU,EACV,cAAc,EACd,aAAa,GACd,MAAM,SAAS,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAGlD,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAG7D,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAChC,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EACL,UAAU,EACV,UAAU,EACV,eAAe,EACf,aAAa,EACb,QAAQ,EACR,KAAK,EACL,cAAc,EACd,kBAAkB,GACnB,MAAM,oBAAoB,CAAC;AAG5B,YAAY,EACV,SAAS,EACT,cAAc,EACd,SAAS,EACT,cAAc,EACd,SAAS,EACT,cAAc,EACd,UAAU,EACV,cAAc,EACd,aAAa,GACd,MAAM,SAAS,CAAC"}