How to create a Table

There are many ways to create tables in Prismic. We will run through three of them.

  1. Slice with repeating fields
  2. Use a third-party service and embed the table in a field
  3. Custom HTML field

1. Slice with repeating fields

Add the table to your Custom Type

Create the content modeling of a table using Slices. You can use the repeating fields to represent the rows, with the number of text fields to represent the total number of columns of the table

Add a Title to the Non-repeatable zone, then add a Rich Text field to the repeatable zone for each column you wish the table to have. Here's the example JSON of this Slice. You can copy and paste this in the JSON editor tab in the Custom Type builder:

{
  "Main":{
    "body":{
      "type":"Slices",
      "fieldset":"Slice zone",
      "config":{
        "choices":{
          "table":{
            "type":"Slice",
            "fieldset":"Table (2 col)",
            "description":"Rows of repeatable data",
            "icon":"grid_on",
            "display":"list",
            "non-repeat":{
              "table_title":{
                "type":"StructuredText",
                "config":{
                  "single":"heading1, heading2, heading3, heading4, heading5, heading6",
                  "label":"Title",
                  "placeholder":"Table Title"
                }
              }
            },
            "repeat":{
              "col1":{
                "type":"StructuredText",
                "config":{
                  "multi":"paragraph, strong, em",
                  "label":"col1",
                  "placeholder":"Column 1 content..."
                }
              },
              "col2":{
                "type":"StructuredText",
                "config":{
                  "multi":"paragraph",
                  "label":"col2",
                  "placeholder":"Column 2 content..."
                }
              }
            }
          }
        }
      }
    }
  }
}

Modify this to Slice better suit your needs.

Fill in the table in your document

When adding your table content to your documents, add a new element in the repeatable zone for each row in the table.

Integrate the new Table slice into your website application

Once the document with the table is published, template your Slice to render the table in your application. Read the documentation for your chosen language to see how to template the content.

2. Use a third-party service and embed the table in a field

Another option is to use a third-party service, such as Airtable to create a more complex html table design a table that can then be included by using a Prismic Embed field. First, modify your Custom Type to add a new Embed field.

Create a table in Airtable

Now, design a table. Sign-up for Airtable and follow their instructions to create a new base. You can now share a view link which can be integrated. Make sure it's a link rather than embed code. It will look like a simple link rather than an iframe element.

Go ahead and paste this link in the embed field you've created in your content. It will confirm it's working by showing you the title of the table view you're trying to embed.

Integrate the embed field in your website

You should be ready to integrate this link so it's embedded in your site. Now, you or your development can add the necessary code to process this new field. It works just like any other Embed field.

3. Custom HTML field

If you wish to have more control over the table you've created or wish to use the embed code generated by services like Google Sheets. You have the option to embed Custom HTML which will allow you to include raw HTML, including an embed code generated by a third-party service or even HTML code for a table that you've created yourself.