STable <s-table>

Một bảng cho dữ liệu có cấu trúc, có phân trang, trạng thái loading và bố cục dạng danh sách trên màn hình nhỏ. STable là Vue 3 wrapper có type cho web component <s-table> của Shopify Polaris.

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

Best practices

• Dùng bảng cho dữ liệu người bán cần so sánh. Bảng phù hợp với nhiều bản ghi có cùng thuộc tính và cần được đọc lướt cạnh nhau. Với một danh sách đơn giản không có gì để so sánh, hãy chọn một component đơn giản hơn.
• Tính đến bố cục danh sách trên mobile. Trên mobile, bảng chuyển thành danh sách, nên hãy kiểm tra rằng header và giá trị vẫn dễ đọc khi xếp chồng thành các cặp nhãn–giá trị thay vì dạng lưới.
• Giữ số cột ít. Nhiều cột khiến bảng khó đọc lướt và buộc phải cuộn ngang. Chỉ hiển thị những cột người bán cần cho công việc của họ, và cân nhắc hiển thị phần còn lại khi được yêu cầu.
• Viết header cột rõ ràng. Giữ mỗi STableHeader ngắn gọn và mang tính mô tả để người bán biết chính xác cột chứa dữ liệu gì.
• Tính đến tập dữ liệu lớn. Bảng lớn ảnh hưởng đến hiệu năng và khả năng sử dụng. Bật paginate khi bạn có hơn khoảng 50 đến 100 hàng, hoặc cân nhắc thêm bộ lọc hay tìm kiếm để người bán đến được đúng bản ghi nhanh hơn.

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

Xem best practices của Shopify cho <s-table> (tiếng Anh) để có hướng dẫn đầy đủ.

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 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	Kiểu	Mô tả
hasNextPage	boolean	Có thêm trang dữ liệu tiếp theo hay không.
hasPreviousPage	boolean	Có trang dữ liệu trước đó hay không.
loading	boolean	Bảng có đang ở trạng thái tải hay không, chẳng hạn khi tải trang lần đầu hoặc khi tải trang tiếp theo trong bảng có phân trang. Khi là true, bảng có thể ở trạng thái inert, ngăn tương tác của người dùng.
paginate	boolean	Có dùng các control phân trang hay không.
variant	"auto" | "list"	Biến thể bố cục của component table. - list: Luôn hiển thị dưới dạng bố cục danh sách. - auto: Tự động hiển thị dạng bảng trên màn hình rộng và dạng danh sách trên màn hình hẹp.

Events

Event	Kiểu
nextpage	Event
previouspage	Event

Lắng nghe các event này bằng listener dạng @nextpage trên <STable>.

Slots

Slot	Mô tả
default	Cấu trúc bảng hiển thị bên trong component table, bao gồm tiêu đề bảng, hàng và ô để sắp xếp dữ liệu dạng lưới.
filters	Các bộ lọc bổ sung hiển thị trong bảng, chẳng hạn trường tìm kiếm hoặc các input component khác cho phép người dùng thu hẹp dữ liệu được hiển thị.