minimalist.js

const { xml, Component, whenReady } = owl; // see https://github.com/odoo/owl/blob/master/README.md

const {
  Spreadsheet, // this is the OWL component that renders the spreadsheet
  Model, // this is the javascript model that manages the spreadsheet data
} = o_spreadsheet; // they are exposed on the global o_spreadsheet object on window (in the browser)

/**
 * In OWL, you need a component to put anything on the screen, see https://odoo.github.io/owl/playground/
 * We will call it Demo
 */
class Demo extends Component {
  setup() {
    // setup is the equivalent of the constructor in OWL
    this.createModel(); // we want to create a spreadsheet model with a little data in it
  }

  createModel() {
    //const emptySpreadsheet = {}; // this is an empty spreadsheet, you can use it to create a new spreadsheet from scratch
    const startingSpreadsheet = {
      // this is a spreadsheet with some data in it. The complete format is not documented,
      // but you can see it in the console when you use window.o_spreadsheet.__DEBUG__.model.exportData()
      sheets: [
        {
          colNumber: 26,
          rowNumber: 2000,
          cells: {
            A1: "hello 👋",
            A2: "I am a cell",
            A3: "I behave like in other spreadsheet applications",
            A4: "I can contain formulas like =SUM(D1:D3) ------->",
            D4: "=SUM(D1:D3)",
            D1: "1",
            D2: "2",
            D3: "3",
          },
        },
        // ...
        // there are a lot more features in spreadsheets, like charts, conditional formatting, pivot tables, etc.
        // try them, then export the data to see how they are represented in the model
      ],
    };

    this.model = new Model(startingSpreadsheet, {
      mode: "normal", // in normal mode the spreadsheet is editable, alternatives are "readonly" and "dashboard"
      // in readonly mode, the spreadsheet can be viewed but not edited
      // in dashboard mode, the spreadsheet can be viewed at a specific width, only the first page is shown
    });
    o_spreadsheet.__DEBUG__ = o_spreadsheet.__DEBUG__ || {}; // for debugging purposes
    o_spreadsheet.__DEBUG__.model = this.model; // use window.o_spreadsheet.__DEBUG__.model to access the model in the console
    // use window.o_spreadsheet.__DEBUG__.model.exportData() to obtain the data in the console
  }
}

// We continue with the OWL components stuff... see https://odoo.github.io/owl/playground/
Demo.template = xml/* xml */ `
<div class="vw-100 vh-100">
  <Spreadsheet model="model"/>
</div>
`;
Demo.components = { Spreadsheet };
Demo.props = {};

// Setup code
async function setup() {
  // Ok, this is specific... we need to load the templates for the spreadsheet component
  // The templates are in the o_spreadsheet.xml file, which is generated by the build process
  const templates = await (await fetch("../build/o_spreadsheet.xml")).text();

  const rootApp = new owl.App(Demo, { dev: true, warnIfNoStaticProps: true });
  rootApp.addTemplates(templates);
  rootApp.mount(document.body);
}

// whenReady is a utility function that waits for the page and all the resources to be loaded
// It is used to make sure that the app is mounted only when the page is ready
whenReady(setup);