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)
  • [x] Redo
  • [x] Undo
• Commands
  • [x] Save
  • [x] Arrow keys
  • [x] Delete Area
  • [x] Select all
  • [ ] Shift arrow keys
• Selection
  • [x] Single selection
  • [x] Multi-selection
  • [x] Selection slicing
  • [ ] Select rows / columns
  • [ ] Inactive selection area borders
• Inline-styles/rich-text
  • [x] Bold
  • [x] Italic
  • [x] Strikethrough
  • [x] Underline
• Merged Cells
  • [x] Selection area
  • [x] Active cell
  • [ ] Update formula references
• Router
  • [ ] Page router (not fully-working)
  • [x] No page router
  • [ ] Return link
• Formulas
  • [x] Formula dependents map
  • [x] Formula independents map
  • [x] Formula results
  • [x] Clean up formula independent references
  • [ ] Column/row references (=SUM(A:A) or =SUM(1:1))
  • [ ] Variables
  • [x] Optimize range edit/delete
  • [x] Normalize dependents/independents
  • [ ] Error on cyclic reference
  • [ ] Update cell only when value change
• Formula bar
  • [ ] Input
• File upload
  • [x] Initial state
  • [x] Basic data
• File Download
  • [ ] .xlsx
• Block-styles
• Sheet navigation
  • [x] Switch sheet name
  • [x] Delete sheet name
  • [x] 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
  • [x] Arrow key press
  • [ ] Other key presses
• ...many more to do

Main Libraries Used

| Link | Usage | | ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | | React (specifically hooks) | used for building HTML components | | Redux | used for application state and state management | | Redux Toolkit | tools which make Redux setup straightforward | | React Redux | used to integrate Redux with React | | Redux Mock Store | mocks the Redux store for testing purpose. Fork of ananas7 branch for replace reducer function | | ExcelJs | parses Excel data and creates excel files | | fast-formula-parser | used to compute formula cells in excel format | | react-window | React components for efficiently rendering large lists and tabular data | | undox | Fork of JannieBeck with ignore history | | react-sortable-hoc | Draggable list for sheet navigation | | material-ui | Customized styled base components | | react-konva | Used for rendering canvas grid elements |

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