Table

The table field allows content writers to create and manage tabular data. Content can be organized in rows and columns, ideal for specification sheets and documentation.

Add a table field to a content model

• Open Slice Machine

  In your Prismic project, start Slice Machine to begin editing content models:

  npx start-slicemachine --open

• Add a table field

  In Slice Machine, navigate to the slice, page type, or custom type you want to modify. Add a table field.

  The label determines the label shown to content writers in the Page Builder. Use an easily understandable name.

  The API ID determines the property name in the Document API. Use a short, snake-cased name.

Display tables

Prismic provides table components for Next.js, Nuxt, and SvelteKit.

<PrismicTable field={slice.primary.my_table_field} />

Tips

• Style tables

  Tables can be styled using CSS and a wrapper element.

  MarkupCSS

  Next.jsNuxtSvelteKit

  <div className="prismic-table">
    <PrismicTable field={slice.primary.my_table_field} />
  </div>

• Use custom UI components

  Prismic’s table components can render custom components for each block type.

  Next.jsNuxtSvelteKit

  import { Table } from "@/components/Table";
  
  <PrismicTable
    field={slice.primary.my_table_field}
    components={{
      // Use a component from another file.
      table: ({ children }) => <Table>{children}</Table>,
      // Use an HTML element with class names.
      tbody: ({ children }) => <tbody className="my-tbody">{children}</tbody>,
    }}
  />;

• Use isFilled.table() to check if a table field has a value

  import { isFilled } from "@prismicio/client";
  
  if (isFilled.table(slice.primary.my_table_field)) {
    // Do something if `my_table_field` has a value.
  }

API response

Here is what a table field looks like from the Document API:

{
  "example_table": {
    "head": [
      {
        "cells": [
          {
            "type": "header",
            "content": [{ "type": "paragraph", "text": "GET", "spans": [] }]
          },
          {
            "type": "header",
            "content": [{ "type": "paragraph", "text": "DELETE", "spans": [] }]
          }
        ]
      }
    ]
    "body": [
      {
        "cells": [
          {
            "type": "data",
            "content": [
              {
                "type": "paragraph",
                "text": "For basic retrieval of information...",
                "spans": []
              }
            ]
          },
          {
            "type": "data",
            "content": [
              {
                "type": "paragraph",
                "text": "To destroy a resource and remove...",
                "spans": []
              }
            ]
          }
        ]
      }
    ]
  }
}

Prismic returns a JSON representation of the field’s formatted content. Prismic’s table component is the best way to display the JSON content.