Frontend Integration

Once you have data in Sanity (or any other source) in the STL format, you need to render it.

1. Install Dependencies

Install the core package and the CLI, then generate the React components.

first command
npm install structured-table structured-table-cli

second command
npx stl-cli add react

2. Include CSS

Import the base styles in your layout.tsx or _app.tsx or global.css.

You can copy the CSS code from our Themes in CSS page. And either create new CSS file or add it to your global.css or any existing CSS file.

You can change the className based on your theme or custom CSS code. Read more about this here.


// Render the table
return <STLReact.Table data={parsedSTL} className='border' />

3. Usage in Portable Text

Use the generated components within your Portable Text configuration. Here is an example of how to implement the stlTableBlock.

typescript
import * as STLReact from './components/react' // Path to your generated components
import { STL } from 'structured-table'

const myPortableTextComponents = {
  types: {
    stlTableBlock: ({ value }: {
      value: {
        _key: string;
        _type: string;
        stlString: string;
      }
    }) => {
      // Parse the STL string
      const parsedSTL = STL.parse(value.stlString);
      
      // Render the table
      return <STLReact.Table data={parsedSTL} className='border' />
    }
  }
}

// Usage in your PortableText component
// <PortableText value={data.body} components={myPortableTextComponents} />

4. Create Table in STL Language

You can use our interactive live table editor at /playground where you can create your entire table and then export that in the STL format.

5. Theming

The className prop allows you to switch between bundled themes. But before using the following theme, you need to download or copy the CSS code for specific theme from our Themes in CSS page.

basic (default)
simple
border
stripe
shadcn

You can also pass your own custom class name and override CSS variables to create a unique look.