There are several ways to create tables that can be used for content creation. We will run through three of them.

1. Slice with repeating fields

Add the table to your Custom Type

If you need a table, we will begin by creating a custom slice for it. You can use the repeating fields to represent the rows, with the number of text fields to represent the total number of columns your table will have. 

Begin by creating a new slice in a custom type. You can add a Title to the Non-repeatable zone. Then add a Key Text field or a Rich Text field to the repeatable zone for each column you wish the table to have.

Check our guide on Slices if you're unsure of how to create a new custom slice.
Here's the JSON code for a 2-column table, perfect for a product specification or description:

{
  "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..."
                }
              }
            }
          }
        }
      }
    }
  }
}

Of course, you can modify this to better suit your needs. Now, save your custom type.

Fill in the table in your document

When adding your table content to your documents, just add a new element in group for each row that you wish in your table.

Integrate the new Table slice into your website application

You have finished creating the structure you need for a table. You or your development team will now need to work on the code necessary to build the table in your web application. You can check the information on Templating Slices for your chosen language to see how to parse each of the slice's items as a table row.

 

2. Using a third-party service and embedding the table

Another option is to use a third-party service, such as Airtable to create more complex html tables that can be embedded as part of your document. By signing-up with their service, you can 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. Try to choose a descriptive API field name.

Create a table in Airtable

Now you'll be designing and creating 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 its embedded in your site. You (or your development team) will have to add the necessary code to process this new field. It works just like any other embed field, and you can consult our documentation to Template an Embed Field using your language of choice.
 

3. Custom HTML field

Perhaps you wish to have more control on the table you've created, or wish to used 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 any embed code generated by a third-party service or even HTML code for a table that you've created yourself. Remember that this can be a risky option since allowing ANY code to be integrated directly can be trouble, so it's a good idea to sanitize and process the code you add. Consult your development team or our support team if you have any questions.

Hope this has helped you in the process of creating and integrating tables into your website application. And as always, remember that our chat support will be happy to help you out if you have any questions at all.

Did this answer your question?