No non-react examples

[Kreijstal]

Not everyone uses react, can you provide samples, a hello world if you will, of fortune sheet/core? using just vanilla js?

[tacman]

I'm also looking for a simple, pure javascript example, since I'm not yet ready to add react to my code.

Something as simple as possible -- load the library via require/import, then populate the sheets and cells by loading a JSON file.

I liked LuckySheet, but never could get it integrated with my project.

[nicoesiea]

On an angular project, you can easily load a react component ;) But it's true, is it possible to have a demo, or a quick sample, of how to do it?

import * as React from 'react';
import { FunctionComponent, useEffect, useRef, useState } from 'react';
import { Workbook } from '@fortune-sheet/react'

export const ExcelReactComponent: FunctionComponent<any> = (props: any) => {
  return (
    <Workbook
      data={props.data}
      lang={props.lang}
      allowEdit={props.allowEdit}
      showToolbar={props.showToolbar}
      showFormulaBar={props.showFormulaBar}
      showSheetTabs={props.showSheetTabs}
    />
  );
};

With a render parent component calling:

import {
  Component,
  ElementRef,
  Input,
  OnChanges,
  OnInit,
  SimpleChanges,
  ViewChild,
  ViewEncapsulation
} from '@angular/core';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {ExcelReactComponent} from "./excel-react.component";
import {SafeResourceUrl} from "@angular/platform-browser";
import {Document} from "../../repository/document/document.model";
import * as LuckyExcel from 'luckyexcel/dist/luckyexcel.umd.js'
import {NotificationLevel, NotificationsService} from "/notifications";
import {TranslateService} from "@ngx-translate/core";
import {AbstractViewer} from "../viewer.component";

@Component({
  selector: 'excel-viewer-react-container',
  template: ``,
  encapsulation: ViewEncapsulation.None,
})
export class ExcelViewerWrapperComponent implements OnChanges, OnInit {

  @Input() set document(document: Document) {
    this._document = document;
    this.downloadUrl = `URL_TO_DOWNLOAD_THE_EXCEL_FILE`;
  }

  get document(): Document {
    return this._document;
  }

  public downloadUrl: SafeResourceUrl;
  private _document: Document;

  constructor(private notificationsService :NotificationsService,
              private translateService: TranslateService,
              private elementRef: ElementRef) {}

  private hasViewLoaded = false;

  ngOnChanges(changes: SimpleChanges): void {
    this.render();
  }

  ngOnInit () {
    this.render();
  }

  private render() {
    if (this.hasViewLoaded) {
      return;
    }
    this.hasViewLoaded = true;

    LuckyExcel.transformExcelToLuckyByUrl(
      this.downloadUrl,
      this._document.name + this._document.extension,
      (exportJson) => {
        if (exportJson.sheets == null || exportJson.sheets.length == 0) {
          this.notificationsService.notify(NotificationLevel.ERROR, this.translateService.instant('DocumentExcelNotXLSX') )
          return;
        }
        const options = {
          showFormulaBar: true,
          showToolbar: false,
          showSheetTabs: true,
          data: exportJson.sheets,
          allowEdit:false,
          lang: this.translateService.getDefaultLang()
        };
        ReactDOM.render(
          React.createElement(ExcelReactComponent, options),
          this.elementRef.nativeElement
        );
      },
      (err) => {
        console.error("Import failed. Is the file a valid xlsx?", err);
      }
    );
  }
}