ReoGrid ReoGrid Web

Getting Started

ReoGrid Web is a canvas-based spreadsheet component for React, Vue, and plain JavaScript. It renders Excel-style grids with cell styles, borders, merged cells, and xlsx import support.

Installation

npm install @reogrid/lite
# or
yarn add @reogrid/lite

Lite version limits: max 100 rows × 26 columns, no xlsx export. Upgrade to Pro for full features.

React

1. Add the component

import { Reogrid } from '@reogrid/lite/react'
import type { ReogridInstance } from '@reogrid/lite/react'

export default function App() {
  function onReady({ worksheet }: ReogridInstance) {
    worksheet.cell('A1').setValue('Product').setStyle({ bold: true, backgroundColor: '#dbeafe' })
    worksheet.cell('B1').setValue('Price').setStyle({ bold: true, backgroundColor: '#dbeafe' })
    worksheet.cell('A2').value = 'Widget'
    worksheet.cell('B2').value = '9.99'
    worksheet.column(0).width = 120
  }

  return (
    <Reogrid
      onReady={onReady}
      style={{ width: '100%', height: '400px' }}
    />
  )
}

Props

PropTypeDescription
onReady(instance: ReogridInstance) => voidCalled once after the grid is mounted
refReact.Ref<ReogridInstance>Access the grid instance imperatively
styleReact.CSSPropertiesStyles applied to the host <div>
classNamestringCSS class applied to the host <div>
optionsReogridOptionsAdvanced options passed to createReogrid()

Vue

1. Add the component

<script setup lang="ts">
import { Reogrid } from '@reogrid/lite/vue'
import type { ReogridInstance } from '@reogrid/lite/vue'

function onReady({ worksheet }: ReogridInstance) {
  worksheet.cell('A1').setValue('Product').setStyle({ bold: true, backgroundColor: '#dbeafe' })
  worksheet.cell('B1').setValue('Price').setStyle({ bold: true, backgroundColor: '#dbeafe' })
  worksheet.cell('A2').value = 'Widget'
  worksheet.cell('B2').value = '9.99'
  worksheet.column(0).width = 120
}
</script>

<template>
  <Reogrid @ready="onReady" style="width: 100%; height: 400px" />
</template>

Props

PropTypeDescription
@ready(instance: ReogridInstance) => voidEmitted once after the grid is mounted
styleStyleValueStyles applied to the host <div>
classstringCSS class applied to the host <div>
optionsReogridOptionsAdvanced options passed to createReogrid()

Vanilla JS

1. Create a container

<div id="my-grid" style="width: 100%; height: 400px;"></div>

2. Initialize the grid

import { createReogrid } from '@reogrid/lite'

const { worksheet } = createReogrid('#my-grid')

worksheet.cell('A1').setValue('Product').setStyle({ bold: true, backgroundColor: '#dbeafe' })
worksheet.cell('B1').setValue('Price').setStyle({ bold: true, backgroundColor: '#dbeafe' })
worksheet.cell('A2').value = 'Widget'
worksheet.cell('B2').value = '9.99'
worksheet.column(0).width = 120
Live Demo

Loading an xlsx File

You can load an existing Excel file directly into the grid.

// From a URL
await worksheet.loadFromUrl('/data/report.xlsx')

// From a file input
const input = document.querySelector('input[type="file"]')
input.addEventListener('change', async (e) => {
  const file = e.target.files[0]
  await worksheet.loadFromFile(file)
})

Working with Cells

Set values and styles

// Direct assignment
worksheet.cell('A1').value = 'Hello'
worksheet.cell('A1').style = { bold: true, color: '#1e3a5f' }

// Fluent chaining
worksheet.cell('A1')
  .setValue('Title')
  .setStyle({ fontSize: 18, bold: true, backgroundColor: '#1e3a5f', color: '#ffffff' })

Ranges

// Merge cells
worksheet.range('A1:E1').merge()

// Apply style to a range
worksheet.range('A1:E1').setStyle({ bold: true, backgroundColor: '#f1f5f9' })

// Set borders
worksheet.range('A1:E10').border({ style: 'solid', color: '#cbd5e1' })
worksheet.range('A1:E1').border({ style: 'solid', color: '#475569', width: 2 }, ['bottom'])

Column and row sizes

worksheet.column(0).width = 160   // column A
worksheet.column(1).width = 100   // column B
worksheet.row(0).height = 40      // row 1

Hide grid lines

worksheet.showGridLines = false

Next Steps