react-excel-lite 0.0.7 → 0.2.0

package/README.md

@@ -16,6 +16,7 @@ A lightweight, Excel-like editable grid component for React.
 - Grouped column headers with custom styling
 - Row headers with custom styling
 - Keyboard shortcuts (Delete/Backspace to clear)
+- Expandable input field when editing (text overflow handling)
 - **Styling-agnostic**: Works with Tailwind CSS, CSS Modules, plain CSS, or any styling solution
 - Zero external dependencies
 
@@ -48,8 +49,8 @@ function App() {
 | ---------------- | ---------------------------- | -------- | --------------------------- |
 | `data`           | `string[][]`                 | Yes      | 2D array of strings         |
 | `onChange`       | `(data: string[][]) => void` | Yes      | Callback when data changes  |
-| `rowHeaders`     | `RowHeaderGroup[]`           | No       | Row header definitions      |
-| `colHeaders`     | `ColHeaderGroup[]`           | No       | Grouped column headers      |
+| `rowHeaders`     | `HeaderGroup[]`              | No       | Row header definitions      |
+| `colHeaders`     | `HeaderGroup[]`              | No       | Grouped column headers      |
 | `className`      | `string`                     | No       | CSS class for container     |
 | `rowHeaderTitle` | `string`                     | No       | Title for row header column |
 | `styles`         | `GridStyles`                 | No       | Style configuration object  |
@@ -59,7 +60,7 @@ function App() {
 ```tsx
 import { useState } from "react";
 import { ExcelGrid } from "react-excel-lite";
-import type { ColHeaderGroup, RowHeaderGroup } from "react-excel-lite";
+import type { HeaderGroup } from "react-excel-lite";
 
 function App() {
   const [data, setData] = useState([
@@ -67,7 +68,7 @@ function App() {
     ["500", "600", "700", "800"],
   ]);
 
-  const colHeaders: ColHeaderGroup[] = [
+  const colHeaders: HeaderGroup[] = [
     {
       label: "Q1",
       headers: [
@@ -84,9 +85,14 @@ function App() {
     },
   ];
 
-  const rowHeaders: RowHeaderGroup[] = [
-    { key: "prodA", label: "Product A", description: "Main product line" },
-    { key: "prodB", label: "Product B", description: "Secondary product" },
+  const rowHeaders: HeaderGroup[] = [
+    {
+      label: "Products",
+      headers: [
+        { key: "prodA", label: "Product A", description: "Main product line" },
+        { key: "prodB", label: "Product B", description: "Secondary product" },
+      ],
+    },
   ];
 
   return (
@@ -108,6 +114,7 @@ The component comes with sensible default styles built-in. You can customize sty
 ### Default Styles
 
 Out of the box, the grid has:
+
 - Light gray borders and headers
 - Blue selection highlight
 - Blue fill handle
@@ -178,13 +185,13 @@ const styles: GridStyles = {
 
 ```ts
 interface GridStyles {
-  cell?: string;       // CSS class for data cells
-  selected?: string;   // CSS class for selected cells (overrides default)
+  cell?: string; // CSS class for data cells
+  selected?: string; // CSS class for selected cells (overrides default)
   fillTarget?: string; // CSS class for fill target cells (overrides default)
   fillHandle?: string; // CSS class for fill handle (overrides default)
-  colGroup?: string;   // CSS class for column group headers
-  colHeader?: string;  // CSS class for individual column headers
-  rowHeader?: string;  // CSS class for row headers
+  colGroup?: string; // CSS class for column group headers
+  colHeader?: string; // CSS class for individual column headers
+  rowHeader?: string; // CSS class for row headers
 }
 ```
 
@@ -193,7 +200,7 @@ interface GridStyles {
 Style individual column headers and groups:
 
 ```tsx
-const colHeaders: ColHeaderGroup[] = [
+const colHeaders: HeaderGroup[] = [
   {
     label: "Revenue",
     className: "bg-green-100 text-green-700",
@@ -208,11 +215,13 @@ const colHeaders: ColHeaderGroup[] = [
 Style individual row headers:
 
 ```tsx
-const rowHeaders: RowHeaderGroup[] = [
+const rowHeaders: HeaderGroup[] = [
   {
-    key: "regionA",
-    label: "Region A",
-    className: "bg-slate-700 text-white",
+    label: "Regions",
+    headers: [
+      { key: "regionA", label: "Region A", className: "bg-slate-700 text-white" },
+      { key: "regionB", label: "Region B", className: "bg-slate-600 text-white" },
+    ],
   },
 ];
 ```
@@ -272,22 +281,16 @@ interface SelectionRange {
   end: CellCoord | null;
 }
 
-interface ColHeader {
+interface Header {
   key: string;
   label: string;
   description?: string;
   className?: string;
 }
 
-interface ColHeaderGroup {
-  label: string;
-  headers: ColHeader[];
-  className?: string;
-}
-
-interface RowHeaderGroup {
-  key: string;
+interface HeaderGroup {
   label: string;
+  headers: Header[];
   description?: string;
   className?: string;
 }
@@ -305,10 +308,14 @@ interface GridStyles {
 interface ExcelGridProps {
   data: string[][];
   onChange: (data: string[][]) => void;
-  rowHeaders?: RowHeaderGroup[];
-  colHeaders?: ColHeaderGroup[];
+  rowHeaders?: HeaderGroup[];
+  colHeaders?: HeaderGroup[];
   className?: string;
   rowHeaderTitle?: string;
   styles?: GridStyles;
 }
 ```
+
+## License
+
+MIT License © 2025 prkgnt

package/dist/components/excel-grid.d.ts.map

@@ -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"}
+{"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"}

package/dist/components/grid-cell.d.ts.map

@@ -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"}
+{"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;AA8E9C,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,2CA4Kf"}

package/dist/hooks/use-grid-clipboard.d.ts

@@ -6,6 +6,7 @@ interface UseGridClipboardProps {
         coord: CellCoord;
         value: string;
     }[]) => void;
+    setSelection: (range: SelectionRange) => void;
     rowCount: number;
     colCount: number;
 }
@@ -14,6 +15,6 @@ interface UseGridClipboardReturn {
     handlePaste: () => Promise<void>;
     handleKeyDown: (e: React.KeyboardEvent) => void;
 }
-export declare function useGridClipboard({ selection, getValue, setValues, rowCount, colCount, }: UseGridClipboardProps): UseGridClipboardReturn;
+export declare function useGridClipboard({ selection, getValue, setValues, setSelection, rowCount, colCount, }: UseGridClipboardProps): UseGridClipboardReturn;
 export {};
 //# sourceMappingURL=use-grid-clipboard.d.ts.map

package/dist/hooks/use-grid-clipboard.d.ts.map

@@ -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"}
+{"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"}

package/dist/hooks/use-grid-selection.d.ts

@@ -1,4 +1,8 @@
+import { RefObject } from 'react';
 import { CellCoord, SelectionRange } from '../types';
+interface UseGridSelectionProps {
+    containerRef: RefObject<HTMLDivElement | null>;
+}
 interface UseGridSelectionReturn {
     selection: SelectionRange;
     isSelecting: boolean;
@@ -9,6 +13,6 @@ interface UseGridSelectionReturn {
     clearSelection: () => void;
     setSelection: (range: SelectionRange) => void;
 }
-export declare function useGridSelection(): UseGridSelectionReturn;
+export declare function useGridSelection({ containerRef, }: UseGridSelectionProps): UseGridSelectionReturn;
 export {};
 //# sourceMappingURL=use-grid-selection.d.ts.map

package/dist/hooks/use-grid-selection.d.ts.map

@@ -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"}
+{"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

@@ -6,5 +6,5 @@ export { useGridDragFill } from './hooks/use-grid-drag-fill';
 export { cn } from './utils/cn';
 export { formatCurrency, parseCurrency } from './utils/format-utils';
 export { coordToKey, keyToCoord, getCellsInRange, isCellInRange, parseTSV, toTSV, normalizeRange, getFillTargetCells, } from './utils/grid-utils';
-export type { CellCoord, SelectionRange, ColHeader, ColHeaderGroup, RowHeaderGroup, GridStyles, ExcelGridProps, GridCellProps, } from './types';
+export type { CellCoord, SelectionRange, Header, HeaderGroup, GridStyles, ExcelGridProps, GridCellProps, } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -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"}
+{"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,MAAM,EACN,WAAW,EACX,UAAU,EACV,cAAc,EACd,aAAa,GACd,MAAM,SAAS,CAAC"}