---
title: "Table"
description: "This article explains what the table field is and how to configure it."
category: "fields"
audience: developers
lastUpdated: "2026-01-06T08:09:00.000Z"
---

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](https://prismic.io/docs/nextjs.md), [Nuxt](https://prismic.io/docs/nuxt.md), and [SvelteKit](https://prismic.io/docs/sveltekit.md) to display tables.

**Next.js example:**

```tsx
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>,
  }}
/>;
```

**Nuxt example:**

```vue-html
<PrismicTable
  :field="slice.primary.my_table_field"
  :components="{
    table: Table,
    tbody: TBody,
  }"
/>
```

**SvelteKit example:**

```svelte
<script lang="ts">
  import { PrismicTable } from "@prismicio/svelte";
  import { Table } from "$lib/components/Table";
  import { TBody } from "$lib/components/TBody";
</script>

<PrismicTable
  field={slice.primary.my_table_field}
  components={{
    table: Table,
    tbody: TBody,
  }}
/>
```

> This field is not supported in the GraphQL API or Content API v1. Both APIs will return `null`.

# Add a table field to a content model

1. **Open Slice Machine**

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

   ```sh
   npx start-slicemachine --open
   ```

2. **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 Content API. Use a short, snake-cased name.

# Display tables

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

**Next.js example:**

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

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

See the [`<PrismicTable>` documentation](https://prismic.io/docs/technical-reference/prismicio-react/v3.md#prismictable) to learn more.

**Nuxt example:**

```vue-html
<PrismicTable :field="slice.primary.my_table_field" />
```

See the [`<PrismicTable>` documentation](https://prismic.io/docs/technical-reference/prismicio-vue/v6.md#prismictable) to learn more.

**SvelteKit example:**

```svelte
<script lang="ts">
  import { PrismicTable } from "@prismicio/svelte";
</script>

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

See the [`<PrismicTable>` documentation](https://prismic.io/docs/technical-reference/prismicio-svelte/v2.md#prismictable) to learn more.

# Style tables

Tables can be styled using CSS and a wrapper element.

* **Markup:**

  **Next.js example:**

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

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

  **Nuxt example:**

  ```vue-html
  <div class="prismic-table">
    <PrismicTable :field="slice.primary.my_table_field" />
  </div>
  ```

  **SvelteKit example:**

  ```svelte
  <script lang="ts">
    import { PrismicTable } from "@prismicio/svelte";
  </script>

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

* **CSS:**

  ```css
  .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;
  }
  ```

> Tables can also be styled using custom components. [See below](#use-custom-ui-components).

# Use custom UI components

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.

**Next.js example:**

```tsx {6-9}
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>,
  }}
/>;
```

[Learn more about the components prop](https://prismic.io/docs/technical-reference/prismicio-react/v3.md#prismictable)

**Nuxt example:**

```vue {8-13}
<script setup lang="ts">
import Table from "~/components/Table.vue";
</script>

<template>
  <PrismicTable
    :field="slice.primary.my_table_field"
    :components="{
      // Full component
      table: Table,
      // Shorthand
      thead: { class: 'bg-black text-white' },
    }"
  />
</template>
```

```vue filename=components/Table.vue
<script setup lang="ts">
defineProps(getTableComponentProps.table());
</script>

<template>
  <table class="my-table">
    <slot />
  </table>
</template>
```

[Learn more about the components prop](https://prismic.io/docs/technical-reference/prismicio-vue/v6.md#prismictable)

**SvelteKit example:**

```svelte {8-13}
<script lang="ts">
  import { PrismicTable } from "@prismicio/svelte";
  import { Table } from "$lib/components/Table";
</script>

<PrismicTable
  field={slice.primary.my_table_field}
  components={{
    // Full component
    table: Table,
    // Shorthand
    thead: { class: "bg-black text-white" },
  }}
/>
```

```svelte filename=src/lib/components/Table.svelte
<script lang="ts">
  import type { Snippet } from "svelte";

  type Props = { children: Snippet };

  let { children }: Props = $props();
</script>

<table class="my-table">
  {@render children()}
</table>
```

[Learn more about the components prop](https://prismic.io/docs/technical-reference/prismicio-svelte/v2.md#prismictable)

## Use custom UI components globally

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>`.

**Next.js example:**

```tsx filename=src/components/PrismicTable.tsx collapsed
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}
    />
  );
}
```

**Nuxt example:**

```vue filename=components/MyPrismicTable.vue collapsed
<script setup lang="ts">
import type { PrismicTableProps } from "@prismicio/vue";
import Table from "~/components/Table.vue";

const props = defineProps<PrismicTableProps>();

const defaultComponents: PrismicTableProps["components"] = {
  table: Table,
};

const mergedComponents = {
  ...defaultComponents,
  ...props.components,
};
</script>

<template>
  <PrismicTable :field="field" :components="mergedComponents" />
</template>
```

**SvelteKit example:**

```svelte filename=src/lib/components/PrismicTable.svelte collapsed
<script lang="ts">
  import {
    PrismicTable as BasePrismicTable,
    type RichTextComponents,
    type TableComponents,
  } from "@prismicio/svelte";
  import type { TableField } from "@prismicio/client";
  import { Table } from "$lib/components/Table";

  type Props = {
    field: TableField;
    components?: TableComponents & RichTextComponents;
  };

  let { field, components }: Props = $props();

  const defaultComponents: TableComponents & RichTextComponents = {
    table: Table,
  };

  const mergedComponents = {
    ...defaultComponents,
    ...components,
  };
</script>

<BasePrismicTable {field} components={mergedComponents} />
```

# Check if a table field has a value

Use `isFilled.table()` from [`@prismicio/client`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md) to check if a table field has a value.

```ts
import { isFilled } from "@prismicio/client";

if (isFilled.table(slice.primary.my_table_field)) {
  // Do something if `my_table_field` has a value.
}
```

[Learn more about `isFilled`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#isfilled)

# API response

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

```json
{
  "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](#display-tables) is the best way to display the JSON content.