react-excel-lite 0.1.0 → 0.3.0

package/README.md

@@ -8,6 +8,9 @@
 
 A lightweight, Excel-like editable grid component for React.
 
+## Demo
+[react-excel-lite-demo](https://prkgnt.github.io/react-excel-lite/)
+
 ## Features
 
 - Excel-like cell selection (click & drag)
@@ -16,6 +19,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
 
@@ -27,7 +31,7 @@ npm install react-excel-lite
 
 ## Quick Start
 
-````tsx
+```tsx
 import { useState } from "react";
 import { ExcelGrid } from "react-excel-lite";
 
@@ -40,6 +44,7 @@ function App() {
 
   return <ExcelGrid data={data} onChange={setData} />;
 }
+```
 
 ## Props
 
@@ -47,8 +52,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  |
@@ -58,7 +63,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([
@@ -66,7 +71,7 @@ function App() {
     ["500", "600", "700", "800"],
   ]);
 
-  const colHeaders: ColHeaderGroup[] = [
+  const colHeaders: HeaderGroup[] = [
     {
       label: "Q1",
       headers: [
@@ -83,9 +88,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 (
@@ -98,7 +108,48 @@ function App() {
     />
   );
 }
-````
+```
+
+## Simple Headers (Without Group Labels)
+
+When all HeaderGroups have no `label`, the grid displays a single header row/column instead of two levels:
+
+```tsx
+const colHeaders: HeaderGroup[] = [
+  {
+    // No label - single header row
+    headers: [
+      { key: "jan", label: "Jan" },
+      { key: "feb", label: "Feb" },
+    ],
+  },
+  {
+    headers: [
+      { key: "mar", label: "Mar" },
+      { key: "apr", label: "Apr" },
+    ],
+  },
+];
+
+const rowHeaders: HeaderGroup[] = [
+  {
+    // No label - single header column
+    headers: [
+      { key: "row1", label: "Row 1" },
+      { key: "row2", label: "Row 2" },
+    ],
+  },
+];
+
+<ExcelGrid
+  data={data}
+  onChange={setData}
+  colHeaders={colHeaders}
+  rowHeaders={rowHeaders}
+/>;
+```
+
+If at least one group has a `label`, the grid shows the two-level layout (group labels + individual headers).
 
 ## Styling
 
@@ -193,7 +244,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 +259,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 +325,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;
-  label: string;
+interface HeaderGroup {
+  label?: string;
+  headers: Header[];
   description?: string;
   className?: string;
 }
@@ -305,27 +352,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;
 }
 ```
 
-## Development
-
-```bash
-# Install dependencies
-npm install
-
-# Run demo
-npm run dev
-
-# Build library
-cd lib && npm run build
-```
-
 ## 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;AAsE1D,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,UAAU,EACV,SAAS,EACT,cAAmB,EACnB,MAAM,GACP,EAAE,cAAc,2CAoShB"}
+{"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,2CAiThB"}

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":"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"}
+{"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/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, RowHeader, 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,SAAS,EACT,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"}