04/25/2023

Running Spreadsheets in the Browser

Spreadsheets are used everywhere in business and just about everyone knows how to use them at least at the surface level. If you want to build functionality into your website or blog post without building out a complete system you could opt to embed a spreadsheet instead.

For the spreadsheet parser we will be building, we will use a table tag with a spreadsheet attribute and a data attribute that will contain the CSV data in the form of a two dimensional array. The size of the spreadsheet will be determined by a set of rows and cells attributes and the complete tag will look like this:

html
<table
    spreadsheet
    cells="100"
    rows="20"
    data='[["Item","Cost"], ["Rent","1500"], ["Utilities","200"],["Groceries","360"], ["Transportation","450"], ["Entertainment","1203"], ["Total","=SUM(B2:B6)"]]'
></table>

This will be parsed into a HTML table that looks like this:

{ kit.start(app, __sveltekit_188rdso.element, { node_ids: [0, 3], data, form: null, error: null }); }); }