---
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_name: app-home
source_url:
  html: https://shopify.dev/docs/api/app-home/polaris-web-components/structure/table
  md: https://shopify.dev/docs/api/app-home/polaris-web-components/structure/table.md
---

# 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

  Default: false

  Whether there's an additional page of data.

* hasPreviousPage

  boolean

  Default: false

  Whether there's a previous page of data.

* loading

  boolean

  Default: false

  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

  Default: false

  Whether to use pagination controls.

* variant

  "auto" | "list"

  Default: 'auto'

  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

* children

  HTMLElement

  The content of the Table.

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

## Slots

* children

  HTMLElement

  The body of the table. May not have any semantic meaning in the Table's `list` variant.

## TableCell

Display data within a cell in a table row.

## Slots

* children

  HTMLElement

  The content of the table cell.

## 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

  Default: 'labeled'

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

## Slots

* children

  HTMLElement

  The heading of the column in the `table` variant, and the label of its data in `list` variant.

## TableHeaderRow

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

## Slots

* children

  HTMLElement

  Contents of the table heading row; children should be `TableHeading` components.

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

## Slots

* children

  HTMLElement

  The content of a TableRow, which should be `TableCell` components.

### Examples

* #### Code

  ##### jsx

  ```jsx
  <s-section padding="none">
    <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>
  </s-section>
  ```

  ##### html

  ```html
  <s-section padding="none">
    <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>
  </s-section>
  ```

## Examples

Component examples

### Basic usage

Basic Usage

Tables are full-width by default to utilize all available space for displaying data.

With Pagination

Demonstrates a table with pagination controls, showing how to add previous and next page functionality to handle large datasets.

With Loading State

Showcases the table's loading state, which can be used to indicate that data is being fetched or processed.

Full-width table with multiple columns

A comprehensive example showing a full-width table with multiple columns. Tables automatically expand to fill their container width.

Advanced Table with All List Slot Types

A comprehensive example demonstrating different list slot types for various header and cell configurations, showing how to use kicker, primary, secondary, inline, and labeled slots.

### Examples

* #### Basic Usage

  ##### Description

  Tables are full-width by default to utilize all available space for displaying data.

  ##### jsx

  ```jsx
  <s-section padding="none">
    <s-table>
      <s-table-header-row>
        <s-table-header listSlot="primary">Product</s-table-header>
        <s-table-header listSlot="inline">Status</s-table-header>
        <s-table-header listSlot="labeled">Inventory</s-table-header>
        <s-table-header listSlot="labeled">Price</s-table-header>
      </s-table-header-row>

      <s-table-body>
        <s-table-row>
          <s-table-cell>Water bottle</s-table-cell>
          <s-table-cell>
            <s-badge tone="success">Active</s-badge>
          </s-table-cell>
          <s-table-cell>128</s-table-cell>
          <s-table-cell>$24.99</s-table-cell>
        </s-table-row>
        <s-table-row>
          <s-table-cell>T-shirt</s-table-cell>
          <s-table-cell>
            <s-badge tone="warning">Low stock</s-badge>
          </s-table-cell>
          <s-table-cell>15</s-table-cell>
          <s-table-cell>$19.99</s-table-cell>
        </s-table-row>
        <s-table-row>
          <s-table-cell>Cutting board</s-table-cell>
          <s-table-cell>
            <s-badge tone="critical">Out of stock</s-badge>
          </s-table-cell>
          <s-table-cell>0</s-table-cell>
          <s-table-cell>$34.99</s-table-cell>
        </s-table-row>
      </s-table-body>
    </s-table>
  </s-section>
  ```

  ##### html

  ```html
  <s-section padding="none">
    <s-table>
      <s-table-header-row>
        <s-table-header listSlot="primary">Product</s-table-header>
        <s-table-header listSlot="inline">Status</s-table-header>
        <s-table-header listSlot="labeled">Inventory</s-table-header>
        <s-table-header listSlot="labeled">Price</s-table-header>
      </s-table-header-row>

      <s-table-body>
        <s-table-row>
          <s-table-cell>Water bottle</s-table-cell>
          <s-table-cell>
            <s-badge tone="success">Active</s-badge>
          </s-table-cell>
          <s-table-cell>128</s-table-cell>
          <s-table-cell>$24.99</s-table-cell>
        </s-table-row>
        <s-table-row>
          <s-table-cell>T-shirt</s-table-cell>
          <s-table-cell>
            <s-badge tone="warning">Low stock</s-badge>
          </s-table-cell>
          <s-table-cell>15</s-table-cell>
          <s-table-cell>$19.99</s-table-cell>
        </s-table-row>
        <s-table-row>
          <s-table-cell>Cutting board</s-table-cell>
          <s-table-cell>
            <s-badge tone="critical">Out of stock</s-badge>
          </s-table-cell>
          <s-table-cell>0</s-table-cell>
          <s-table-cell>$34.99</s-table-cell>
        </s-table-row>
      </s-table-body>
    </s-table>
  </s-section>
  ```

