How to: embed a spreadsheet in a web page
To load the script file, add this tag to your document:
The main script file is about 160kB gzipped, and less than 120kB compressed with brotli. You can link to the script files on our site, or download the script files and host them on your own webserver.
The easiest way to add a spreadsheet is to just include a div tag with a
data-treb attribute pointing to the file:
If you add both of those to your web page, you should get this:
The script will set up everything. You can set some options when using the embed tag; see this page for details.
There is a default size for embedded spreadsheets, but if your containing element has a size (if you set it in your page style, for example), the spreadsheet will stay that size. Spreadsheets are resizable by default, but you can disable that.
Embedding Part 2 (Advanced)
Modern browsers (basically everything but IE11) can use ES6. Relative to the equivalent code in ES5, ES6 is generally smaller and faster to parse. You can optionally send ES6 code to browsers that can read it using the
module/nomodule attributes in script tags.
The way to optionally load code based on the browser version is to include two script tags. The first one points to the base (ES5) version, but it includes a
nomodule attribute. The
nomodule attribute tells browsers that understand modules to ignore it.
The second tag loads the ES6 script, but sets the
type attribute to
module. This doesn’t mean the code is a module, but only browsers that understand modules will load it.
Using this pair of script tags, older browsers will load the ES5 code and modern browsers will load the ES6 code.
If the loaded script needs to load any other files (for the formatting toolbar, import/export, et cetera) it will load the matching ES5/ES6 version.
Interacting with the Spreadsheet
For any spreadsheet instance loaded using the embed tag (above), we attach a reference to the spreadsheet object
_spreadsheet to the containing
div element. You can use that reference to interact with the object via the API.
There’s also an option to call a function when the object is created. This function will be called with the object instance and the containing node. See the options page.