How to create a table in a Rich text field

I need to create a table in rich text field. is it possible ?
I render all the html from the rich text field directly to my page, is there way to create a table in rich text field. ( note: I do not want to create a separate field for table)

something like this:
image (4)

1 Like

Is this only one column? Because you can do it with key text and a group field:

{
  "Main": {
    "table_title": {
      "type": "Text",
      "config": {
        "label": "Table title",
        "placeholder": "Enter title"
      }
    },
    "table_rows": {
      "type": "Group",
      "config": {
        "fields": {
          "table_row": {
            "type": "Text",
            "config": {
              "label": "Table row",
              "placeholder": "Enter row value"
            }
          }
        },
        "label": "Table rows"
      }
    }
  }
}

There’s also a help guide here:

Hi Ujjwal,

Thanks for posting!

Prismic does not provide a method for rendering a table in a rich text field. So, to display a table you would need to create another field. There are lots of methods for doing so, like how @marcellothearcane suggests.

We have a guide for creating a table using a group:

Let me know if that works for you, and if you have any other questions.

Sam

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.

Hello,

Thank you for this explanation.
What would be the best option to create a header for a multiple columns Table? In this case I imagine that each Row would be in the Repeatable zone but the header item shouldn't be.

My use case is to create a Table slice to be used in different contexts, so the Header for each table must be available for change from Prismic.

My current solution would be to create a boolean value, like 1stRowIsHeader where the 1st row set on the Repeatable Zone will be rendered as the Table Header, and this way the content editor will be able to define if that table as an header or not, and correctly set its values if it does.

Is there a better solution for my problem?

Thank you. :slight_smile:

Hey @joel, I believe your approach is the best one. Because the repeatable zone of a Slice allows you to add as many rows as you need, then, each Slice works as a column.

Hello @Pau. Thank you for your message.

Still, while implementing I've found out that is not a good approach, because the Header row must all be text types while the body rows must be of types that are better applied to your use-case, might it be links, text, numbers, etc.

I've ended on having text fields for all the header and a group of items for the rows.

What do you mean with "each Slice works as a column" ? Can you give me an example?

By that, I meant that the JSON of each Slice can be treated as a column within a multi-level menu. Here's an example of how a megamenu can work, for example, each section represents a Slice: Getting Started, Pro Features, etc...