* #### With Pagination

  ##### Description

  Demonstrates a table with pagination controls, showing how to add previous and next page functionality to handle large datasets.

  ##### jsx

  ```jsx
  <s-section padding="none">
    <s-table paginate hasPreviousPage hasNextPage>
      <s-table-header-row>
        <s-table-header listSlot="primary">Product</s-table-header>
        <s-table-header listSlot="inline">Status</s-table-header>
        <s-table-header listSlot="secondary">Sales</s-table-header>
      </s-table-header-row>

      <s-table-body>
        <s-table-row>
          <s-table-cell>Product 1</s-table-cell>
          <s-table-cell>Active</s-table-cell>
          <s-table-cell>250</s-table-cell>
        </s-table-row>
        <s-table-row>
          <s-table-cell>Product 2</s-table-cell>
          <s-table-cell>Active</s-table-cell>
          <s-table-cell>180</s-table-cell>
        </s-table-row>
        <s-table-row>
          <s-table-cell>Product 3</s-table-cell>
          <s-table-cell>Paused</s-table-cell>
          <s-table-cell>95</s-table-cell>
        </s-table-row>
      </s-table-body>
    </s-table>
  </s-section>
  ```

  ##### html

  ```html
  <s-section padding="none">
    <s-table paginate hasPreviousPage hasNextPage>
      <s-table-header-row>
        <s-table-header listSlot="primary">Product</s-table-header>
        <s-table-header listSlot="inline">Status</s-table-header>
        <s-table-header listSlot="secondary">Sales</s-table-header>
      </s-table-header-row>

      <s-table-body>
        <s-table-row>
          <s-table-cell>Product 1</s-table-cell>
          <s-table-cell>Active</s-table-cell>
          <s-table-cell>250</s-table-cell>
        </s-table-row>
        <s-table-row>
          <s-table-cell>Product 2</s-table-cell>
          <s-table-cell>Active</s-table-cell>
          <s-table-cell>180</s-table-cell>
        </s-table-row>
        <s-table-row>
          <s-table-cell>Product 3</s-table-cell>
          <s-table-cell>Paused</s-table-cell>
          <s-table-cell>95</s-table-cell>
        </s-table-row>
      </s-table-body>
    </s-table>
  </s-section>
  ```

* #### With Loading State

  ##### Description

  Showcases the table's loading state, which can be used to indicate that data is being fetched or processed.

  ##### jsx

  ```jsx
  <s-section padding="none">
    <s-table loading>
      <s-table-header-row>
        <s-table-header listSlot="primary">Product</s-table-header>
        <s-table-header listSlot="inline">Status</s-table-header>
        <s-table-header listSlot="labeled">Inventory</s-table-header>
      </s-table-header-row>

      <s-table-body>
        <s-table-row>
          <s-table-cell>Loading...</s-table-cell>
          <s-table-cell>Loading...</s-table-cell>
          <s-table-cell>Loading...</s-table-cell>
        </s-table-row>
      </s-table-body>
    </s-table>
  </s-section>
  ```

  ##### html

  ```html
  <s-section padding="none">
    <s-table loading>
      <s-table-header-row>
        <s-table-header listSlot="primary">Product</s-table-header>
        <s-table-header listSlot="inline">Status</s-table-header>
        <s-table-header listSlot="labeled">Inventory</s-table-header>
      </s-table-header-row>

      <s-table-body>
        <s-table-row>
          <s-table-cell>Loading...</s-table-cell>
          <s-table-cell>Loading...</s-table-cell>
          <s-table-cell>Loading...</s-table-cell>
        </s-table-row>
      </s-table-body>
    </s-table>
  </s-section>
  ```

