Customer Account Extension - Preact Tables?

Extensions
1

I am trying to get my preact Polaris web components using a customer-account extension to display similar to a Table but having no luck; and there is very few documentation on trying to get it this way. Specifically this is rendering on the Orders Screen for new customers account.

Was looking for some input on how I can accomplish this Table/Grid feat using preact? Do I have to use the older ui-extension import?

{invoicesLoaded && (
    <>
      {invoices.length > 0 ? (
        <>
          {/* Table Header */}
          <s-stack direction="inline" gap="none" padding="base">
            <s-text emphasis="bold" size="small">Invoice #</s-text>
            <s-text emphasis="bold" size="small">Date</s-text>
            <s-text emphasis="bold" size="small">Store</s-text>
            <s-text emphasis="bold" size="small">Status</s-text>
            <s-text emphasis="bold" size="small">Total</s-text>
          </s-stack>
          
          <s-divider />
          
          {/* Invoices */}
          {invoices.map((invoice, idx) => {
            const isExpanded = expandedInvoice === invoice.id;
            const lines = invoiceLines[invoice.id] || [];
            const isLoading = loadingLines[`invoice-${invoice.id}`];
            
            return (
              <s-box key={invoice.id}>
                <s-stack direction="inline" gap="none" padding="base" onClick={() => toggleInvoice(invoice.id)}>
                  <s-text size="small">
                    <s-link>{invoice.invoiceNumber}</s-link>
                  </s-text>
                  <s-text size="small">
                    {invoice.date ? new Date(invoice.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : 'N/A'}
                  </s-text>
                  <s-text size="small">
                    {invoice.store || 'N/A'}
                  </s-text>
                  <s-text size="small">
                    {invoice.status || 'N/A'}
                  </s-text>
                  <s-text size="small" emphasis="bold">
                    ${Number(invoice.total || 0).toFixed(2)}
                  </s-text>
                </s-stack>
                
                {isExpanded && isLoading && (
                  <s-stack padding="base">
                    <s-text size="small">Loading items...</s-text>
                  </s-stack>
                )}
                
                {isExpanded && !isLoading && lines.length > 0 && (
                  <s-stack gap="small" padding="base">
                    {lines.map((item, idx) => (
                      <s-stack key={`${invoice.id}-line-${idx}`} gap="none">
                        <s-text size="small" emphasis="bold">{idx + 1}. {item.productId}</s-text>
                        <s-text size="small">{item.description || item.name}</s-text>
                        <s-text size="small">Qty: {item.qtyShip} × ${Number(item.unitPrice).toFixed(2)} = ${Number(item.extendedPrice).toFixed(2)}</s-text>
                      </s-stack>
                    ))}
                  </s-stack>
                )}
                
                {isExpanded && !isLoading && lines.length === 0 && (
                  <s-stack padding="base">
                    <s-text size="small">No items found</s-text>
                  </s-stack>
                )}
                
                {idx < invoices.length - 1 && <s-divider />}
              </s-box>
            );
          })}

image
image1151×610 37.4 KB

2

Hi @Stats_Marketing,

Have you tried using the grid component?

Example of what you can do with it:

06-03-ajebh-5fogx
06-03-ajebh-5fogx1768×394 9.2 KB

Example code for reference:

 return (
    <>
      <s-section heading="Table Test">
        <s-stack direction="block" gap="small">
          {/* Header row */}
          <s-grid gridTemplateColumns="1fr 1fr 1fr" gap="base">
            <s-text type="strong">Name</s-text>
            <s-text type="strong">Age</s-text>
            <s-text type="strong">City</s-text>
          </s-grid>
          <s-divider></s-divider>
          {/* Data rows */}
          <s-grid gridTemplateColumns="1fr 1fr 1fr" gap="base">
            <s-text>John Doe</s-text>
            <s-text>30</s-text>
            <s-text>New York</s-text>
          </s-grid>
          <s-grid gridTemplateColumns="1fr 1fr 1fr" gap="base">
            <s-text>Jane Smith</s-text>
            <s-text>25</s-text>
            <s-text>Los Angeles</s-text>
          </s-grid>
        </s-stack>
      </s-section>
    </>
  );
1 Like