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);
      }
    );
  }
}

[sanchit3008]

@Kreijstal did the method using esm.sh cdn work for you eventually in non react apps? if yes, we can include that in the readme and close this issue.

[Kreijstal]

@Kreijstal did the method using esm.sh cdn work for you eventually in non react apps? if yes, we can include that in the readme and close this issue.

Almost!
It turns out there is a bug on lodash js where when importing it in browser it simply installs itself on window and returns an empty object
esm-dev/esm.sh#937

[Kreijstal]

lodash/lodash#5107
The solution would be to use either lodash-es or lodash-unified or lodash.<method> explicitly, I know very annoying

This bug is already reported in lodash problem is that lodash is not maintained anymore