Introduction

Introducing Spreadsheet 2, the ultimate spreadsheet component for React that empowers you to render cells and editors declaratively while fully customizing the components with React's power.

Canvas

One of the key benefits of Spreadsheet 2 is its high-performance rendering using canvas. This approach enables all UI interactions to be built on top of canvas using DOM nodes, making it incredibly customizable.

With Spreadsheet 2, developers have the freedom to add additional behaviour, such as Drag n Drop, Overlays, Charts, and Embeds, all while leveraging the power of React.

Declarative

Spreadsheet 2 takes the declarative approach to rendering, which means it renders exactly what you pass as props. This enables developers to effortlessly pick and choose the components they need and compose a spreadsheet that aligns with their vision.

Plus, you can easily add custom components like buttons, tabs, or any other UI element to enhance the appearance of your spreadsheet.

import "@rowsncolumns/spreadsheet/dist/spreadsheet.min.css";
import { 
  SpreadsheetProvider, 
  Spreadsheet, 
  FormulaBar,
  FormulaInput,
  CanvasGrid,
  Toolbar,
  BottomBar,
  NewSheetButton,
  SheetSwitcher,
  SheetTabs
} from "@rowsncolumns/spreadsheet"

const App = () => {
  return (
    <SpreadsheetProvider>
      <Toolbar>
        <ButtonUndo onClick={undo} disabled={!canUndo} />
        <ButtonRedo onClick={redo} disabled={!canRedo} />
      </Toolbar>
      <FormulaBar>
        <FormulaInput />
      </FormulaBar>
      <CanvasGrid
        rowCount={1000}
        columnCount={1000}
        getCellData={(sheetId, rowIndex, columnIndex) => {
            return {
                formattedValue: 'Foobar'
            }
        })}
      />
      <BottomBar>
        <NewSheetButton />
        <SheetSwitcher />
        <SheetTabs />
      </BottomBar>
    <SpreadsheetProvider>
  )
}

Performance

Performance is a top priority for us at Spreadsheet 2. With our advanced virtualization technique, the canvas only renders what is visible on the screen, resulting in quick rendering that targets a smooth 60 frames per second (FPS).

Additionally, our ScrollSnap feature makes scrolling buttery smooth, even for larger datasets, providing a seamless user experience.

Accessibility

Accessibility is a crucial aspect of our development process. We offer support for keyboard shortcuts and navigation, and our platform is natively compatible with both light and dark modes.

We also provide the option for developers to customise themes, ensuring optimal accessibility for users with low/tunnel vision.

Mobile/Touch devices

We understand the importance of mobile devices, which is why Spreadsheet 2 is compatible with most mobile browsers.

In the rare event that you encounter any issues with scrolling or selecting, please don't hesitate to contact us at [e-mail]. We're always here to help!

pageInstallation