* #### Full-width table with multiple columns

  ##### Description

  A comprehensive example showing a full-width table with multiple columns. Tables automatically expand to fill their container width.

  ##### jsx

  ```jsx
  <s-section padding="none">
    <s-table>
      <s-table-header-row>
        <s-table-header listSlot="primary">Product</s-table-header>
        <s-table-header listSlot="kicker">SKU</s-table-header>
        <s-table-header listSlot="inline">Status</s-table-header>
        <s-table-header listSlot="labeled">Inventory</s-table-header>
        <s-table-header listSlot="labeled">Price</s-table-header>
        <s-table-header listSlot="labeled">Last updated</s-table-header>
      </s-table-header-row>

      <s-table-body>
        <s-table-row>
          <s-table-cell>Water bottle</s-table-cell>
          <s-table-cell>WB-001</s-table-cell>
          <s-table-cell>
            <s-badge tone="success">Active</s-badge>
          </s-table-cell>
          <s-table-cell>128</s-table-cell>
          <s-table-cell>$24.99</s-table-cell>
          <s-table-cell>2 hours ago</s-table-cell>
        </s-table-row>
        <s-table-row>
          <s-table-cell>T-shirt</s-table-cell>
          <s-table-cell>TS-002</s-table-cell>
          <s-table-cell>
            <s-badge tone="warning">Low stock</s-badge>
          </s-table-cell>
          <s-table-cell>15</s-table-cell>
          <s-table-cell>$19.99</s-table-cell>
          <s-table-cell>1 day ago</s-table-cell>
        </s-table-row>
        <s-table-row>
          <s-table-cell>Cutting board</s-table-cell>
          <s-table-cell>CB-003</s-table-cell>
          <s-table-cell>
            <s-badge tone="critical">Out of stock</s-badge>
          </s-table-cell>
          <s-table-cell>0</s-table-cell>
          <s-table-cell>$34.99</s-table-cell>
          <s-table-cell>3 days ago</s-table-cell>
        </s-table-row>
        <s-table-row>
          <s-table-cell>Notebook set</s-table-cell>
          <s-table-cell>NB-004</s-table-cell>
          <s-table-cell>
            <s-badge tone="success">Active</s-badge>
          </s-table-cell>
          <s-table-cell>245</s-table-cell>
          <s-table-cell>$12.99</s-table-cell>
          <s-table-cell>5 hours ago</s-table-cell>
        </s-table-row>
        <s-table-row>
          <s-table-cell>Stainless steel straws</s-table-cell>
          <s-table-cell>SS-005</s-table-cell>
          <s-table-cell>
            <s-badge tone="success">Active</s-badge>
          </s-table-cell>
          <s-table-cell>89</s-table-cell>
          <s-table-cell>$9.99</s-table-cell>
          <s-table-cell>1 hour ago</s-table-cell>
        </s-table-row>
      </s-table-body>
    </s-table>
  </s-section>
  ```

  ##### html

  ```html
  <s-section padding="none">
    <s-table>
      <s-table-header-row>
        <s-table-header listSlot="primary">Product</s-table-header>
        <s-table-header listSlot="kicker">SKU</s-table-header>
        <s-table-header listSlot="inline">Status</s-table-header>
        <s-table-header listSlot="labeled">Inventory</s-table-header>
        <s-table-header listSlot="labeled">Price</s-table-header>
        <s-table-header listSlot="labeled">Last updated</s-table-header>
      </s-table-header-row>

      <s-table-body>
        <s-table-row>
          <s-table-cell>Water bottle</s-table-cell>
          <s-table-cell>WB-001</s-table-cell>
          <s-table-cell>
            <s-badge tone="success">Active</s-badge>
          </s-table-cell>
          <s-table-cell>128</s-table-cell>
          <s-table-cell>$24.99</s-table-cell>
          <s-table-cell>2 hours ago</s-table-cell>
        </s-table-row>
        <s-table-row>
          <s-table-cell>T-shirt</s-table-cell>
          <s-table-cell>TS-002</s-table-cell>
          <s-table-cell>
            <s-badge tone="warning">Low stock</s-badge>
          </s-table-cell>
          <s-table-cell>15</s-table-cell>
          <s-table-cell>$19.99</s-table-cell>
          <s-table-cell>1 day ago</s-table-cell>
        </s-table-row>
        <s-table-row>
          <s-table-cell>Cutting board</s-table-cell>
          <s-table-cell>CB-003</s-table-cell>
          <s-table-cell>
            <s-badge tone="critical">Out of stock</s-badge>
          </s-table-cell>
          <s-table-cell>0</s-table-cell>
          <s-table-cell>$34.99</s-table-cell>
          <s-table-cell>3 days ago</s-table-cell>
        </s-table-row>
        <s-table-row>
          <s-table-cell>Notebook set</s-table-cell>
          <s-table-cell>NB-004</s-table-cell>
          <s-table-cell>
            <s-badge tone="success">Active</s-badge>
          </s-table-cell>
          <s-table-cell>245</s-table-cell>
          <s-table-cell>$12.99</s-table-cell>
          <s-table-cell>5 hours ago</s-table-cell>
        </s-table-row>
        <s-table-row>
          <s-table-cell>Stainless steel straws</s-table-cell>
          <s-table-cell>SS-005</s-table-cell>
          <s-table-cell>
            <s-badge tone="success">Active</s-badge>
          </s-table-cell>
          <s-table-cell>89</s-table-cell>
          <s-table-cell>$9.99</s-table-cell>
          <s-table-cell>1 hour ago</s-table-cell>
        </s-table-row>
      </s-table-body>
    </s-table>
  </s-section>
  ```

