How to create a Table

[Pau]

There are two ways to a table in Prismic:
A. Slice with repeating fields
B. Use a third-party service and embed the table in a field

A. Slice with repeating fields

1. Create the Table Slice

Create a Slice. You'll use the repeatable zone to represent the rows of a table. The number of text fields will represent the total number of columns in 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; modify it better suit your needs:

Slice Machine Slice JSON example

{
  "id": "table_slice",
  "type": "SharedSlice",
  "name": "TableSlice",
  "description": "TableSlice",
  "variations": [
    {
      "id": "default",
      "name": "Default",
      "docURL": "...",
      "version": "sktwi1xtmkfgx8626",
      "description": "TableSlice",
      "primary": {
        "table_title": {
          "type": "StructuredText",
          "config": {
            "label": "Title",
            "placeholder": "Table Title",
            "allowTargetBlank": true,
            "single": "heading2"
          }
        }
      },
      "items": {
        "col1": {
          "type": "StructuredText",
          "config": {
            "label": "Column 1",
            "placeholder": "Column 1 content...",
            "allowTargetBlank": true,
            "single": "paragraph"
          }
        },
        "col2": {
          "type": "StructuredText",
          "config": {
            "label": "Column 2",
            "placeholder": "Column 2 content...",
            "allowTargetBlank": true,
            "single": "paragraph"
          }
        }
      },
      "imageUrl": "https://images.prismic.io/slice-machine/621ad5ec4-0387-4bc5-9860-2dd46cbc07cd_default_ss.png?auto=compress,format"
    }
  ]
}

Legacy Builder Slice JSON example

{
  "table": {
    "type": "Slice",
    "fieldset": "Table (2 columns)",
    "description": "Rows of repeatable data",
    "icon": "grid_on",
    "display": "list",
    "non-repeat": {
      "table_title": {
        "type": "StructuredText",
        "config": {
          "single": "heading2",
          "label": "Title",
          "placeholder": "Table Title"
        }
      }
    },
    "repeat": {
      "col1": {
        "type": "StructuredText",
        "config": {
          "multi": "paragraph",
          "label": "Column 1",
          "placeholder": "Column 1 content..."
        }
      },
      "col2": {
        "type": "StructuredText",
        "config": {
          "multi": "paragraph",
          "label": "Column 2",
          "placeholder": "Column 2 content..."
        }
      }
    }
  }
}

You can also create variations of the same table when using Slice Machine:

2. Template the Slice

Render the Slice in your project code

Example code of a React Slice template

import React from 'react'
import { PrismicRichText } from '@prismicio/react'

/**
 * @typedef {import("@prismicio/client").Content.TableSlice} TableSlice
 * @typedef {import("@prismicio/react").SliceComponentProps<TableSlice>} TableProps
 * @param { TableProps }
 */
const Table = ({ slice }) => (
  <section>
    <span className="title">
      {
        slice.primary.title ?
        <PrismicRichText field={slice.primary.title}/>
        : <h2>Template slice, update me!</h2>
      }
    </span>
    {
      slice?.items?.map((item, i) =>
      <table key={i}>
        <tr>
          <td>
            <PrismicRichText field={item.col1} />
          </td>
          <td>
            <PrismicRichText field={item.col2} />
          </td>
          {
            item.col3 ?
            <td>
              <PrismicRichText field={item.col3} />
            </td>
            : undefined
          }
          {
            item.col4 ?
            <td>
              <PrismicRichText field={item.col4} />
            </td>
            : undefined
          }
          {
            item.col5 ?
            <td>
              <PrismicRichText field={item.col5} />
            </td>
            : undefined
          }
        </tr>
      </table>
      )
    }
    <style jsx>{`
        section {
          max-width: 600px;
          margin: 4em auto;
          text-align: center;
        }
        .title {
          color: #8592e0;
        }
        table, th, td {
          border:1px solid black;
        }
    `}</style>
  </section>
)

export default Table

3. Fill in the table in your document

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

B. Use a third-party service and embed the table in a Custom HTML / Code field

Another option is to use a third-party service, such as Airtable to create a more complex html table design that can be included using a Prismic Rich Text field.

1. Create a custom code field

First, create a custom Embed, HTML or Code field. to paste an airtable later.

2. Create a table in Airtable

Sign-up for Airtable and follow their instructions to create a new database table. Then copy the link in: share a view link. Make sure it's a link URL rather than embed code.

3. Paste the table URL in your document

Paste this link into the Custom HTML field you've created in your documents.

4. Template the table iframe in a field

Finally, template the iframe in your code

Example code of a React Slice template

import React from 'react'
import { asText } from '@prismicio/helpers'

/**
 * @typedef {import("@prismicio/client").Content.CustomEmbedSlice} CustomEmbedSlice
 * @typedef {import("@prismicio/react").SliceComponentProps<CustomEmbedSlice>} CustomEmbedProps
 * @param { CustomEmbedProps }
 */
const CustomEmbed = ({ slice }) => (
  <section>
    <div
      dangerouslySetInnerHTML={{__html: asText(slice.primary.embed) }}
    />
  </section>
)

export default CustomEmbed