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} isRouted />
}

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
  • 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

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

Issues

• Adding keys on canvas elements causes lag
• Build performance is slower than local
• Routing
• Formula when referencing other sheet