Using BlocksRenderer from @strapi/blocks-react-renderer

import React from ‘react’
import Image from “next/image”;
import { getStrapiMedia } from ‘…/_utils/getImage’;
import { BlocksRenderer, BlocksContent } from ‘@strapi/blocks-react-renderer’;

function ProductItem({product}) {
const content = [
children: [{
type: ‘paragraph’, children: [{
type: ‘paragraph’, children: { text: product.attributes.description }

return (



export default ProductItem

Example object coming from Strapi: (Attached file)
How do I display the content as an actual table as shown instead of it displaying the entire code.

This topic has been created from a Discord post (1238384578578743317) to give it more visibility.
It will be on Read-Only mode here.
Join the conversation on Discord

You have either adding a parser for that content or dangerously render it.

As far as I understand, Slate has not table plugin.

<@211722558385553408> It seems there is possible to add tables to Slate: slate/site/examples/tables.tsx at main · ianstormtaylor/slate · GitHub

It would be nice to add it to the editor.

If you’re trying to make a table, you’re gonnna have to hard code it manually. It’s not that difficult though, honestly.

Just takes a little more work.

Hopefully Strapi v5 has a lot more to work with, because there’s several things missing in v4

for example?

Are you trying to make one?