Skip to content
TREB Docs

Astro

You can of course use React or Svelte components with Astro, but here’s how we built a native Astro component for this site (slightly simplified):

Add the library using npm/yarn/pnpm

npm add -D @trebco/treb

npm add -D @trebco/treb

Then the Astro component:

---



// type for props

import type { EmbeddedSpreadsheetOptions } from '@trebco/treb';



// define props

export interface Props {

  options?: EmbeddedSpreadsheetOptions;

}



---



<script>



import { type EmbeddedSpreadsheet, TREB } from '@trebco/treb';



document.addEventListener('DOMContentLoaded', () => {



  const elements = Array.from(

    document.querySelectorAll('.embedded-spreadsheet'));



  for (const element of elements) {

    const props = JSON.parse((element as HTMLElement).dataset.props || '{}');

    const options = { ...(props.options || {}) };

    const sheet = TREB.CreateSpreadsheet({

      ...options,

      container: element as HTMLElement,

    });

    if (props.doc) {

      sheet.LoadNetworkDocument(props.doc);

    }

  }



});



</script>



<div class='embedded-spreadsheet' data-props={JSON.stringify(Astro.props)}/>

---



// type for props

import type { EmbeddedSpreadsheetOptions } from '@trebco/treb';



// define props

export interface Props {

  options?: EmbeddedSpreadsheetOptions;

}



---



<script>



import { type EmbeddedSpreadsheet, TREB } from '@trebco/treb';



document.addEventListener('DOMContentLoaded', () => {



  const elements = Array.from(

    document.querySelectorAll('.embedded-spreadsheet'));



  for (const element of elements) {

    const props = JSON.parse((element as HTMLElement).dataset.props || '{}');

    const options = { ...(props.options || {}) };

    const sheet = TREB.CreateSpreadsheet({

      ...options,

      container: element as HTMLElement,

    });

    if (props.doc) {

      sheet.LoadNetworkDocument(props.doc);

    }

  }



});



</script>



<div class='embedded-spreadsheet' data-props={JSON.stringify(Astro.props)}/>

Probably not optimal, and could use some work. Nevertheless, we use this in MDX pages like this:

---

title: ...frontmatter...

---



import Spreadsheet from '/path/to/spreadsheet.astro';



<Spreadsheet options={{toolbar: true}}/>



---

title: ...frontmatter...

---



import Spreadsheet from '/path/to/spreadsheet.astro';



<Spreadsheet options={{toolbar: true}}/>