Spreadsheet (Excel-Like Table) Implementation for Website

Implementing Spreadsheet (Excel-like Table) on Website

An electronic spreadsheet in browser is one of the most technically complex UI components. Row and column virtualization, cell editing, formulas, cell merging, clipboard copying, range selection — each of these is separate work. Building from scratch on <div> — many months. Using a ready library — a matter of choosing the right one.

Libraries

Handsontable — de facto standard for commercial projects. License: free only for non-commercial. For commerce — paid (from $149/developer). But complete Excel-like experience.

HyperFormula — formula engine from Handsontable team, MIT license. Can use as computational kernel for any UI.

@fortune-sheet/react — full-fledged open-source spreadsheet, MIT. Active development, good Handsontable alternative.

TanStack Table + editable cells — if you need table with inline editing, but not full spreadsheet. Much simpler.

Handsontable: Quick Start

npm install handsontable @handsontable/react

import { HotTable, HotTableClass } from '@handsontable/react'
import { registerAllModules } from 'handsontable/registry'
import 'handsontable/dist/handsontable.full.min.css'

registerAllModules() // Register all plugins

interface SpreadsheetProps {
  data: (string | number | null)[][]
  onChange: (data: (string | number | null)[][]) => void
}

export function Spreadsheet({ data, onChange }: SpreadsheetProps) {
  const hotRef = useRef<HotTableClass>(null)

  const columns = [
    { data: 0, title: 'Product', type: 'text', width: 200 },
    { data: 1, title: 'Qty', type: 'numeric', numericFormat: { pattern: '0,0' } },
    { data: 2, title: 'Price', type: 'numeric', numericFormat: { pattern: '0,0.00 $' } },
    {
      data: 3,
      title: 'Total',
      type: 'numeric',
      numericFormat: { pattern: '0,0.00 $' },
      readOnly: true,
    },
    {
      data: 4,
      title: 'Status',
      type: 'dropdown',
      source: ['In Stock', 'Pre-order', 'Discontinued'],
    },
  ]

  return (
    <HotTable
      ref={hotRef}
      data={data}
      columns={columns}
      rowHeaders={true}
      colHeaders={true}
      contextMenu={true}          // Right click: insert/delete row
      copyPaste={true}            // Ctrl+C/V like Excel
      manualColumnResize={true}
      manualRowResize={true}
      manualColumnMove={true}
      filters={true}              // Filter by column
      dropdownMenu={true}         // Column menu with filters
      multiColumnSorting={true}
      undo={true}                 // Ctrl+Z
      mergeCells={true}
      autoRowSize={false}
      autoColumnSize={false}
      height="500px"
      width="100%"
      licenseKey="non-commercial-and-evaluation"
      afterChange={(changes) => {
        if (!changes) return
        onChange(hotRef.current!.hotInstance!.getData())
      }}
    />
  )
}

Formulas with HyperFormula

npm install hyperformula

import { HyperFormula } from 'hyperformula'
import { HotTable } from '@handsontable/react'

function SpreadsheetWithFormulas() {
  const hfInstance = HyperFormula.buildEmpty({
    licenseKey: 'gpl-v3',
  })

  return (
    <HotTable
      formulas={{
        engine: hfInstance,
        sheetName: 'Sheet1',
      }}
      data={[
        ['Product', 'Qty', 'Price', 'Total'],
        ['Product A', 10, 150, '=B2*C2'],
        ['Product B', 5, 300, '=B3*C3'],
        ['', '', 'Total:', '=SUM(D2:D3)'],
      ]}
      // ...
    />
  )
}

HyperFormula supports 386 functions, including VLOOKUP, SUMIF, DATE functions, array formulas.

Fortune-Sheet: Open-Source Alternative

npm install @fortune-sheet/react

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

function FortuneSpreadsheet() {
  const [sheets, setSheets] = useState([
    {
      name: 'Sheet1',
      celldata: [
        { r: 0, c: 0, v: { v: 'Product', m: 'Product', ct: { fa: 'General', t: 'g' } } },
        { r: 0, c: 1, v: { v: 'Price', m: 'Price', ct: { fa: 'General', t: 'g' } } },
        { r: 1, c: 0, v: { v: 'Coffee', m: 'Coffee' } },
        { r: 1, c: 1, v: { v: 250, m: '250', ct: { fa: '#,##0.00', t: 'n' } } },
      ],
      row: 100,
      column: 26,
    },
  ])

  return (
    <div style={{ height: '600px' }}>
      <Workbook
        data={sheets}
        onChange={setSheets}
        showFormulaBar={true}
        showToolbar={true}
        lang="en"
      />
    </div>
  )
}

Fortune-Sheet supports formulas, conditional formatting, charts, cell merging, XLSX import/export via SheetJS.

Export to Excel (XLSX)

npm install xlsx

import * as XLSX from 'xlsx'

function exportToExcel(hot: Handsontable) {
  const data = hot.getData()
  const headers = hot.getColHeader() as string[]

  const ws = XLSX.utils.aoa_to_sheet([headers, ...data])

  // Column widths
  ws['!cols'] = headers.map(() => ({ wch: 20 }))

  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, 'Data')

  XLSX.writeFile(wb, `export-${new Date().toISOString().slice(0,10)}.xlsx`)
}

What We Do

Understand requirements: do you need formulas, what data types, are there license restrictions (Handsontable paid for commerce). Pick library, configure columns and validation, connect import/export XLSX, integrate with API for data saving.

Timeframe: basic editable table without formulas — 2–3 days. Full spreadsheet with formulas and XLSX — 5–7 days.