Best way to add spreadsheet functionality

Hey folks! I'm working on an inventory management application for a client and I just got going with jumpstart.

The application will have an overview over my client's articles and I'd like it to have simple spreadsheet-like features like in-place (bulk) editing. By spreadsheet features I mainly mean spreadsheet-like navigation, editing and usage, not the complex/formula stuff.

I'm looking at https://editor.datatables.net/ and since they have some kind of bulk editing too. Or the pricier variant which resembles a spreasheet even more https://handsontable.com/examples?manual-resize&manual-move&conditional-formatting&context-menu&filters&dropdown-menu&headers

I previously also used the open-source http://tabulator.info/ but I'm not sure if there's a more rails/jumpstart way to do that instead of binding in fat JS libraries and relying on third-parties?

Hey Richard!

In Rails apps that use Turbolinks, the easiest way to add Javascript libraries is to create a Stimulus.js wrapper around them.

# app/javascripts/controllers/tabulator.js
import { Controller } from "stimulus"

export default class extends Controller {
  connect() {
    this.table = new Tabulator(this.element, {});
  }

  disconnect() {
    this.table.destroy()
  }
}

And then your HTML would just define the Stimulus controller and any data attributes to load data in.

<div data-controller="tabulator" data-tabulator-columns=""></div>

There's a lot more to it than that, but this is what we do for Stripe payments and other things to make them compatible with Turbolinks and it's pretty easy.

You'll want to spend some time thoroughly reading through https://stimulusjs.org/ to see how to access the data attributes and things to pass in to the new Tabulator instance, but it's pretty straight forward once you get the hang of it.

Same thing would apply to any Javascript library like Datatables. Main thing is just to create the instance in the connect() and destroy it on disconnect(). 👍

Thanks a lot for all the info, this will definitely get me going!