STableRow <s-table-row>

테이블의 데이터 행 하나입니다. STableRow은(는) Shopify Polaris <s-table-row> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.

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

예시

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 variant="auto">
    <STableHeaderRow>
      <STableHeader listSlot="primary">Order</STableHeader>
      <STableHeader listSlot="secondary">Customer</STableHeader>
      <STableHeader format="currency">Total</STableHeader>
      <STableHeader>Status</STableHeader>
    </STableHeaderRow>
    <STableBody>
      <!-- Each STableRow is one record; its children should be STableCell. -->
      <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	타입	설명
children	any	이 테이블 행 안에 표시되는 데이터 셀로, 각 셀은 해당 열의 콘텐츠를 담습니다. 자식으로 테이블 셀 컴포넌트만 허용합니다.
clickDelegate	string | undefined	행을 클릭했을 때 클릭 대상이 될, 행 안의 인터랙티브 요소(예: s-link)의 ID입니다. 행의 기본 액션이며 보조 액션에는 사용하지 않아야 합니다. 클릭 전용 기능으로, 키보드나 스크린 리더용 기능은 추가하지 않습니다. 그렇기 때문에 대상 요소는 키보드 및 스크린 리더 사용자가 정상적으로 상호작용할 수 있도록 테이블 안에 있어야 합니다.

Slots

Slot	설명
default	이 테이블 행 안에 표시되는 데이터 셀로, 각 셀은 해당 열의 콘텐츠를 담습니다. 자식으로 테이블 셀 컴포넌트만 허용합니다.