ReoGrid ReoGrid Web

はじめに

ReoGrid Web は、React、Vue、および素の JavaScript 向けの Canvas ベースのスプレッドシートコンポーネントです。 セルスタイル、罫線、セル結合、xlsx インポートなど、Excel スタイルのグリッドを描画します。

インストール

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

Lite 版の制限: 最大 100 行 × 26 列、xlsx エクスポート不可。 フル機能は Pro 版 にアップグレードしてください。

React

1. コンポーネントの追加

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

Prop型説明
onReady(instance: ReogridInstance) => voidグリッドのマウント後に一度だけ呼ばれる
refReact.Ref<ReogridInstance>グリッドインスタンスへの命令的アクセス
styleReact.CSSPropertiesホスト <div> に適用するスタイル
classNamestringホスト <div> に適用する CSS クラス
optionsReogridOptionscreateReogrid() に渡す詳細オプション

Vue

1. コンポーネントの追加

<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

Prop型説明
@ready(instance: ReogridInstance) => voidグリッドのマウント後に一度だけ発火
styleStyleValueホスト <div> に適用するスタイル
classstringホスト <div> に適用する CSS クラス
optionsReogridOptionscreateReogrid() に渡す詳細オプション

Vanilla JS

1. コンテナの作成

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

2. グリッドの初期化

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

createReogrid() にはセレクタ文字列、HTMLElement、またはオプションオブジェクトを渡せます。

// セレクタ文字列
const grid = createReogrid('#grid')

// HTMLElement
const el = document.getElementById('grid')!
const grid = createReogrid(el)

// オプションオブジェクト
const grid = createReogrid({
  workspace: '#grid',
  undoCapacity: 50,
  animation: true,
})
Live Demo

xlsx ファイルの読み込み

既存の Excel ファイルをグリッドに直接読み込めます。

// URL から読み込み
await worksheet.loadFromUrl('/data/report.xlsx')

// ファイル入力から読み込み
const input = document.querySelector('input[type="file"]')
input.addEventListener('change', async (e) => {
  const file = e.target.files[0]
  await worksheet.loadFromFile(file)
})

セルの操作

値とスタイルの設定

// 直接代入
worksheet.cell('A1').value = 'Hello'
worksheet.cell('A1').style = { bold: true, color: '#1e3a5f' }

// チェーンメソッド
worksheet.cell('A1')
  .setValue('Title')
  .setStyle({ fontSize: 18, bold: true, backgroundColor: '#1e3a5f', color: '#ffffff' })

範囲操作

// セル結合
worksheet.range('A1:E1').merge()

// 範囲にスタイルを適用
worksheet.range('A1:E1').setStyle({ bold: true, backgroundColor: '#f1f5f9' })

// 罫線の設定
worksheet.range('A1:E10').border({ style: 'solid', color: '#cbd5e1' })
worksheet.range('A1:E1').border({ style: 'solid', color: '#475569', width: 2 }, ['bottom'])

列幅・行高の設定

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

グリッドラインの非表示

worksheet.showGridLines = false

次のステップ