Handontable not working with ember

Tags: #<Tag:0x00007efc603e7228>
#1

import Ember from ‘ember’;
import Handsontable from “handsontable”;
import ‘handsontable/dist/handsontable.full.css’;
export default Ember.Component.extend({
didInsertElement(){
const data = [
[’’, ‘Tesla’, ‘Volvo’, ‘Toyota’, ‘Ford’],
[‘2019’, 10, 11, 12, 13],
[‘2020’, 20, 11, 14, 13],
[‘2021’, 30, 15, 12, 13]
];
const container = document.getElementById(‘example’);
const hot = new Handsontable(container, {
data: data,
rowHeaders: true,
colHeaders: true
});
}
});

#2

I’m not working with Ember but using their quickstart and loading table there in the app folder works just fine.

In the link I’m sending the project https://we.tl/t-Lrsgq9uEeU

#3

can you please brief on quickstart and loading table?

The source link is not opening for me

#4

Here https://wetransfer.com/downloads/5076f749b75afe51b8c95dc742f1add220190528100510/c89907 is the project (full). When it comes to building the project I:

  1. Went to https://emberjs.com/

  2. Executed npm install -g ember-cli

  3. Run ember new ember-quickstart

  4. Added the following resources

    https://cdn.jsdelivr.net/npm/handsontable@7.0.3/dist/handsontable.full.min.css
    https://cdn.jsdelivr.net/npm/handsontable@7.0.3/dist/handsontable.full.min.js

    in the {{content-for "head"}} of app/index.html file

  5. Added the DIV element in the same file <div class="box"></div>

  6. Added the logic on creating the table

  <script type="text/javascript">
    var example = document.querySelector('.box');
    var hot = new Handsontable(example, {
    data: Handsontable.helper.createSpreadsheetData(1000, 1000),
    colWidths: 100,
    width: '100%',
    height: 320,
    rowHeights: 23,
    rowHeaders: true,
    colHeaders: true
    });
    </script>
  1. Run the ember serve
Error accessing CellMeta for Header: Expecting an unsigned number
#5

Thanks much for your reply…can u pls attach the index.html alone here?

#6 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>EmberQuickstart</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@7.0.3/dist/handsontable.full.min.css">
    <script src="https://cdn.jsdelivr.net/npm/handsontable@7.0.3/dist/handsontable.full.min.js" charset="utf-8"></script>

    {{content-for "head"}}

    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/ember-quickstart.css">

    {{content-for "head-footer"}}
  </head>
  <body>
    <h1>Hi Handsontable</h1>
    <div class="box"></div>
    {{content-for "body"}}

    <script type="text/javascript">
    var example = document.querySelector('.box');
    var hot = new Handsontable(example, {
    data: Handsontable.helper.createSpreadsheetData(1000, 1000),
    colWidths: 100,
    width: '100%',
    height: 320,
    rowHeights: 23,
    rowHeaders: true,
    colHeaders: true
    });
    </script>
    {{content-for "body-footer"}}
  </body>
</html>
#7