Excel

Import and Export from XLSX files

Use the @rowsncolumns/toolkit package to read, write and download Excel files from SheetData object

Import from Excel

import { createRowDataFromExcelFile } from "@rowsncolumns/toolkit";

const App = () => {
  const handleChange = async (e) => {
    const file = e.target.files[0]
    const { sheets, sheetData, tables } = await createRowDataFromExcelFile(file)
    
    onChange(sheets)
    onChangSheetData(sheetData)
    onChangeTables(tables)
    
    // Call calculateNow to trigger a full-recalc if you are using
    // useSpreadsheetState hook
  }
  return (
    <div>
      <input type="file" onChange={handleChange} />
    </div>
  )
}

Export to Excel

Toolkit provides createExcelFile and exportToExcel functions to either create a excel ArrayBuffer or create a downloadable excel file.

// Export toolkit
import {
  createExcelFile,
  exportToExcel,
} from "@rowsncolumns/toolkit";

import React, { useState } from "react"
import { useSpreadsheetState, SheeData } from "@rowsncolumns/spreadsheet-state"
import { functionDescriptions, functions } from "@rowsncolumns/functions";
import { 
  SpreadsheetProvider,
  CanvasGrid, 
  CellData, 
  Sheet, 
  EmbeddedChart, 
  EmbeddedObject, 
  TableView 
} from "@rowsncolumns/spreadsheet"

const MySpreadSheet = () => {
  const [sheets, onChangeSheets] = useState<Sheet[]>([]);
  const [sheetData, onChangeSheetData] = useState<SheetData<CellData>>({});
  const [scale, onChangeScale] = useState(1);
  const [charts, onChangeCharts] = useState<EmbeddedChart[]>([]);
  const [embeds, onChangeEmbeds] = useState<EmbeddedObject[]>([]);
  const [tables, onChangeTables] = useState<TableView[]>([]);
  
  return (
    <button onClick={async () => {
      // Download excel file
      await exportToExcel({
        filename: "my_excel_file",
        sheets,
        sheetData,
        tables
      })
      
      // OR Create a Array buffer
      const blob = await createExcelFile({ sheets, sheetData, tables })
      
    }}>Download excel</button>
  )
}