Rendering Contentful rich text tables with the React renderer with Gatsby

gatsby-config.js

module.exports = {
  // ... all your other configs
  plugins: [
    // ... all your other plugins
    {
      resolve: `gatsby-source-contentful`,
      options: {
        spaceId: process.env.CONTENTFUL_SPACE_ID,
        accessToken: process.env.CONTENTFUL_API_KEY,
        environment: process.env.CONTENTFUL_SPACE_ENVIRONMENT,
      },
    },
  ],
}

src-pages-index.jsx

import * as React from "react"
import { graphql } from "gatsby"
import { BLOCKS } from "@contentful/rich-text-types"
import { documentToReactComponents } from "@contentful/rich-text-react-renderer"

import Layout from "../components/layout"

const options = {
  renderNode: {
    [BLOCKS.TABLE]: (node, children) => (
      <table>
        <tbody>{children}</tbody>
      </table>
    ),
    [BLOCKS.TABLE_ROW]: (node, children) => <tr>{children}</tr>,
    [BLOCKS.TABLE_CELL]: (node, children) => <td>{children}</td>,
  },
}

const IndexPage = props => (
  <Layout>
    <h1>Articles</h1>

    <div>
      {props.data.articles.nodes.map((article, index) => (
        <div key={index}>
          <h1>
            {article.title}
          </h1>
          <div>
            {documentToReactComponents(JSON.parse(article.body.raw), options)}
          </div>
        </div>
      ))}
    </div>
  </Layout>
)

export default IndexPage

export const query = graphql`
  query MyQuery {
    articles: allContentfulArticle {
      nodes {
        title
        body {
          raw
        }
      }
    }
  }
`