* #### Advanced Table with All List Slot Types

  ##### Description

  A comprehensive example demonstrating different list slot types for various header and cell configurations, showing how to use kicker, primary, secondary, inline, and labeled slots.

  ##### jsx

  ```jsx
  <s-section padding="none">  
    <s-table>
      <s-table-header-row>
        <s-table-header listSlot="kicker">ID</s-table-header>
        <s-table-header listSlot="primary">Customer</s-table-header>
        <s-table-header listSlot="secondary">Email</s-table-header>
        <s-table-header listSlot="inline">Status</s-table-header>
        <s-table-header listSlot="labeled">Orders</s-table-header>
        <s-table-header listSlot="labeled">Total spent</s-table-header>
      </s-table-header-row>
      <s-table-body>
        <s-table-row>
          <s-table-cell>#1001</s-table-cell>
          <s-table-cell>Sarah Johnson</s-table-cell>
          <s-table-cell>sarah@example.com</s-table-cell>
          <s-table-cell>
            <s-badge tone="success">Active</s-badge>
          </s-table-cell>
          <s-table-cell>23</s-table-cell>
          <s-table-cell>$1,245.50</s-table-cell>
        </s-table-row>
        <s-table-row>
          <s-table-cell>#1002</s-table-cell>
          <s-table-cell>Mike Chen</s-table-cell>
          <s-table-cell>mike@example.com</s-table-cell>
          <s-table-cell>
            <s-badge tone="neutral">Inactive</s-badge>
          </s-table-cell>
          <s-table-cell>7</s-table-cell>
          <s-table-cell>$432.75</s-table-cell>
        </s-table-row>
        <s-table-row>
          <s-table-cell>#1003</s-table-cell>
          <s-table-cell>Emma Davis</s-table-cell>
          <s-table-cell>emma@example.com</s-table-cell>
          <s-table-cell>
            <s-badge tone="success">Active</s-badge>
          </s-table-cell>
          <s-table-cell>15</s-table-cell>
          <s-table-cell>$892.25</s-table-cell>
        </s-table-row>
      </s-table-body>
    </s-table>
  </s-section>
  ```

  ##### html

  ```html
  <s-section padding="none">
    <s-table>
      <s-table-header-row>
        <s-table-header listSlot="kicker">ID</s-table-header>
        <s-table-header listSlot="primary">Customer</s-table-header>
        <s-table-header listSlot="secondary">Email</s-table-header>
        <s-table-header listSlot="inline">Status</s-table-header>
        <s-table-header listSlot="labeled">Orders</s-table-header>
        <s-table-header listSlot="labeled">Total spent</s-table-header>
      </s-table-header-row>
      <s-table-body>
        <s-table-row>
          <s-table-cell>#1001</s-table-cell>
          <s-table-cell>Sarah Johnson</s-table-cell>
          <s-table-cell>sarah@example.com</s-table-cell>
          <s-table-cell><s-badge tone="success">Active</s-badge></s-table-cell>
          <s-table-cell>23</s-table-cell>
          <s-table-cell>$1,245.50</s-table-cell>
        </s-table-row>
        <s-table-row>
          <s-table-cell>#1002</s-table-cell>
          <s-table-cell>Mike Chen</s-table-cell>
          <s-table-cell>mike@example.com</s-table-cell>
          <s-table-cell><s-badge tone="neutral">Inactive</s-badge></s-table-cell>
          <s-table-cell>7</s-table-cell>
          <s-table-cell>$432.75</s-table-cell>
        </s-table-row>
        <s-table-row>
          <s-table-cell>#1003</s-table-cell>
          <s-table-cell>Emma Davis</s-table-cell>
          <s-table-cell>emma@example.com</s-table-cell>
          <s-table-cell><s-badge tone="success">Active</s-badge></s-table-cell>
          <s-table-cell>15</s-table-cell>
          <s-table-cell>$892.25</s-table-cell>
        </s-table-row>
      </s-table-body>
    </s-table>
  </s-section>
  ```

## Related

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/app-home/patterns/compositions/index-table)

[CompositionIndex table](https://shopify.dev/docs/api/app-home/patterns/compositions/index-table)