S-scroll-box for admin ui extensions (?)

Extensions
1

Hey team, it’s great that you’ve recently added the s-table component to admin UI extensions and we would love to use it. However, one limitation we ran into was the fact that the width the -s-table component has available is pretty small.

Ideally, we would have to ability to give the s-table component more space using something like the s-scroll-box as we’ve already got available in the checkout ui components. This would allow for creating wider tables including more information.

<s-scroll-box>
  <s-table>
    <s-table-header-row>
      <s-table-header listSlot="primary">Product</s-table-header>
      <s-table-header listSlot="inline">Status</s-table-header>
      <s-table-header listSlot="labeled">Inventory</s-table-header>
      <s-table-header listSlot="labeled">Price</s-table-header>
    </s-table-header-row>

    <s-table-body>
      <s-table-row>
        <s-table-cell>Cutting board</s-table-cell>
        <s-table-cell>
          <s-badge tone="critical">Out of stock</s-badge>
        </s-table-cell>
        <s-table-cell>0</s-table-cell>
        <s-table-cell>$34.99</s-table-cell>
      </s-table-row>
    </s-table-body>
  </s-table>
</s-scroll-box>

Another idea is to allow the s-table to overflow and add it as a property there to ensure it’s controlled and limited to s-table components. I can understand if you don’t want this functionality to leak to other components as the introduction of the s-scroll-box would do.

  <s-table overflow="auto scroll">
    <s-table-header-row>
      <s-table-header listSlot="primary">Product</s-table-header>
      <s-table-header listSlot="inline">Status</s-table-header>
      <s-table-header listSlot="labeled">Inventory</s-table-header>
      <s-table-header listSlot="labeled">Price</s-table-header>
    </s-table-header-row>

    <s-table-body>
      <s-table-row>
        <s-table-cell>Water bottle</s-table-cell>
        <s-table-cell>
          <s-badge tone="success">Active</s-badge>
        </s-table-cell>
        <s-table-cell>128</s-table-cell>
        <s-table-cell>$24.99</s-table-cell>
      </s-table-row>
      <s-table-row>
        <s-table-cell>T-shirt</s-table-cell>
        <s-table-cell>
          <s-badge tone="warning">Low stock</s-badge>
        </s-table-cell>
        <s-table-cell>15</s-table-cell>
        <s-table-cell>$19.99</s-table-cell>
      </s-table-row>
      <s-table-row>
        <s-table-cell>Cutting board</s-table-cell>
        <s-table-cell>
          <s-badge tone="critical">Out of stock</s-badge>
        </s-table-cell>
        <s-table-cell>0</s-table-cell>
        <s-table-cell>$34.99</s-table-cell>
      </s-table-row>
    </s-table-body>
  </s-table>
1 Like