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.

Prismic provides components for Next.js, Nuxt, and SvelteKit to display tables.

import { PrismicTable } from "@prismicio/react";
import { Table } from "@/components/Table";

<PrismicTable
  field={slice.primary.my_table_field}
  components={{
    table: ({ children }) => <Table>{children}</Table>,
    tbody: ({ children }) => <tbody className="my-tbody">{children}</tbody>,
  }}
/>;

Add a table field to a content modelCopy link

Table fields are added using the Type Builder, a tool for building by hand, or the Prismic CLI, a tool for AI agents.

Display tablesCopy link

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

import { PrismicTable } from "@prismicio/react";

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

Style tablesCopy link

Tables can be styled using CSS and a wrapper element.

import { PrismicTable } from "@prismicio/react";

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

.prismic-table table {
  width: 100%;
  border-collapse: collapse;
}

.prismic-table th,
.prismic-table td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}

.prismic-table th {
  background-color: #f4f4f4;
  font-weight: bold;
}

Use custom UI componentsCopy link

Prismic’s table component can render custom components for each block type using the components prop. This prop allows you to use component libraries like Mantine, MUI, or your own.

import { PrismicTable } from "@prismicio/react";
import { Table } from "@/components/Table";

<PrismicTable
  field={slice.primary.my_table_field}
  components={{
    table: ({ children }) => <Table>{children}</Table>,
    tbody: ({ children }) => <tbody className="my-tbody">{children}</tbody>,
  }}
/>;

Use custom UI components globallyCopy link

To set custom components once and use globally, create your own wrapper component containing <PrismicTable> and your custom components. Use your component in place of @prismicio/react’s <PrismicTable>.

You can use the following example as a starting point — just customize your default components. It supports the same props as the base <PrismicTable>.

import {
  PrismicTable as BasePrismicTable,
  PrismicTableProps,
  JSXTableMapSerializer,
} from "@prismicio/react";

const defaultComponents: JSXTableMapSerializer = {
  table: ({ children }) => (
    <table className="w-full border-collapse">{children}</table>
  ),
};

export function PrismicTable({ components, ...props }: PrismicTableProps) {
  return (
    <BasePrismicTable
      components={{ ...defaultComponents, ...components }}
      {...props}
    />
  );
}

Check if a table field has a valueCopy link

Use isFilled.table() from @prismicio/client 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 responseCopy link

Here is what a table field looks like from the Content 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.