How to use tabulator with ember?

Question

I want to use http://tabulator.info/ with ember. I don't understand the documentation nor can I find any guides on configuration for ember. How can I start by creating a simple table?

Answer 1

Looking at the examples on the site, http://tabulator.info/ , it seems that tabulator only needs an element to work (and some config).

So, our end goal is going to be to use a modifier with the ability to pass the tabulator config to it.

So, this is what we'll end up with:

<div {{tabulator someConfig}}></div>

Now, unfortunately, it looks like tabulator only accepts an id in its constructor. so we'll need to dynamically add that in to appears tabulator.

First thing you'll want to do is install https://github.com/ember-modifier/ember-modifier (be sure to read the docs as this is fun stuff)

Then, create a file in your app, app/modifiers/tabulator.js

and use these contents:

import Modifier from 'ember-modifier';
import Tabulator from 'tabulator';
import { guidFor }  from '@ember/object/internals';

export default class TabulatorModifier extends Modifier {
  id = guidFor(this);

  get config() {
    return this.args.positional[0];
  }

  didInstall() {
    this.element.id = this.id;
    let config = th

    this.tabulator = new Tabulator(`#${this.id}`, this.config);
  }

  
}

And then maybe in a component or controller or something, you'd have something like:

export default class MyComponent extends Component {
  get myConfig() {
    return { ... };
  }
}

<div {{tabulator this.myConfig}}></div>

and that should be it. You'll want to import the CSS in your app.css