How to create table in Rich Text content

[max.petrivskyi (Maksym Petrivskyi)]

Hello, Prismic Support Team~

I would like to add the table to the Rich Text of Prismic.
Already I've read the previous topic related to this one, but I can't understand.

Could you explain this in more detail?

Thanks

[Pau]

Hello @max.petrivskyi, thanks for reaching out.

I imagine you're referring to this thread: How to create a Table .

In this publication, we propose three options to manage the tables within the documents.

The first one proposes modeling content in the Custom Types in a certain way so that the API response has an understandable structure for a table.

The second option suggests using an application or service external to Prismic to handle the table and then using an Embed link to connect it to your documents.

And the third option indicates that you can add the raw HTML code of a table directly into a field that accepts preformatted text. Which of these options would you like more information about?

[max.petrivskyi (Maksym Petrivskyi)]

Could explain third option more detail?
It would be fine, if you share the example.
Thanks

[Pau]

I'm using a table example from W3schools. You'll need to add a Rich text field that allows preformatted text. Then, once you have the HTML for the table you want to build, paste the code in the preformatted tex of the Rich text field.

In your document, it should look like this:

[max.petrivskyi (Maksym Petrivskyi)]

Hey, @Pau

Could you share the code of the preformatted 'htmlSerializer' for Table?

Thanks

[Pau]

@max.petrivskyi, In this case, an HTML Serializer isn't necessary. Since you need to build a Rich Text Field or a Slice with a Rich Text Field alone, solely dedicated to preformatted text, you'll only need to render it properly depending on the technology you're using.

For example, if you're using Next or any other React-based framework, this is how your component would look like. Let's say your Slice has a Rich Text field called table in the non-repeatable zone:

import * as React from 'react'
// the styling for the table component
// import './styles.css';

export const ImageCaption = ({ slice }) => (
  <div
    className="preformatted"
    dangerouslySetInnerHTML={slice.primary.preformatted}
  />
)

And here's an example in Vue

<template>
  <div class="preformatted">
    <div v-html="slice.primary.preformatted"></div>
  </div>
</template>

<script>
export default {
  props: ["slice"],
  name: "preformatted",
};
</script>

<style >
  //  the styling for the table component
</style>