---
title: Table
description: >-
  Display data clearly in rows and columns, helping users view, analyze, and
  compare information. Automatically renders as a list on small screens and a
  table on large ones.
api_version: 2025-10
api_name: admin_extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/admin-extensions/2025-10-rc/polaris-web-components/structure/table
  md: >-
    https://shopify.dev/docs/api/admin-extensions/2025-10-rc/polaris-web-components/structure/table.txt
---

# Table

Display data clearly in rows and columns, helping users view, analyze, and compare information. Automatically renders as a list on small screens and a table on large ones.

## Properties

* hasNextPage

  boolean

  Whether there's an additional page of data.

* hasPreviousPage

  boolean

  Whether there's a previous page of data.

* loading

  boolean

  Whether the table is in a loading state, such as initial page load or loading the next page in a paginated table. When true, the table could be in an inert state, which prevents user interaction.

* paginate

  boolean

  Whether to use pagination controls.

* variant

  "auto" | "list"

  Sets the layout of the Table.

  * `list`: The Table is always displayed as a list.
  * `table`: The Table is always displayed as a table.
  * `auto`: The Table is displayed as a table on wide devices and as a list on narrow devices.

## Slots

* filters

  HTMLElement

  Additional filters to display in the table. For example, the `s-search-field` component can be used to filter the table data.

## Events

Learn more about [registering events](https://shopify.dev/docs/api/app-home/using-polaris-components#event-handling).

* nextpage

  CallbackEventListener\<typeof tagName> | null

* previouspage

  CallbackEventListener\<typeof tagName> | null

### CallbackEventListener

```ts
(EventListener & {
      (event: CallbackEvent<T>): void;
    }) | null
```

### CallbackEvent

```ts
Event & {
  currentTarget: HTMLElementTagNameMap[T];
}
```

## TableBody

Define the main content area of a table, containing rows and cells that display data.

## TableCell

Display data within a cell in a table row.

## TableHeader

Display column names at the top of a table.

* format

  HeaderFormat

  The format of the column. Will automatically apply styling and alignment to cell content based on the value.

  * `base`: The base format for columns.
  * `currency`: Formats the column as currency.
  * `numeric`: Formats the column as a number.

* listSlot

  ListSlotType

  Content designation for the table's `list` variant.

  * `primary`: The most important content. Only one column can have this designation.
  * `secondary`: The secondary content. Only one column can have this designation.
  * `kicker`: Content that is displayed before primary and secondary content, but with less visual prominence. Only one column can have this designation.
  * `inline`: Content that is displayed inline.
  * `labeled`: Each column with this designation displays as a heading-content pair.

### HeaderFormat

```ts
'base' | 'numeric' | 'currency'
```

### ListSlotType

```ts
'primary' | 'secondary' | 'kicker' | 'inline' | 'labeled'
```

## TableHeaderRow

Define a header row in a table, displaying column names and enabling sorting.

## TableRow

Display a row of data within the body of a table.

* clickDelegate

  string

  The ID of an interactive element (e.g. `s-link`) in the row that will be the target of the click when the row is clicked. This is the primary action for the row; it should not be used for secondary actions.

  This is a click-only affordance, and does not introduce any keyboard or screen reader affordances. Which is why the target element must be in the table; so that keyboard and screen reader users can interact with it normally.

### Examples

* #### Code

  ##### Default

  ```html
  <s-table>
    <s-table-header-row>
      <s-table-header>Name</s-table-header>
      <s-table-header>Email</s-table-header>
      <s-table-header>Phone</s-table-header>
    </s-table-header-row>
    <s-table-body>
      <s-table-row>
        <s-table-cell>John Doe</s-table-cell>
        <s-table-cell>john.doe@example.com</s-table-cell>
        <s-table-cell>123-456-7890</s-table-cell>
      </s-table-row>
      <s-table-row>
        <s-table-cell>Jane Doe</s-table-cell>
        <s-table-cell>jane.doe@example.com</s-table-cell>
        <s-table-cell>123-456-7890</s-table-cell>
      </s-table-row>
      <s-table-row>
        <s-table-cell>Brandon Doe</s-table-cell>
        <s-table-cell>brandon.doe@example.com</s-table-cell>
        <s-table-cell>123-456-7890</s-table-cell>
      </s-table-row>
    </s-table-body>
  </s-table>
  ```