FortuneSheet interface on a computer screen in a modern office setting

FortuneSheet: Bringing Excel-like Spreadsheets to Your React App

The Orange Cat
The Orange Cat

@fortune-sheet/react is a powerful JavaScript library that brings Excel-like spreadsheet functionality to your React applications. This versatile tool allows developers to integrate rich, interactive spreadsheets into their web projects, offering a familiar interface for users to manipulate and visualize data. With features reminiscent of popular spreadsheet software like Excel and Google Sheets, FortuneSheet empowers developers to create sophisticated data management solutions within their React applications.

Features

FortuneSheet comes packed with an impressive array of features that make it a robust choice for implementing spreadsheet functionality:

  • Rich Formatting Options: Style cells with various text alignments, rotations, and data types.
  • Cell Operations: Perform multiple selections, merge cells, and apply custom styles.
  • Row and Column Manipulation: Insert and delete rows or columns with ease.
  • Advanced Operations: Copy, paste, cut, and use hotkeys for efficient data handling.
  • Formula Support: Utilize built-in formulas for complex calculations.
  • Collaborative Editing: Work together in real-time with backend storage support.
  • Undo/Redo Functionality: Easily revert or reapply changes.
  • Mobile Adaptation: Ensure your spreadsheets work across various devices.
  • Extensive API: Access a wide range of programmatic controls.
  • Additional Tools: Use features like fill handle, format painter, comments, and image insertion.

Installation

To get started with FortuneSheet in your React project, you can install it using npm or yarn:

npm install @fortune-sheet/react

or

yarn add @fortune-sheet/react

Basic Usage

Let’s dive into how you can integrate FortuneSheet into your React application with some basic examples.

Creating a Simple Spreadsheet

To create a basic spreadsheet, you’ll need to import the Workbook component from @fortune-sheet/react and provide it with some initial data:

import React from 'react';
import { Workbook } from '@fortune-sheet/react';
import '@fortune-sheet/react/dist/index.css';

const App: React.FC = () => {
  const data = [
    {
      name: 'Sheet1',
      celldata: [
        { r: 0, c: 0, v: { v: 'Hello', ct: { fa: 'General', t: 'g' } } },
        { r: 0, c: 1, v: { v: '**FortuneSheet**', ct: { fa: 'General', t: 'g' } } },
      ],
    },
  ];

  return <Workbook data={data} />;
};

export default App;

This code creates a simple spreadsheet with “Hello” in cell A1 and “FortuneSheet” in cell B1. The Workbook component is the main container for your spreadsheet, and the data prop defines the content and structure of your sheets.

Handling Events

FortuneSheet allows you to respond to various user interactions. Here’s an example of how to handle cell selection events:

import React from 'react';
import { Workbook, WorkbookInstance } from '@fortune-sheet/react';
import '@fortune-sheet/react/dist/index.css';

const App: React.FC = () => {
  const handleCellSelected = (cell: { r: number; c: number }) => {
    console.log(`Cell selected: Row ${cell.r}, Column ${cell.c}`);
  };

  const workbookConfig = {
    data: [{ name: 'Sheet1', celldata: [] }],
    onChange: (wb: WorkbookInstance) => {
      console.log('Workbook data changed:', wb.getData());
    },
  };

  return <Workbook {...workbookConfig} onCellSelected={handleCellSelected} />;
};

export default App;

In this example, we’ve added an onCellSelected prop to log the selected cell’s coordinates and an onChange handler to track data changes in the workbook.

Advanced Usage

Now let’s explore some more advanced features of FortuneSheet.

Working with Formulas

FortuneSheet supports a wide range of formulas similar to Excel. Here’s how you can use formulas in your spreadsheet:

import React from 'react';
import { Workbook } from '@fortune-sheet/react';
import '@fortune-sheet/react/dist/index.css';

const App: React.FC = () => {
  const data = [
    {
      name: 'Sheet1',
      celldata: [
        { r: 0, c: 0, v: { v: 10, ct: { fa: 'General', t: 'n' } } },
        { r: 0, c: 1, v: { v: 20, ct: { fa: 'General', t: 'n' } } },
        { r: 0, c: 2, v: { f: 'SUM(A1:B1)', ct: { fa: 'General', t: 'n' } } },
      ],
    },
  ];

  return <Workbook data={data} />;
};

export default App;

This example creates a spreadsheet where cell C1 contains a formula that sums the values in A1 and B1.

Conditional Formatting

Conditional formatting allows you to apply styles to cells based on their content. Here’s how you can implement it:

import React from 'react';
import { Workbook } from '@fortune-sheet/react';
import '@fortune-sheet/react/dist/index.css';

const App: React.FC = () => {
  const data = [
    {
      name: 'Sheet1',
      celldata: [
        { r: 0, c: 0, v: { v: 50, ct: { fa: 'General', t: 'n' } } },
        { r: 0, c: 1, v: { v: 100, ct: { fa: 'General', t: 'n' } } },
        { r: 0, c: 2, v: { v: 150, ct: { fa: 'General', t: 'n' } } },
      ],
      conditionalFormat: [
        {
          type: '1',
          format: {
            textColor: '#ff0000',
            cellColor: '#ffff00',
          },
          conditionName: 'greaterThan',
          conditionRange: [
            { row: [0, 0], column: [0, 2] },
          ],
          conditionValue: [100],
        },
      ],
    },
  ];

  return <Workbook data={data} />;
};

export default App;

This example applies a yellow background and red text to cells with values greater than 100.

Custom Toolbar

FortuneSheet allows you to customize the toolbar to fit your specific needs:

import React from 'react';
import { Workbook } from '@fortune-sheet/react';
import '@fortune-sheet/react/dist/index.css';

const App: React.FC = () => {
  const customToolbar = {
    undo: true,
    redo: true,
    paintFormat: true,
    currencyFormat: true,
    percentageFormat: true,
    numberDecrease: true,
    numberIncrease: true,
    moreFormats: true,
    font: true,
    fontSize: true,
    bold: true,
    italic: true,
    strikethrough: true,
    underline: true,
    textColor: true,
    fillColor: true,
    border: true,
    mergeCell: true,
    horizontalAlignMode: true,
    verticalAlignMode: true,
    textWrapMode: true,
    textRotateMode: true,
  };

  return (
    <Workbook
      data={[{ name: 'Sheet1', celldata: [] }]}
      options={{ showtoolbar: true, showtoolbarConfig: customToolbar }}
    />
  );
};

export default App;

This configuration creates a toolbar with a specific set of tools, allowing you to tailor the user interface to your application’s requirements.

Conclusion

@fortune-sheet/react offers a powerful solution for integrating Excel-like spreadsheet functionality into your React applications. With its rich feature set, including advanced formatting options, formula support, and customizable toolbars, it provides developers with the tools to create sophisticated data management and visualization interfaces.

By leveraging FortuneSheet, you can enhance your React applications with interactive spreadsheets that are familiar to users of popular spreadsheet software. Whether you’re building financial tools, data analysis platforms, or any application that requires tabular data manipulation, FortuneSheet provides a robust foundation for your development needs.

As you explore the capabilities of FortuneSheet, remember that it’s an actively developed library. Keep an eye on the official documentation and changelog for updates and new features that can further enhance your spreadsheet implementations in React.

Comments