Vue Renderer

The Vue renderer brings STL support to the Vue 3 ecosystem. It is built using the Composition API and provides a set of highly performant components for rendering complex tables.

Installation

Use the stl-cli to add the Vue components to your project.

bash
npx stl-cli add vue

Basic Usage

Import the STLTable component and pass the parsed STL data as a prop.

vue
<script setup>
import { STLTable } from './components/vue'
import { STL } from 'structured-table'

// Example STL data
const stlString = '#table\ncols: 2\n[body]\nHello | World\n#endtable'
const tableData = STL.parse(stlString)
</script>

<template>
  <div class="custom-container">
    <STLTable :data="tableData" class="simple" />
  </div>
</template>

Reactivity

The Vue renderer is fully reactive. If the data prop changes, the table will re-render efficiently to reflect the new structure.

Customization

Components are added directly to your project in the ./components/vue directory. You can customize the templates, styling, and logic to fit your specific needs.

Vue 2 Support

Currently, we only officially support Vue 3. If you require Vue 2 support, please open a discussion on our GitHub repository.