STable <s-table>

Structured data के लिए एक table, वैकल्पिक pagination, loading state और छोटी screens पर list layout के साथ। STable Shopify के Polaris <s-table> web component का typed Vue 3 wrapper है।

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

Best practices

• Tables का उपयोग उस data के लिए करें जिसकी merchants तुलना करते हैं। Tables उन कई records के लिए उपयुक्त हैं जिनके attributes समान हैं और जिन्हें साथ-साथ scan करना होता है। बिना तुलना वाली साधारण list के लिए कोई सरल component चुनें।
• Mobile के list layout की योजना बनाएँ। Mobile पर table एक list में बदल जाती है, इसलिए जाँचें कि आपके headers और values grid के बजाय एक के नीचे एक label और value के जोड़ों के रूप में भी ठीक से पढ़े जा सकें।
• Columns की संख्या कम रखें। बहुत सारे columns table को scan करना कठिन बनाते हैं और horizontal scrolling करवाते हैं। केवल वही columns दिखाएँ जिनकी merchants को अपने काम के लिए ज़रूरत है, और बाकी को माँगने पर दिखाने पर विचार करें।
• स्पष्ट column headers लिखें। हर STableHeader को छोटा और वर्णनात्मक रखें ताकि merchants ठीक-ठीक जानें कि column में कौन-सा data है।
• बड़े datasets की योजना बनाएँ। बड़ी tables performance और usability को नुकसान पहुँचाती हैं। लगभग 50 से 100 से अधिक rows होने पर paginate चालू करें, या filters या search जोड़ने पर विचार करें ताकि merchants सही records तक जल्दी पहुँच सकें।

<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 की best practices (अंग्रेज़ी में) देखें।

उदाहरण

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	Type	विवरण
hasNextPage	boolean	क्या data का कोई अतिरिक्त page मौजूद है।
hasPreviousPage	boolean	क्या data का कोई पिछला page मौजूद है।
loading	boolean	क्या table loading state में है, जैसे page का शुरुआती load या paginated table में अगला page load होना। true होने पर table inert state में हो सकता है, जिससे उपयोगकर्ता interaction नहीं हो पाता।
paginate	boolean	क्या pagination controls का उपयोग करना है।
variant	"auto" | "list"	table component का layout variant। - list: हमेशा list layout के रूप में दिखता है। - auto: चौड़ी screens पर अपने आप table के रूप में और संकरी screens पर list के रूप में दिखता है।

Events

Event	Type
nextpage	Event
previouspage	Event

इन्हें <STable> पर @nextpage जैसे listeners से सुनें।

Slots

Slot	विवरण
default	table component के अंदर दिखाई जाने वाली table संरचना, जिसमें table headers, rows और cells शामिल हैं जो data को grid format में व्यवस्थित करते हैं।
filters	table में दिखाने के लिए अतिरिक्त filters, जैसे search fields या अन्य input components, जिनसे users दिखाए गए डेटा को सीमित कर सकते हैं।