STable <s-table>

구조화된 데이터를 위한 테이블로, 페이지네이션, 로딩 상태, 작은 화면용 목록 레이아웃을 선택적으로 지원합니다. STable은(는) Shopify Polaris <s-table> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.

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

모범 사례

• 판매자가 비교하는 데이터에 표를 사용하세요. 표는 같은 속성을 공유하고 나란히 훑어봐야 하는 많은 레코드에 적합합니다. 비교할 것이 없는 단순한 목록이라면 더 단순한 컴포넌트를 고릅니다.
• 모바일 목록 레이아웃을 고려하세요. 모바일에서는 표가 목록으로 바뀌므로, 헤더와 값이 그리드가 아니라 레이블과 값이 쌓인 형태로도 잘 읽히는지 확인합니다.
• 열 개수를 적게 유지하세요. 열이 많으면 표를 훑어보기 어렵고 가로 스크롤이 생깁니다. 판매자의 작업에 필요한 열만 보여 주고, 나머지는 필요할 때 표시하는 방식을 고려합니다.
• 명확한 열 헤더를 작성하세요. 각 STableHeader를 짧고 설명적으로 유지해 판매자가 그 열에 어떤 데이터가 있는지 정확히 알 수 있게 합니다.
• 대규모 데이터에 대비하세요. 큰 표는 성능과 사용성을 떨어뜨립니다. 행이 대략 50~100개를 넘으면 paginate를 켜거나, 판매자가 원하는 레코드에 더 빨리 도달하도록 필터나 검색을 추가하는 것을 고려합니다.

<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 모범 사례(영어)를 참고하세요.

예시

OrderCustomerTotalStatus#1001Alex Morgan$120.00Fulfilled#1002Sam Rivera$45.50Pending#1003Jamie Lee$310.25Cancelled

<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 형식의 리스너로 이 events를 수신하세요.

Slots

Slot	설명
default	테이블 컴포넌트 안에 표시되는 테이블 구조로, 데이터를 그리드 형식으로 구성하는 테이블 헤더, 행, 셀을 포함합니다.
filters	테이블에 표시할 추가 필터로, 사용자가 표시되는 데이터를 좁힐 수 있게 하는 검색 필드나 기타 입력 컴포넌트 등입니다.