STable `<s-table>`

構造化されたデータ用のテーブル。ページネーション、ローディング状態、小さな画面でのリストレイアウトに対応します。 STable は、Shopify Polaris の <s-table> web component 向けの型付き Vue 3 wrapper です。

import { STable } from 'polaris-vue-elements'

ベストプラクティス

マーチャントが比較するデータにテーブルを使う。 テーブルは、同じ属性を持ち、横に並べて見比べる必要がある多数のレコードに適しています。比較するもののない単純なリストには、よりシンプルなコンポーネントを選びます。
モバイルのリストレイアウトを考慮する。 モバイルではテーブルがリストに変わるため、ヘッダーと値がグリッドではなく、縦に積まれたラベルと値のペアとしても読みやすいかを確認します。
列の数を少なく保つ。 列が多いとテーブルは見渡しにくくなり、横スクロールが必要になります。マーチャントのタスクに必要な列だけを表示し、残りは必要に応じて表示することを検討します。
わかりやすい列ヘッダーを書く。 各 STableHeader は短くわかりやすくし、その列にどんなデータが入っているかをマーチャントが正確に把握できるようにします。
大規模なデータセットに備える。 大きなテーブルはパフォーマンスと使いやすさを損ないます。行数がおおよそ 50〜100 を超えたら paginate を有効にするか、マーチャントが目的のレコードにすばやくたどり着けるよう、フィルターや検索の追加を検討します。

vue

<STable paginate hasNextPage>
  <STableHeaderRow>
    <STableHeader>Product</STableHeader>
    <STableHeader format="numeric">Inventory</STableHeader>
  </STableHeaderRow>
  <STableBody>
    <STableRow>
      <STableCell>Snowboard</STableCell>
      <STableCell>24</STableCell>
    </STableRow>
  </STableBody>
</STable>

詳しいガイダンスについては、<s-table> に関する Shopify のベストプラクティス（英語）を参照してください。

例

Order

Customer

Total

Status

#1001

Alex Morgan

$120.00

Fulfilled

#1002

Sam Rivera

$45.50

Pending

#1003

Jamie Lee

$310.25

Cancelled

vue

<script setup>
import {
  STable,
  STableHeaderRow,
  STableHeader,
  STableBody,
  STableRow,
  STableCell,
  SBadge,
} from 'polaris-vue-elements'
</script>

<template>
  <!-- STable is the root: it lays out the header row + body and can switch to a
       "list" layout on narrow devices when variant="auto". -->
  <STable variant="auto">
    <STableHeaderRow>
      <STableHeader listSlot="primary">Order</STableHeader>
      <STableHeader listSlot="secondary">Customer</STableHeader>
      <STableHeader format="currency">Total</STableHeader>
      <STableHeader>Status</STableHeader>
    </STableHeaderRow>
    <STableBody>
      <STableRow>
        <STableCell>#1001</STableCell>
        <STableCell>Alex Morgan</STableCell>
        <STableCell>$120.00</STableCell>
        <STableCell><SBadge tone="success">Fulfilled</SBadge></STableCell>
      </STableRow>
      <STableRow>
        <STableCell>#1002</STableCell>
        <STableCell>Sam Rivera</STableCell>
        <STableCell>$45.50</STableCell>
        <STableCell><SBadge tone="warning">Pending</SBadge></STableCell>
      </STableRow>
      <STableRow>
        <STableCell>#1003</STableCell>
        <STableCell>Jamie Lee</STableCell>
        <STableCell>$310.25</STableCell>
        <STableCell><SBadge tone="critical">Cancelled</SBadge></STableCell>
      </STableRow>
    </STableBody>
  </STable>
</template>

Props

Prop	型	説明
`hasNextPage`	`boolean`	追加のページのデータがあるかどうか。
`hasPreviousPage`	`boolean`	前のページのデータがあるかどうか。
`loading`	`boolean`	テーブルがローディング状態かどうか（ページの初回読み込みや、ページネーション付きテーブルで次のページを読み込むときなど）。true の場合、テーブルは inert 状態になり、ユーザーによる操作が防がれることがあります。
`paginate`	`boolean`	ページネーションコントロールを使用するかどうか。
`variant`	`"auto" \| "list"`	テーブルコンポーネントのレイアウトバリアントです。 - `list`: 常にリストレイアウトで表示します。 - `auto`: 広い画面ではテーブル、狭い画面ではリストとして自動的に表示します。

Events

Event	型
`nextpage`	`Event`
`previouspage`	`Event`

これらのイベントは <STable> 上で @nextpage 形式のリスナーで受け取れます。

Slots

Slot	説明
`default`	テーブルコンポーネント内に表示されるテーブル構造です。データをグリッド形式で整理するテーブルヘッダー、行、セルを含みます。
`filters`	テーブルに表示する追加のフィルターです。検索フィールドなど、ユーザーが表示データを絞り込めるようにする入力コンポーネントを配置します。

STable <s-table> ​

ベストプラクティス ​

例 ​

Props ​

Events ​

Slots ​

STable `<s-table>`

ベストプラクティス

例

Props

Events

Slots