STableRow <s-table-row>

Một hàng dữ liệu trong bảng. STableRow là Vue 3 wrapper có type cho web component <s-table-row> của Shopify Polaris.

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

Ví dụ

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	Kiểu	Mô tả
children	any	Các ô dữ liệu được hiển thị trong hàng bảng này, mỗi ô chứa nội dung cho cột tương ứng. Chỉ chấp nhận các component table cell làm phần tử con.
clickDelegate	string | undefined	ID của một phần tử tương tác, chẳng hạn s-link, trong hàng, sẽ là mục tiêu của lượt nhấp khi hàng được nhấp. Đây là hành động chính của hàng; không nên dùng cho các hành động phụ. Đây là affordance chỉ dành cho nhấp chuột và không thêm affordance nào cho bàn phím hay trình đọc màn hình. Đó là lý do phần tử mục tiêu phải nằm trong bảng; để người dùng bàn phím và trình đọc màn hình có thể tương tác với nó như bình thường.

Slots

Slot	Mô tả
default	Các ô dữ liệu được hiển thị trong hàng bảng này, mỗi ô chứa nội dung cho cột tương ứng. Chỉ chấp nhận các component table cell làm phần tử con.