Index table

An index table displays a collection of objects of the same type, like orders or products. The main job of an index table is to help merchants get an at-a-glance of the objects to perform actions or navigate to a full-page representation of it.

Used to	Examples
Display collections of similar objects	Products, orders, customers, discounts
Perform bulk actions	Delete products, pause/activate campaigns

Was this section helpful?

Index table

<s-section padding="none" accessibilityLabel="Puzzles table section">

<s-table>

<s-grid slot="filters" gap="small-200" gridTemplateColumns="1fr auto">

<s-text-field

icon="search"

placeholder="Searching all puzzles"

></s-text-field>

<s-button

icon="sort"

variant="secondary"

interestFor="sort-tooltip"

commandFor="sort-actions"

></s-button>

<s-tooltip id="sort-tooltip">

<s-text>Sort</s-text>

</s-tooltip>

<s-popover id="sort-actions">

<s-stack gap="none">

<s-box padding="small">

<s-choice-list label="Sort by" name="Sort by">

<s-choice value="puzzle-name" selected>Puzzle name</s-choice>

<s-choice value="pieces">Pieces</s-choice>

<s-choice value="created">Created</s-choice>

<s-choice value="status">Status</s-choice>

</s-choice-list>

</s-box>

<s-divider></s-divider>

<s-box padding="small">

<s-choice-list label="Order by" name="Order by">

<s-choice value="product-title" selected>A-Z</s-choice>

<s-choice value="created">Z-A</s-choice>

</s-choice-list>

</s-box>

</s-stack>

</s-popover>

</s-grid>

<s-table-header-row>

<s-table-header listSlot="primary">Puzzle</s-table-header>

<s-table-header format="numeric">Pieces</s-table-header>

<s-table-header>Created</s-table-header>

<s-table-header listSlot="secondary">Status</s-table-header>

</s-table-header-row>

<s-table-body>

<s-table-row clickDelegate="mountain-view-checkbox">

<s-table-cell>

<s-stack direction="inline" gap="small" alignItems="center">

<s-checkbox id="mountain-view-checkbox"></s-checkbox>

<s-clickable

href=""

accessibilityLabel="Mountain View puzzle thumbnail"

border="base"

borderRadius="base"

overflow="hidden"

inlineSize="40px"

blockSize="40px"

<s-image

objectFit="cover"

src="https://picsum.photos/id/29/80/80"

></s-image>

</s-clickable>

<s-link href="">Mountain View</s-link>

</s-stack>

</s-table-cell>

<s-table-cell>16</s-table-cell>

<s-table-cell>Today</s-table-cell>

<s-table-cell>

<s-badge color="base" tone="success">Active</s-badge>

</s-table-cell>

</s-table-row>

<s-table-row clickDelegate="ocean-sunset-checkbox">

<s-table-cell>

<s-stack direction="inline" gap="small" alignItems="center">

<s-checkbox id="ocean-sunset-checkbox"></s-checkbox>

<s-clickable

href=""

accessibilityLabel="Ocean Sunset puzzle thumbnail"

border="base"

borderRadius="base"

overflow="hidden"

inlineSize="40px"

blockSize="40px"

<s-image

objectFit="cover"

src="https://picsum.photos/id/12/80/80"

></s-image>

</s-clickable>

<s-link href="">Ocean Sunset</s-link>

</s-stack>

</s-table-cell>

<s-table-cell>9</s-table-cell>

<s-table-cell>Yesterday</s-table-cell>

<s-table-cell>

<s-badge color="base" tone="success">Active</s-badge>

</s-table-cell>

</s-table-row>

<s-table-row clickDelegate="forest-animals-checkbox">

<s-table-cell>

<s-stack direction="inline" gap="small" alignItems="center">

<s-checkbox id="forest-animals-checkbox"></s-checkbox>

<s-clickable

href=""

accessibilityLabel="Forest Animals puzzle thumbnail"

border="base"

borderRadius="base"

overflow="hidden"

inlineSize="40px"

blockSize="40px"

<s-image

objectFit="cover"

src="https://picsum.photos/id/324/80/80"

></s-image>

</s-clickable>

<s-link href="">Forest Animals</s-link>

</s-stack>

</s-table-cell>

<s-table-cell>25</s-table-cell>

<s-table-cell>Last week</s-table-cell>

<s-table-cell>

<s-badge color="base" tone="neutral">Draft</s-badge>

</s-table-cell>

</s-table-row>

</s-table-body>

</s-table>

</s-section>

Examples

Index table

Default

