{"id":39558461,"url":"https://github.com/sojinantony01/react-spread-sheet","last_synced_at":"2026-01-18T07:03:14.591Z","repository":{"id":189379503,"uuid":"680570130","full_name":"sojinantony01/react-spread-sheet","owner":"sojinantony01","description":"A quick example of rendering large lists of inputs in table using React JS and Redux","archived":false,"fork":false,"pushed_at":"2025-12-12T08:38:11.000Z","size":10758,"stargazers_count":9,"open_issues_count":3,"forks_count":7,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-12-13T19:31:05.098Z","etag":null,"topics":["1lakh-inputs","excel","json-spreadsheet","react-excel","react-performance","spreadsheet"],"latest_commit_sha":null,"homepage":"https://sojinantony01.github.io/react-spread-sheet/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sojinantony01.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-08-19T17:10:57.000Z","updated_at":"2025-12-10T10:23:50.000Z","dependencies_parsed_at":"2025-02-01T18:01:38.906Z","dependency_job_id":"6838908e-37fe-4cc8-9192-566862103543","html_url":"https://github.com/sojinantony01/react-spread-sheet","commit_stats":{"total_commits":85,"total_committers":3,"mean_commits":"28.333333333333332","dds":0.03529411764705881,"last_synced_commit":"f801165b81f0595125df215f159e6d4403f42a44"},"previous_names":["sojinantony01/react-excel-sheet","sojinantony01/react-spread-sheet"],"tags_count":47,"template":false,"template_full_name":null,"purl":"pkg:github/sojinantony01/react-spread-sheet","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sojinantony01%2Freact-spread-sheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sojinantony01%2Freact-spread-sheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sojinantony01%2Freact-spread-sheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sojinantony01%2Freact-spread-sheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sojinantony01","download_url":"https://codeload.github.com/sojinantony01/react-spread-sheet/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sojinantony01%2Freact-spread-sheet/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28532605,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T00:39:45.795Z","status":"online","status_checked_at":"2026-01-18T02:00:07.578Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["1lakh-inputs","excel","json-spreadsheet","react-excel","react-performance","spreadsheet"],"created_at":"2026-01-18T07:03:13.938Z","updated_at":"2026-01-18T07:03:14.585Z","avatar_url":"https://github.com/sojinantony01.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/sojinantony"],"categories":[],"sub_categories":[],"readme":"# React Spread Sheet Excel - Lightning Fast Excel Component for React ⚡\n\n[![npm version](https://badge.fury.io/js/react-spread-sheet-excel.svg)](https://badge.fury.io/js/react-spread-sheet-excel) \n![Downloads](https://img.shields.io/npm/dm/react-spread-sheet-excel.svg)\n\u003ca href=\"https://codecov.io/gh/sojinantony01/react-spread-sheet\"\u003e\n  \u003cimg src=\"https://codecov.io/gh/sojinantony01/react-spread-sheet/graph/badge.svg?token=OLGA3TDJIL\"/\u003e \n\u003c/a\u003e\n\u003ca href=\"https://github.com/sojinantony01/react-spread-sheet/blob/main/LICENSE\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/l/react-spread-sheet-excel.svg\" alt=\"license\"\u003e\n\u003c/a\u003e\n\n\u003e **The fastest, most lightweight React spreadsheet component** - Render 100,000+ cells with blazing performance. Perfect for building Excel-like applications, data grids, and complex data entry forms in React.\n\n## 🚀 Why Choose React Spread Sheet Excel?\n\n- ⚡ **Blazing Fast** - Optimized virtual scrolling renders 100,000+ cells smoothly\n- 🪶 **Ultra Lightweight** - Only ~300KB, no heavy dependencies\n- 🧮 **Excel-like Formulas** - Full calculation engine with cell references (=A1*B2+C3)\n- 🎨 **Rich Formatting** - Bold, italic, underline, colors, alignment, and more\n- 📊 **Merge Cells** - Combine cells like in Excel\n- ↩️ **Undo/Redo** - Full history management\n- ⌨️ **Keyboard Navigation** - Arrow keys, shortcuts, Excel-like experience\n- 📋 **Copy/Paste** - Multi-cell selection and clipboard operations\n- 📁 **Import/Export** - CSV and XLSX support\n- 🔒 **Read-Only Mode** - Display data without editing\n- 🎯 **100% Test Coverage** - Reliable and production-ready\n- 📱 **TypeScript Support** - Full type definitions included\n\n## 📺 Live Demo\n\n**[Try it now →](https://sojinantony01.github.io/react-spread-sheet/)**\n\n## ⚡ Performance\n\nThis library is highly optimized for performance. See our **[Performance Guide](PERFORMANCE.md)** for:\n- Detailed benchmarks\n- Optimization techniques\n- Best practices\n- Memory management tips\n\n![React Spread Sheet Excel Demo](https://raw.githubusercontent.com/sojinantony01/react-spread-sheet/main/public/images/react-spread-sheet-excel.png)\n\n![React Spread Sheet Excel Animation](https://raw.githubusercontent.com/sojinantony01/react-spread-sheet/main/public/images/react-spread-sheet-excel-ezgif.com-video-to-gif-converter.gif)\n\n## 📦 Installation\n\n```bash\nnpm install react-spread-sheet-excel\n```\n\n```bash\nyarn add react-spread-sheet-excel\n```\n\n```bash\npnpm add react-spread-sheet-excel\n```\n\n## 🎯 Quick Start\n\n```tsx\nimport React, { useRef, useState } from \"react\";\nimport Sheet, { SheetRef } from \"react-spread-sheet-excel\";\n\nfunction App() {\n  const [data] = useState([\n    [{ value: \"Product\" }, { value: \"Price\" }, { value: \"Quantity\" }, { value: \"Total\" }],\n    [{ value: \"Apple\" }, { value: \"1.5\" }, { value: \"10\" }, { value: \"=B2*C2\" }],\n    [{ value: \"Banana\" }, { value: \"0.8\" }, { value: \"15\" }, { value: \"=B3*C3\" }],\n  ]);\n  \n  const sheetRef = useRef\u003cSheetRef\u003e(null);\n\n  const handleChange = (row?: number, col?: number, value?: string) =\u003e {\n    console.log(`Cell [${row}, ${col}] changed to: ${value}`);\n  };\n\n  const getData = () =\u003e {\n    const updatedData = sheetRef.current?.getData();\n    console.log(\"Current data:\", updatedData);\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={getData}\u003eGet Data\u003c/button\u003e\n      \u003cSheet data={data} onChange={handleChange} ref={sheetRef} /\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n## 🎨 Features in Detail\n\n### ⚡ Performance Optimized\n\nOur spreadsheet uses advanced virtual scrolling and memoization techniques to handle massive datasets:\n\n- **Virtual Rendering**: Only visible cells are rendered\n- **Optimized Re-renders**: Smart memoization prevents unnecessary updates\n- **Calculation Caching**: Formula results are cached for instant display\n- **Lazy Loading**: Rows load on-demand as you scroll\n\n**Benchmark**: Renders 1000 rows × 100 columns in milliseconds!\n\n### 🧮 Excel-like Formulas\n\nFull calculation engine supporting:\n\n```javascript\n// Cell references\n=A1 + B2\n\n// Complex formulas\n=A1 * B2 + (C3 - D4) / E5\n\n// Multiple operations\n=(A1 + A2 + A3) * 0.1\n```\n\n### 🎨 Rich Text Formatting\n\n```tsx\n// Apply formatting via toolbar or keyboard shortcuts\nCtrl/Cmd + B  // Bold\nCtrl/Cmd + I  // Italic\nCtrl/Cmd + U  // Underline\n\n// Programmatic styling\nconst styledData = [\n  [{ \n    value: \"Header\", \n    styles: { \n      fontWeight: \"bold\", \n      background: \"#4CAF50\", \n      color: \"white\" \n    } \n  }]\n];\n```\n\n### 📋 Copy/Paste Operations\n\n- **Multi-cell selection**: Click and drag or Shift+Arrow keys\n- **Copy**: Ctrl/Cmd + C\n- **Cut**: Ctrl/Cmd + X\n- **Paste**: Ctrl/Cmd + V\n- **Select All**: Ctrl/Cmd + A\n\n### 📁 Import/Export\n\n#### CSV Export\n\n```tsx\nimport { SheetRef } from \"react-spread-sheet-excel\";\n\nconst sheetRef = useRef\u003cSheetRef\u003e(null);\n\n// Export to CSV\nconst exportCSV = () =\u003e {\n  sheetRef.current?.exportCsv(\"mydata\", true); // true = include headers\n};\n```\n\n#### XLSX Import/Export\n\n```bash\nnpm install @e965/xlsx\n```\n\n```tsx\nimport * as XLSX from \"@e965/xlsx\";\nimport { getCalculatedVal, printToLetter } from \"react-spread-sheet-excel\";\n\n// Import XLSX\nconst importFromXlsx = (file: File, onSuccess: (data: any[][]) =\u003e void) =\u003e {\n  const reader = new FileReader();\n  reader.onload = (e) =\u003e {\n    const arrayBuffer = e.target?.result as ArrayBuffer;\n    const workbook = XLSX.read(arrayBuffer, { type: \"array\" });\n    const worksheet = workbook.Sheets[workbook.SheetNames[0]];\n    const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }) as any[][];\n    \n    const formatted = jsonData.map((row) =\u003e \n      row.map((cell) =\u003e ({ value: cell }))\n    );\n    onSuccess(formatted);\n  };\n  reader.readAsArrayBuffer(file);\n};\n\n// Export XLSX\nconst exportToXlsx = (data: any[][], fileName = \"export.xlsx\") =\u003e {\n  const aoa = data.map((row) =\u003e\n    row.map((cell) =\u003e {\n      if (cell.value?.toString().startsWith(\"=\")) {\n        return getCalculatedVal(cell.value, data);\n      }\n      return cell.value;\n    })\n  );\n  \n  const worksheet = XLSX.utils.aoa_to_sheet(aoa);\n  const workbook = XLSX.utils.book_new();\n  XLSX.utils.book_append_sheet(workbook, worksheet, \"Sheet1\");\n  XLSX.writeFile(workbook, fileName);\n};\n```\n\n## 📖 API Reference\n\n### Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `data` | `any[][]` | `[[]]` | Initial spreadsheet data (2D array) |\n| `onChange` | `(row?, col?, value?) =\u003e void` | - | Callback fired on cell changes |\n| `resize` | `boolean` | `false` | Enable column resizing |\n| `hideXAxisHeader` | `boolean` | `false` | Hide column headers (A, B, C...) |\n| `hideYAxisHeader` | `boolean` | `false` | Hide row numbers (1, 2, 3...) |\n| `headerValues` | `string[]` | `['A','B','C'...]` | Custom column headers |\n| `readonly` | `boolean` | `false` | Make spreadsheet read-only |\n| `hideTools` | `boolean` | `false` | Hide formatting toolbar |\n| `autoAddAdditionalRows` | `boolean` | `true` | Auto-add rows when scrolling |\n\n### Ref Methods\n\n| Method | Parameters | Returns | Description |\n|--------|------------|---------|-------------|\n| `getData` | - | `Data[][]` | Get current spreadsheet data |\n| `setData` | `data: Data[][]` | `void` | Replace all data |\n| `exportCsv` | `filename: string, includeHeaders?: boolean` | `void` | Export to CSV file |\n| `updateOneCell` | `row: number, col: number, value: any` | `void` | Update single cell |\n| `getOneCell` | `row: number, col: number` | `Data` | Get single cell data |\n\n### Data Format\n\n```typescript\ninterface Data {\n  value: string | number;\n  styles?: { [key: string]: string };\n  type?: string;\n  colSpan?: number;\n  rowSpan?: number;\n  skip?: boolean; // For merged cells\n}\n```\n\n## 🎯 Use Cases\n\n### 📊 Data Entry Forms\nPerfect for complex data entry with calculations, validations, and formatting.\n\n### 📈 Financial Applications\nBuild budgeting tools, expense trackers, and financial calculators.\n\n### 📋 Inventory Management\nTrack products, quantities, prices with automatic calculations.\n\n### 📊 Report Builders\nCreate dynamic reports with user-editable data and formulas.\n\n### 🎓 Educational Tools\nBuild interactive spreadsheet tutorials and exercises.\n\n## 🔧 Advanced Examples\n\n### Custom Styling\n\n```tsx\nconst styledData = [\n  [\n    { \n      value: \"Revenue\", \n      styles: { \n        fontWeight: \"bold\", \n        fontSize: \"16px\",\n        background: \"#2196F3\",\n        color: \"white\",\n        textAlign: \"center\"\n      } \n    },\n    { value: \"=B2+B3+B4\", styles: { fontWeight: \"bold\" } }\n  ]\n];\n```\n\n### Merged Cells\n\n```tsx\nconst mergedData = [\n  [\n    { value: \"Merged Header\", colSpan: 3, rowSpan: 1 },\n    { skip: true },\n    { skip: true }\n  ]\n];\n```\n\n### Read-Only Cells\n\n```tsx\n\u003cSheet \n  data={data} \n  readonly={true}  // Entire sheet read-only\n/\u003e\n```\n\n### Custom Headers\n\n```tsx\n\u003cSheet \n  data={data}\n  headerValues={[\"Product\", \"Q1\", \"Q2\", \"Q3\", \"Q4\", \"Total\"]}\n/\u003e\n```\n\n## 🎮 Keyboard Shortcuts\n\n| Shortcut | Action |\n|----------|--------|\n| `Arrow Keys` | Navigate cells |\n| `Shift + Arrow` | Select multiple cells |\n| `Ctrl/Cmd + C` | Copy |\n| `Ctrl/Cmd + X` | Cut |\n| `Ctrl/Cmd + V` | Paste |\n| `Ctrl/Cmd + Z` | Undo |\n| `Ctrl/Cmd + Shift + Z` | Redo |\n| `Ctrl/Cmd + B` | Bold |\n| `Ctrl/Cmd + I` | Italic |\n| `Ctrl/Cmd + U` | Underline |\n| `Ctrl/Cmd + A` | Select all |\n| `Delete/Backspace` | Clear selected cells |\n| `Enter` | Edit cell |\n| `Esc` | Cancel edit |\n\n## 🧪 Testing\n\n100% test coverage with comprehensive unit tests:\n\n```bash\nnpm test\n```\n\n## 📚 Resources\n\n- **[Performance Guide](PERFORMANCE.md)** - Optimization tips and benchmarks\n- **[Live Demo](https://sojinantony01.github.io/react-spread-sheet/)**\n- **[CodeSandbox Example](https://codesandbox.io/p/sandbox/dry-water-gy2g6k)**\n- **[StackBlitz Example](https://stackblitz.com/edit/react-xr6ifg?file=src%2FApp.js)**\n- **[Medium Article: Building a Lightning-Fast Spreadsheet](https://medium.com/@sojin.antony01/how-i-built-a-lightning-fast-excel-like-spreadsheet-in-react-that-renders-100-000-cells-4ed925524df9)**\n- **[Medium Article: State Management Without Redux](https://medium.com/@sojin.antony01/no-more-redux-or-context-to-manage-complex-data-in-your-react-application-try-2fa6dc23c715)**\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## 📄 License\n\nISC License - see [LICENSE](LICENSE) file for details\n\n## 👨‍💻 Author\n\n**[Sojin Antony](https://github.com/sojinantony01)**\n\n[![\"Buy Me A Coffee\"](https://www.buymeacoffee.com/assets/img/guidelines/download-assets-sm-1.svg)](https://www.buymeacoffee.com/sojinantony)\n\n## 🌟 Show Your Support\n\nIf this project helped you, please give it a ⭐️!\n\n## 🔍 Keywords\n\nreact spreadsheet, react excel, react data grid, react table, excel component, spreadsheet component, data entry, virtual scrolling, formula calculation, cell formatting, react datagrid, editable grid, react grid, excel-like, spreadsheet editor, data table, react table editor, lightweight spreadsheet, fast spreadsheet, performance spreadsheet\n\n---\n\n**Made with ❤️ for the React community**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsojinantony01%2Freact-spread-sheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsojinantony01%2Freact-spread-sheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsojinantony01%2Freact-spread-sheet/lists"}