React Renderer

Our React renderer provides a set of modern, accessible components built with CSS. It supports all STL features including complex cell spanning, custom actions, and interactive elements.

Installation

Use the stl-cli to add the React components to your project. This command will create a local folder with the component source code.

bash
npx stl-cli add react

Basic Usage

Once the components are added, you can import them and pass the parsed STL data.

tsx
import * as STLReact from './components/react'
import { STL } from 'structured-table'

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

export default function MyTable() {
  return (
    <div className="p-4">
      <STLReact.Table data={tableData} className="simple" />
    </div>
  )
}

Props Reference

The Table component accepts the following props:

data: The parsed STLTable object from the STL parser.
className: A theme name (e.g., 'simple', 'border', 'shadcn') or custom class names.

Theming

The React renderer is highly customizable. Since the source code is in your project, you can modify the CSS or Tailwind classes directly. We recommend using the provided CSS variables for easy branding.

Next.js Integration

If you are using this React renderer inside a **Next.js** project and want to use the <Link> component for optimized navigation instead of a standard HTML <a> tag, you can modify the implementation in your local component folder.

Open .../cell/LinkCell.tsx and update it like this:

tsx
import Link from 'next/link'
// ... other imports

const LinkCell = React.memo(({ data }: { data: LinkCellProps }) => {
    return (
        <Link href={data.href} target={data.newTab ? '_blank' : '_self'}>
            {data.text}
        </Link>
    )
})

Component Location

By default, components are added to ./components/ or ./src/components/. You can move them anywhere in your project as long as you update the imports.