<s-section padding="none" accessibilityLabel="Puzzles table section">
  <s-table>
    <s-grid slot="filters" gap="small-200" gridTemplateColumns="1fr auto">
      <s-text-field
        icon="search"
        placeholder="Searching all puzzles"
      ></s-text-field>
      <s-button
        icon="sort"
        variant="secondary"
        interestFor="sort-tooltip"
        commandFor="sort-actions"
      ></s-button>
      <s-tooltip id="sort-tooltip">
        <s-text>Sort</s-text>
      </s-tooltip>
      <s-popover id="sort-actions">
        <s-stack gap="none">
          <s-box padding="small">
            <s-choice-list label="Sort by" name="Sort by">
              <s-choice value="puzzle-name" selected>Puzzle name</s-choice>
              <s-choice value="pieces">Pieces</s-choice>
              <s-choice value="created">Created</s-choice>
              <s-choice value="status">Status</s-choice>
            </s-choice-list>
          </s-box>
          <s-divider></s-divider>
          <s-box padding="small">
            <s-choice-list label="Order by" name="Order by">
              <s-choice value="product-title" selected>A-Z</s-choice>
              <s-choice value="created">Z-A</s-choice>
            </s-choice-list>
          </s-box>
        </s-stack>
      </s-popover>
    </s-grid>
    <s-table-header-row>
      <s-table-header listSlot="primary">Puzzle</s-table-header>
      <s-table-header format="numeric">Pieces</s-table-header>
      <s-table-header>Created</s-table-header>
      <s-table-header listSlot="secondary">Status</s-table-header>
    </s-table-header-row>
    <s-table-body>
      <s-table-row clickDelegate="mountain-view-checkbox">
        <s-table-cell>
          <s-stack direction="inline" gap="small" alignItems="center">
            <s-checkbox id="mountain-view-checkbox"></s-checkbox>
            <s-clickable
              href=""
              accessibilityLabel="Mountain View puzzle thumbnail"
              border="base"
              borderRadius="base"
              overflow="hidden"
              inlineSize="40px"
              blockSize="40px"
            >
              <s-image
                objectFit="cover"
                src="https://picsum.photos/id/29/80/80"
              ></s-image>
            </s-clickable>
            <s-link href="">Mountain View</s-link>
          </s-stack>
        </s-table-cell>
        <s-table-cell>16</s-table-cell>
        <s-table-cell>Today</s-table-cell>
        <s-table-cell>
          <s-badge color="base" tone="success">Active</s-badge>
        </s-table-cell>
      </s-table-row>
      <s-table-row clickDelegate="ocean-sunset-checkbox">
        <s-table-cell>
          <s-stack direction="inline" gap="small" alignItems="center">
            <s-checkbox id="ocean-sunset-checkbox"></s-checkbox>
            <s-clickable
              href=""
              accessibilityLabel="Ocean Sunset puzzle thumbnail"
              border="base"
              borderRadius="base"
              overflow="hidden"
              inlineSize="40px"
              blockSize="40px"
            >
              <s-image
                objectFit="cover"
                src="https://picsum.photos/id/12/80/80"
              ></s-image>
            </s-clickable>
            <s-link href="">Ocean Sunset</s-link>
          </s-stack>
        </s-table-cell>
        <s-table-cell>9</s-table-cell>
        <s-table-cell>Yesterday</s-table-cell>
        <s-table-cell>
          <s-badge color="base" tone="success">Active</s-badge>
        </s-table-cell>
      </s-table-row>
      <s-table-row clickDelegate="forest-animals-checkbox">
        <s-table-cell>
          <s-stack direction="inline" gap="small" alignItems="center">
            <s-checkbox id="forest-animals-checkbox"></s-checkbox>
            <s-clickable
              href=""
              accessibilityLabel="Forest Animals puzzle thumbnail"
              border="base"
              borderRadius="base"
              overflow="hidden"
              inlineSize="40px"
              blockSize="40px"
            >
              <s-image
                objectFit="cover"
                src="https://picsum.photos/id/324/80/80"
              ></s-image>
            </s-clickable>
            <s-link href="">Forest Animals</s-link>
          </s-stack>
        </s-table-cell>
        <s-table-cell>25</s-table-cell>
        <s-table-cell>Last week</s-table-cell>
        <s-table-cell>
          <s-badge color="base" tone="neutral">Draft</s-badge>
        </s-table-cell>
      </s-table-row>
    </s-table-body>
  </s-table>
</s-section>

Preview

Anchor to relatedRelated

RequirementsBuilt for Shopify