redux-spreadsheet v0.5.59

Redux Spreadsheet (Beta)

Excel/Google-like spreadsheet

Demos

Storybook

Setup

Installation

npm install redux-spreadsheet or yarn add redux-spreadsheet

Usage

Without Initial State

import { Excel } from 'redux-spreadsheet'
import 'redux-spreadsheet/dist/main.cjs.css'

const SomeComponent = () => {
  const handleSave = (excelState) => {
    // Do something with data
  }
  return <Excel handleSave={handleSave} />
}

Documentation

Excel

Props

• initialState?: initial excel state (note that Undox wraps the excel state for redo and undo)
• styles?: style of the Excel's root div
• handleSave?: gets called with store data when save event triggers
• isRouted?: determines whether react-router is used for active sheet

Focused Features

• TypeScript support/type definitions (unsure how to generate)
• Mobile
  • Detect double tap
• History (Some actions have not been included yet)
  • Redo
  • Undo
• Commands
  • Save
  • Arrow keys
  • Delete Area
  • Select all
  • Shift arrow keys
• Selection
  • Single selection
  • Multi-selection
  • Selection slicing
  • Select rows / columns
  • Inactive selection area borders
• Inline-styles/rich-text
  • Bold
  • Italic
  • Strikethrough
  • Underline
• Merged Cells
  • Selection area
  • Active cell
  • Update formula references
• Router
  • Page router (not fully-working)
  • No page router
  • Return link
• Formulas
  • Formula dependents map
  • Formula independents map
  • Formula results
  • Clean up formula independent references
  • Column/row references (=SUM(A:A) or =SUM(1:1))
  • Variables
  • Optimize range edit/delete
  • Normalize dependents/independents
  • Error on cyclic reference
  • Update cell only when value change
• Formula bar
  • Input
• File upload
  • Initial state
  • Basic data
• File Download
  • .xlsx
• Block-styles
• Sheet navigation
  • Switch sheet name
  • Delete sheet name
  • Update sheet name
  • Update formula references for rename
• Row / Column
  • Resize (Have been implemented before in non-canvas)
  • Resize Freeze
  • Set row / column count
• Scroll
  • Selection area
  • Arrow key press
  • Other key presses
• ...many more to do

Main Libraries Used

Issues

• Adding keys on canvas elements causes lag
• Build performance is slower than local
• Page router URL has issues

Potential Optimizations

• Formula mapping
• Web workers
• ? Refactor cell data structure - compress certain states (like styles?)
• ? Refactor row heights/column width offsets to visible (edge case with millions of columns/rows)

Limitations

• Extremely large files will cause lag since the state is stored in the client