⭐️

【Polaris和訳】Components/Lists and tables⑤

2021/11/06に公開約69,900字

この記事について

この記事は、Polaris/Components/Lists and tablesの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Index Table with multiple promoted bulk actions

マーチャントがアイテムを選択し、選択したアイテムに対してさまざまなアクションを実行することができます。

React
function IndexTableWithMultiplePromotedBulkActionsExample() {
  const customers = [
    {
      id: "3413",
      url: "customers/341",
      name: "Mae Jemison",
      location: "Decatur, USA",
      orders: 20,
      amountSpent: "$2,400",
    },
    {
      id: "2563",
      url: "customers/256",
      name: "Ellen Ochoa",
      location: "Los Angeles, USA",
      orders: 30,
      amountSpent: "$140",
    },
  ]
  const resourceName = {
    singular: "customer",
    plural: "customers",
  }

  const { selectedResources, allResourcesSelected, handleSelectionChange } =
    useIndexResourceState(customers)

  const promotedBulkActions = [
    {
      content: "Capture payments",
      onAction: () => console.log("Todo: implement payment capture"),
    },
    {
      title: "Edit customers",
      actions: [
        {
          content: "Add customers",
          onAction: () => console.log("Todo: implement adding customers"),
        },
        {
          content: "Delete customers",
          onAction: () => console.log("Todo: implement deleting customers"),
        },
      ],
    },
    {
      title: "Export",
      actions: [
        {
          content: "Export as PDF",
          onAction: () => console.log("Todo: implement PDF exporting"),
        },
        {
          content: "Export as CSV",
          onAction: () => console.log("Todo: implement CSV exporting"),
        },
      ],
    },
  ]
  const bulkActions = [
    {
      content: "Add tags",
      onAction: () => console.log("Todo: implement bulk add tags"),
    },
    {
      content: "Remove tags",
      onAction: () => console.log("Todo: implement bulk remove tags"),
    },
    {
      content: "Delete customers",
      onAction: () => console.log("Todo: implement bulk delete"),
    },
  ]

  const rowMarkup = customers.map(({ id, name, location, orders, amountSpent }, index) => (
    <IndexTable.Row id={id} key={id} selected={selectedResources.includes(id)} position={index}>
      <IndexTable.Cell>
        <TextStyle variation="strong">{name}</TextStyle>
      </IndexTable.Cell>
      <IndexTable.Cell>{location}</IndexTable.Cell>
      <IndexTable.Cell>{orders}</IndexTable.Cell>
      <IndexTable.Cell>{amountSpent}</IndexTable.Cell>
    </IndexTable.Row>
  ))

  return (
    <Card>
      <IndexTable
        resourceName={resourceName}
        itemCount={customers.length}
        selectedItemsCount={allResourcesSelected ? "All" : selectedResources.length}
        onSelectionChange={handleSelectionChange}
        bulkActions={bulkActions}
        promotedBulkActions={promotedBulkActions}
        headings={[
          { title: "Name" },
          { title: "Location" },
          { title: "Order count" },
          { title: "Amount spent" },
        ]}
      >
        {rowMarkup}
      </IndexTable>
    </Card>
  )
}
HTML
<div>
  <div class="Polaris-Card">
    <div class="Polaris-IndexTable">
      <div class="Polaris-IndexTable__StickyTable" role="presentation">
        <div>
          <div></div>
          <div>
            <div class="Polaris-IndexTable__StickyTableHeader">
              <div class="Polaris-IndexTable__StickyTableColumnHeader">
                <div
                  class="Polaris-IndexTable__TableHeading"
                  data-index-table-sticky-heading="true"
                  style="min-width: 146px;"
                >
                  <div
                    class="Polaris-Stack Polaris-Stack--spacingNone Polaris-Stack--alignmentCenter Polaris-Stack--noWrap"
                  >
                    <div class="Polaris-Stack__Item">
                      <div
                        class="Polaris-IndexTable__FirstStickyHeaderElement"
                        style="min-width: calc(22px);"
                      >
                        <div class="Polaris-IndexTable__ColumnHeaderCheckboxWrapper">
                          <label
                            class="Polaris-Choice Polaris-Choice--labelHidden"
                            for="PolarisCheckbox9"
                            ><span class="Polaris-Choice__Control"
                              ><span class="Polaris-Checkbox"
                                ><input
                                  id="PolarisCheckbox9"
                                  type="checkbox"
                                  class="Polaris-Checkbox__Input"
                                  aria-invalid="false"
                                  role="checkbox"
                                  aria-checked="false"
                                  value="" /><span class="Polaris-Checkbox__Backdrop"></span
                                ><span class="Polaris-Checkbox__Icon"
                                  ><span class="Polaris-Icon"
                                    ><span class="Polaris-VisuallyHidden"></span
                                    ><svg
                                      viewBox="0 0 20 20"
                                      class="Polaris-Icon__Svg"
                                      focusable="false"
                                      aria-hidden="true"
                                    >
                                      <path
                                        d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
                                      ></path></svg></span></span></span></span
                            ><span class="Polaris-Choice__Label">Select all customers</span></label
                          >
                        </div>
                      </div>
                    </div>
                    <div class="Polaris-Stack__Item">
                      <div class="Polaris-IndexTable--stickyTableHeadingSecondScrolling">Name</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="Polaris-IndexTable__StickyTableHeadings">
                <div
                  class="Polaris-IndexTable__TableHeading Polaris-IndexTable__StickyTableHeading--second"
                  data-index-table-sticky-heading="true"
                  style="min-width: 94px;"
                >
                  Name
                </div>
                <div
                  class="Polaris-IndexTable__TableHeading"
                  data-index-table-sticky-heading="true"
                  style="min-width: 154px;"
                >
                  Location
                </div>
                <div
                  class="Polaris-IndexTable__TableHeading"
                  data-index-table-sticky-heading="true"
                  style="min-width: 116px;"
                >
                  Order count
                </div>
                <div
                  class="Polaris-IndexTable__TableHeading"
                  data-index-table-sticky-heading="true"
                  style="min-width: 131px;"
                >
                  Amount spent
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="Polaris-IndexTable-ScrollContainer">
        <table class="Polaris-IndexTable__Table">
          <thead>
            <tr>
              <th
                class="Polaris-IndexTable__TableHeading Polaris-IndexTable__TableHeading--first"
                data-index-table-heading="true"
              >
                <div class="Polaris-IndexTable__ColumnHeaderCheckboxWrapper">
                  <label class="Polaris-Choice Polaris-Choice--labelHidden" for="PolarisCheckbox8"
                    ><span class="Polaris-Choice__Control"
                      ><span class="Polaris-Checkbox"
                        ><input
                          id="PolarisCheckbox8"
                          type="checkbox"
                          class="Polaris-Checkbox__Input"
                          aria-invalid="false"
                          role="checkbox"
                          aria-checked="false"
                          value="" /><span class="Polaris-Checkbox__Backdrop"></span
                        ><span class="Polaris-Checkbox__Icon"
                          ><span class="Polaris-Icon"
                            ><span class="Polaris-VisuallyHidden"></span
                            ><svg
                              viewBox="0 0 20 20"
                              class="Polaris-Icon__Svg"
                              focusable="false"
                              aria-hidden="true"
                            >
                              <path
                                d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
                              ></path></svg></span></span></span></span
                    ><span class="Polaris-Choice__Label">Select all customers</span></label
                  >
                </div>
              </th>
              <th
                class="Polaris-IndexTable__TableHeading Polaris-IndexTable__TableHeading--second"
                data-index-table-heading="true"
                style="left: 52px;"
              >
                Name
              </th>
              <th class="Polaris-IndexTable__TableHeading" data-index-table-heading="true">
                Location
              </th>
              <th class="Polaris-IndexTable__TableHeading" data-index-table-heading="true">
                Order count
              </th>
              <th
                class="Polaris-IndexTable__TableHeading Polaris-IndexTable__TableHeading--last"
                data-index-table-heading="true"
              >
                Amount spent
              </th>
            </tr>
          </thead>
          <tbody>
            <tr class="Polaris-IndexTable__TableRow">
              <td class="Polaris-IndexTable__TableCell Polaris-IndexTable__TableCell--first">
                <div class="Polaris-IndexTable-Checkbox__TableCellContentContainer">
                  <div
                    class="Polaris-IndexTable-Checkbox__Wrapper Polaris-IndexTable-Checkbox--expanded"
                  >
                    <label class="Polaris-Choice Polaris-Choice--labelHidden" for="3413"
                      ><span class="Polaris-Choice__Control"
                        ><span class="Polaris-Checkbox"
                          ><input
                            id="3413"
                            type="checkbox"
                            class="Polaris-Checkbox__Input"
                            aria-invalid="false"
                            role="checkbox"
                            aria-checked="false"
                            value="" /><span class="Polaris-Checkbox__Backdrop"></span
                          ><span class="Polaris-Checkbox__Icon"
                            ><span class="Polaris-Icon"
                              ><span class="Polaris-VisuallyHidden"></span
                              ><svg
                                viewBox="0 0 20 20"
                                class="Polaris-Icon__Svg"
                                focusable="false"
                                aria-hidden="true"
                              >
                                <path
                                  d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
                                ></path></svg></span></span></span></span
                      ><span class="Polaris-Choice__Label">Select customer</span></label
                    >
                  </div>
                </div>
              </td>
              <td class="Polaris-IndexTable__TableCell">
                <span class="Polaris-TextStyle--variationStrong">Mae Jemison</span>
              </td>
              <td class="Polaris-IndexTable__TableCell">Decatur, USA</td>
              <td class="Polaris-IndexTable__TableCell">20</td>
              <td class="Polaris-IndexTable__TableCell">$2,400</td>
            </tr>
            <tr class="Polaris-IndexTable__TableRow">
              <td class="Polaris-IndexTable__TableCell Polaris-IndexTable__TableCell--first">
                <div class="Polaris-IndexTable-Checkbox__TableCellContentContainer">
                  <div
                    class="Polaris-IndexTable-Checkbox__Wrapper Polaris-IndexTable-Checkbox--expanded"
                  >
                    <label class="Polaris-Choice Polaris-Choice--labelHidden" for="2563"
                      ><span class="Polaris-Choice__Control"
                        ><span class="Polaris-Checkbox"
                          ><input
                            id="2563"
                            type="checkbox"
                            class="Polaris-Checkbox__Input"
                            aria-invalid="false"
                            role="checkbox"
                            aria-checked="false"
                            value="" /><span class="Polaris-Checkbox__Backdrop"></span
                          ><span class="Polaris-Checkbox__Icon"
                            ><span class="Polaris-Icon"
                              ><span class="Polaris-VisuallyHidden"></span
                              ><svg
                                viewBox="0 0 20 20"
                                class="Polaris-Icon__Svg"
                                focusable="false"
                                aria-hidden="true"
                              >
                                <path
                                  d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
                                ></path></svg></span></span></span></span
                      ><span class="Polaris-Choice__Label">Select customer</span></label
                    >
                  </div>
                </div>
              </td>
              <td class="Polaris-IndexTable__TableCell">
                <span class="Polaris-TextStyle--variationStrong">Ellen Ochoa</span>
              </td>
              <td class="Polaris-IndexTable__TableCell">Los Angeles, USA</td>
              <td class="Polaris-IndexTable__TableCell">30</td>
              <td class="Polaris-IndexTable__TableCell">$140</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="Polaris-IndexTable__ScrollBarContainer">
      <div class="Polaris-IndexTable__ScrollBar" style="--p-scroll-bar-content-width:543px;">
        <div class="Polaris-IndexTable__ScrollBarContent"></div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

Index Table with bulk actions and selection across pages

マーチャントがアイテムを選択し、選択したアイテムに対してアクションを実行し、ページ間でリソースを選択することができます。

Image from Gyazo

React
function IndexTableWithBulkActionsAndSelectionAcrossPagesExample() {
  const customers = [
    {
      id: "3414",
      url: "customers/341",
      name: "Mae Jemison",
      location: "Decatur, USA",
      orders: 20,
      amountSpent: "$2,400",
    },
    {
      id: "2564",
      url: "customers/256",
      name: "Ellen Ochoa",
      location: "Los Angeles, USA",
      orders: 30,
      amountSpent: "$140",
    },
  ]
  const resourceName = {
    singular: "customer",
    plural: "customers",
  }

  const { selectedResources, allResourcesSelected, handleSelectionChange } =
    useIndexResourceState(customers)

  const promotedBulkActions = [
    {
      content: "Edit customers",
      onAction: () => console.log("Todo: implement bulk edit"),
    },
  ]
  const bulkActions = [
    {
      content: "Add tags",
      onAction: () => console.log("Todo: implement bulk add tags"),
    },
    {
      content: "Remove tags",
      onAction: () => console.log("Todo: implement bulk remove tags"),
    },
    {
      content: "Delete customers",
      onAction: () => console.log("Todo: implement bulk delete"),
    },
  ]

  const rowMarkup = customers.map(({ id, name, location, orders, amountSpent }, index) => (
    <IndexTable.Row id={id} key={id} selected={selectedResources.includes(id)} position={index}>
      <IndexTable.Cell>
        <TextStyle variation="strong">{name}</TextStyle>
      </IndexTable.Cell>
      <IndexTable.Cell>{location}</IndexTable.Cell>
      <IndexTable.Cell>{orders}</IndexTable.Cell>
      <IndexTable.Cell>{amountSpent}</IndexTable.Cell>
    </IndexTable.Row>
  ))

  return (
    <Card>
      <IndexTable
        resourceName={resourceName}
        itemCount={customers.length}
        selectedItemsCount={allResourcesSelected ? "All" : selectedResources.length}
        onSelectionChange={handleSelectionChange}
        hasMoreItems
        bulkActions={bulkActions}
        promotedBulkActions={promotedBulkActions}
        headings={[
          { title: "Name" },
          { title: "Location" },
          { title: "Order count" },
          { title: "Amount spent" },
        ]}
      >
        {rowMarkup}
      </IndexTable>
    </Card>
  )
}
HTML
<div>
  <div class="Polaris-Card">
    <div class="Polaris-IndexTable">
      <div class="Polaris-IndexTable__StickyTable" role="presentation">
        <div>
          <div></div>
          <div>
            <div class="Polaris-IndexTable__StickyTableHeader">
              <div class="Polaris-IndexTable__StickyTableColumnHeader">
                <div
                  class="Polaris-IndexTable__TableHeading"
                  data-index-table-sticky-heading="true"
                  style="min-width: 146px;"
                >
                  <div
                    class="Polaris-Stack Polaris-Stack--spacingNone Polaris-Stack--alignmentCenter Polaris-Stack--noWrap"
                  >
                    <div class="Polaris-Stack__Item">
                      <div
                        class="Polaris-IndexTable__FirstStickyHeaderElement"
                        style="min-width: calc(22px);"
                      >
                        <div class="Polaris-IndexTable__ColumnHeaderCheckboxWrapper">
                          <label
                            class="Polaris-Choice Polaris-Choice--labelHidden"
                            for="PolarisCheckbox12"
                            ><span class="Polaris-Choice__Control"
                              ><span class="Polaris-Checkbox"
                                ><input
                                  id="PolarisCheckbox12"
                                  type="checkbox"
                                  class="Polaris-Checkbox__Input"
                                  aria-invalid="false"
                                  role="checkbox"
                                  aria-checked="false"
                                  value="" /><span class="Polaris-Checkbox__Backdrop"></span
                                ><span class="Polaris-Checkbox__Icon"
                                  ><span class="Polaris-Icon"
                                    ><span class="Polaris-VisuallyHidden"></span
                                    ><svg
                                      viewBox="0 0 20 20"
                                      class="Polaris-Icon__Svg"
                                      focusable="false"
                                      aria-hidden="true"
                                    >
                                      <path
                                        d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
                                      ></path></svg></span></span></span></span
                            ><span class="Polaris-Choice__Label">Select all customers</span></label
                          >
                        </div>
                      </div>
                    </div>
                    <div class="Polaris-Stack__Item">
                      <div class="Polaris-IndexTable--stickyTableHeadingSecondScrolling">Name</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="Polaris-IndexTable__StickyTableHeadings">
                <div
                  class="Polaris-IndexTable__TableHeading Polaris-IndexTable__StickyTableHeading--second"
                  data-index-table-sticky-heading="true"
                  style="min-width: 94px;"
                >
                  Name
                </div>
                <div
                  class="Polaris-IndexTable__TableHeading"
                  data-index-table-sticky-heading="true"
                  style="min-width: 154px;"
                >
                  Location
                </div>
                <div
                  class="Polaris-IndexTable__TableHeading"
                  data-index-table-sticky-heading="true"
                  style="min-width: 116px;"
                >
                  Order count
                </div>
                <div
                  class="Polaris-IndexTable__TableHeading"
                  data-index-table-sticky-heading="true"
                  style="min-width: 131px;"
                >
                  Amount spent
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="Polaris-IndexTable-ScrollContainer">
        <table class="Polaris-IndexTable__Table">
          <thead>
            <tr>
              <th
                class="Polaris-IndexTable__TableHeading Polaris-IndexTable__TableHeading--first"
                data-index-table-heading="true"
              >
                <div class="Polaris-IndexTable__ColumnHeaderCheckboxWrapper">
                  <label class="Polaris-Choice Polaris-Choice--labelHidden" for="PolarisCheckbox11"
                    ><span class="Polaris-Choice__Control"
                      ><span class="Polaris-Checkbox"
                        ><input
                          id="PolarisCheckbox11"
                          type="checkbox"
                          class="Polaris-Checkbox__Input"
                          aria-invalid="false"
                          role="checkbox"
                          aria-checked="false"
                          value="" /><span class="Polaris-Checkbox__Backdrop"></span
                        ><span class="Polaris-Checkbox__Icon"
                          ><span class="Polaris-Icon"
                            ><span class="Polaris-VisuallyHidden"></span
                            ><svg
                              viewBox="0 0 20 20"
                              class="Polaris-Icon__Svg"
                              focusable="false"
                              aria-hidden="true"
                            >
                              <path
                                d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
                              ></path></svg></span></span></span></span
                    ><span class="Polaris-Choice__Label">Select all customers</span></label
                  >
                </div>
              </th>
              <th
                class="Polaris-IndexTable__TableHeading Polaris-IndexTable__TableHeading--second"
                data-index-table-heading="true"
                style="left: 52px;"
              >
                Name
              </th>
              <th class="Polaris-IndexTable__TableHeading" data-index-table-heading="true">
                Location
              </th>
              <th class="Polaris-IndexTable__TableHeading" data-index-table-heading="true">
                Order count
              </th>
              <th
                class="Polaris-IndexTable__TableHeading Polaris-IndexTable__TableHeading--last"
                data-index-table-heading="true"
              >
                Amount spent
              </th>
            </tr>
          </thead>
          <tbody>
            <tr class="Polaris-IndexTable__TableRow">
              <td class="Polaris-IndexTable__TableCell Polaris-IndexTable__TableCell--first">
                <div class="Polaris-IndexTable-Checkbox__TableCellContentContainer">
                  <div
                    class="Polaris-IndexTable-Checkbox__Wrapper Polaris-IndexTable-Checkbox--expanded"
                  >
                    <label class="Polaris-Choice Polaris-Choice--labelHidden" for="3414"
                      ><span class="Polaris-Choice__Control"
                        ><span class="Polaris-Checkbox"
                          ><input
                            id="3414"
                            type="checkbox"
                            class="Polaris-Checkbox__Input"
                            aria-invalid="false"
                            role="checkbox"
                            aria-checked="false"
                            value="" /><span class="Polaris-Checkbox__Backdrop"></span
                          ><span class="Polaris-Checkbox__Icon"
                            ><span class="Polaris-Icon"
                              ><span class="Polaris-VisuallyHidden"></span
                              ><svg
                                viewBox="0 0 20 20"
                                class="Polaris-Icon__Svg"
                                focusable="false"
                                aria-hidden="true"
                              >
                                <path
                                  d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
                                ></path></svg></span></span></span></span
                      ><span class="Polaris-Choice__Label">Select customer</span></label
                    >
                  </div>
                </div>
              </td>
              <td class="Polaris-IndexTable__TableCell">
                <span class="Polaris-TextStyle--variationStrong">Mae Jemison</span>
              </td>
              <td class="Polaris-IndexTable__TableCell">Decatur, USA</td>
              <td class="Polaris-IndexTable__TableCell">20</td>
              <td class="Polaris-IndexTable__TableCell">$2,400</td>
            </tr>
            <tr class="Polaris-IndexTable__TableRow">
              <td class="Polaris-IndexTable__TableCell Polaris-IndexTable__TableCell--first">
                <div class="Polaris-IndexTable-Checkbox__TableCellContentContainer">
                  <div
                    class="Polaris-IndexTable-Checkbox__Wrapper Polaris-IndexTable-Checkbox--expanded"
                  >
                    <label class="Polaris-Choice Polaris-Choice--labelHidden" for="2564"
                      ><span class="Polaris-Choice__Control"
                        ><span class="Polaris-Checkbox"
                          ><input
                            id="2564"
                            type="checkbox"
                            class="Polaris-Checkbox__Input"
                            aria-invalid="false"
                            role="checkbox"
                            aria-checked="false"
                            value="" /><span class="Polaris-Checkbox__Backdrop"></span
                          ><span class="Polaris-Checkbox__Icon"
                            ><span class="Polaris-Icon"
                              ><span class="Polaris-VisuallyHidden"></span
                              ><svg
                                viewBox="0 0 20 20"
                                class="Polaris-Icon__Svg"
                                focusable="false"
                                aria-hidden="true"
                              >
                                <path
                                  d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
                                ></path></svg></span></span></span></span
                      ><span class="Polaris-Choice__Label">Select customer</span></label
                    >
                  </div>
                </div>
              </td>
              <td class="Polaris-IndexTable__TableCell">
                <span class="Polaris-TextStyle--variationStrong">Ellen Ochoa</span>
              </td>
              <td class="Polaris-IndexTable__TableCell">Los Angeles, USA</td>
              <td class="Polaris-IndexTable__TableCell">30</td>
              <td class="Polaris-IndexTable__TableCell">$140</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="Polaris-IndexTable__ScrollBarContainer">
      <div class="Polaris-IndexTable__ScrollBar" style="--p-scroll-bar-content-width:543px;">
        <div class="Polaris-IndexTable__ScrollBarContent"></div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

Index Table with loading state

インデックステーブルのアイテムが処理されていることをマーチャントに通知します。

Image from Gyazo

React
function IndexTableWithLoadingExample() {
  const customers = [
    {
      id: "3415",
      url: "customers/341",
      name: "Mae Jemison",
      location: "Decatur, USA",
      orders: 20,
      amountSpent: "$2,400",
    },
    {
      id: "2565",
      url: "customers/256",
      name: "Ellen Ochoa",
      location: "Los Angeles, USA",
      orders: 30,
      amountSpent: "$140",
    },
  ]
  const resourceName = {
    singular: "customer",
    plural: "customers",
  }

  const { selectedResources, allResourcesSelected, handleSelectionChange } =
    useIndexResourceState(customers)

  const rowMarkup = customers.map(({ id, name, location, orders, amountSpent }, index) => (
    <IndexTable.Row id={id} key={id} selected={selectedResources.includes(id)} position={index}>
      <IndexTable.Cell>
        <TextStyle variation="strong">{name}</TextStyle>
      </IndexTable.Cell>
      <IndexTable.Cell>{location}</IndexTable.Cell>
      <IndexTable.Cell>{orders}</IndexTable.Cell>
      <IndexTable.Cell>{amountSpent}</IndexTable.Cell>
    </IndexTable.Row>
  ))

  return (
    <Card>
      <IndexTable
        resourceName={resourceName}
        itemCount={customers.length}
        selectedItemsCount={allResourcesSelected ? "All" : selectedResources.length}
        onSelectionChange={handleSelectionChange}
        loading
        headings={[
          { title: "Name" },
          { title: "Location" },
          { title: "Order count" },
          { title: "Amount spent" },
        ]}
      >
        {rowMarkup}
      </IndexTable>
    </Card>
  )
}
HTML
<div>
  <div class="Polaris-Card">
    <div class="Polaris-IndexTable">
      <div class="Polaris-IndexTable__LoadingPanel">
        <div class="Polaris-IndexTable__LoadingPanelRow">
          <span class="Polaris-Spinner Polaris-Spinner--sizeSmall"
            ><svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M7.229 1.173a9.25 9.25 0 1011.655 11.412 1.25 1.25 0 10-2.4-.698 6.75 6.75 0 11-8.506-8.329 1.25 1.25 0 10-.75-2.385z"
              ></path></svg></span
          ><span role="status"><span class="Polaris-VisuallyHidden"></span></span
          ><span class="Polaris-IndexTable__LoadingPanelText">Loading customers…</span>
        </div>
      </div>
      <div class="Polaris-IndexTable__StickyTable" role="presentation">
        <div>
          <div></div>
          <div>
            <div class="Polaris-IndexTable__StickyTableHeader">
              <div class="Polaris-IndexTable__LoadingPanel">
                <div class="Polaris-IndexTable__LoadingPanelRow">
                  <span class="Polaris-Spinner Polaris-Spinner--sizeSmall"
                    ><svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                      <path
                        d="M7.229 1.173a9.25 9.25 0 1011.655 11.412 1.25 1.25 0 10-2.4-.698 6.75 6.75 0 11-8.506-8.329 1.25 1.25 0 10-.75-2.385z"
                      ></path></svg></span
                  ><span role="status"><span class="Polaris-VisuallyHidden"></span></span
                  ><span class="Polaris-IndexTable__LoadingPanelText">Loading customers…</span>
                </div>
              </div>
              <div class="Polaris-IndexTable__StickyTableColumnHeader">
                <div
                  class="Polaris-IndexTable__TableHeading"
                  data-index-table-sticky-heading="true"
                  style="min-width: 146px;"
                >
                  <div
                    class="Polaris-Stack Polaris-Stack--spacingNone Polaris-Stack--alignmentCenter Polaris-Stack--noWrap"
                  >
                    <div class="Polaris-Stack__Item">
                      <div
                        class="Polaris-IndexTable__FirstStickyHeaderElement"
                        style="min-width: calc(22px);"
                      >
                        <div class="Polaris-IndexTable__ColumnHeaderCheckboxWrapper">
                          <label
                            class="Polaris-Choice Polaris-Choice--labelHidden"
                            for="PolarisCheckbox15"
                            ><span class="Polaris-Choice__Control"
                              ><span class="Polaris-Checkbox"
                                ><input
                                  id="PolarisCheckbox15"
                                  type="checkbox"
                                  class="Polaris-Checkbox__Input"
                                  aria-invalid="false"
                                  role="checkbox"
                                  aria-checked="false"
                                  value="" /><span class="Polaris-Checkbox__Backdrop"></span
                                ><span class="Polaris-Checkbox__Icon"
                                  ><span class="Polaris-Icon"
                                    ><span class="Polaris-VisuallyHidden"></span
                                    ><svg
                                      viewBox="0 0 20 20"
                                      class="Polaris-Icon__Svg"
                                      focusable="false"
                                      aria-hidden="true"
                                    >
                                      <path
                                        d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
                                      ></path></svg></span></span></span></span
                            ><span class="Polaris-Choice__Label">Select all customers</span></label
                          >
                        </div>
                      </div>
                    </div>
                    <div class="Polaris-Stack__Item">
                      <div class="Polaris-IndexTable--stickyTableHeadingSecondScrolling">Name</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="Polaris-IndexTable__StickyTableHeadings">
                <div
                  class="Polaris-IndexTable__TableHeading Polaris-IndexTable__StickyTableHeading--second"
                  data-index-table-sticky-heading="true"
                  style="min-width: 94px;"
                >
                  Name
                </div>
                <div
                  class="Polaris-IndexTable__TableHeading"
                  data-index-table-sticky-heading="true"
                  style="min-width: 154px;"
                >
                  Location
                </div>
                <div
                  class="Polaris-IndexTable__TableHeading"
                  data-index-table-sticky-heading="true"
                  style="min-width: 116px;"
                >
                  Order count
                </div>
                <div
                  class="Polaris-IndexTable__TableHeading"
                  data-index-table-sticky-heading="true"
                  style="min-width: 131px;"
                >
                  Amount spent
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="Polaris-IndexTable-ScrollContainer">
        <table class="Polaris-IndexTable__Table">
          <thead>
            <tr>
              <th
                class="Polaris-IndexTable__TableHeading Polaris-IndexTable__TableHeading--first"
                data-index-table-heading="true"
              >
                <div class="Polaris-IndexTable__ColumnHeaderCheckboxWrapper">
                  <label class="Polaris-Choice Polaris-Choice--labelHidden" for="PolarisCheckbox14"
                    ><span class="Polaris-Choice__Control"
                      ><span class="Polaris-Checkbox"
                        ><input
                          id="PolarisCheckbox14"
                          type="checkbox"
                          class="Polaris-Checkbox__Input"
                          aria-invalid="false"
                          role="checkbox"
                          aria-checked="false"
                          value="" /><span class="Polaris-Checkbox__Backdrop"></span
                        ><span class="Polaris-Checkbox__Icon"
                          ><span class="Polaris-Icon"
                            ><span class="Polaris-VisuallyHidden"></span
                            ><svg
                              viewBox="0 0 20 20"
                              class="Polaris-Icon__Svg"
                              focusable="false"
                              aria-hidden="true"
                            >
                              <path
                                d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
                              ></path></svg></span></span></span></span
                    ><span class="Polaris-Choice__Label">Select all customers</span></label
                  >
                </div>
              </th>
              <th
                class="Polaris-IndexTable__TableHeading Polaris-IndexTable__TableHeading--second"
                data-index-table-heading="true"
                style="left: 52px;"
              >
                Name
              </th>
              <th class="Polaris-IndexTable__TableHeading" data-index-table-heading="true">
                Location
              </th>
              <th class="Polaris-IndexTable__TableHeading" data-index-table-heading="true">
                Order count
              </th>
              <th
                class="Polaris-IndexTable__TableHeading Polaris-IndexTable__TableHeading--last"
                data-index-table-heading="true"
              >
                Amount spent
              </th>
            </tr>
          </thead>
          <tbody>
            <tr class="Polaris-IndexTable__TableRow">
              <td class="Polaris-IndexTable__TableCell Polaris-IndexTable__TableCell--first">
                <div class="Polaris-IndexTable-Checkbox__TableCellContentContainer">
                  <div
                    class="Polaris-IndexTable-Checkbox__Wrapper Polaris-IndexTable-Checkbox--expanded"
                  >
                    <label class="Polaris-Choice Polaris-Choice--labelHidden" for="3415"
                      ><span class="Polaris-Choice__Control"
                        ><span class="Polaris-Checkbox"
                          ><input
                            id="3415"
                            type="checkbox"
                            class="Polaris-Checkbox__Input"
                            aria-invalid="false"
                            role="checkbox"
                            aria-checked="false"
                            value="" /><span class="Polaris-Checkbox__Backdrop"></span
                          ><span class="Polaris-Checkbox__Icon"
                            ><span class="Polaris-Icon"
                              ><span class="Polaris-VisuallyHidden"></span
                              ><svg
                                viewBox="0 0 20 20"
                                class="Polaris-Icon__Svg"
                                focusable="false"
                                aria-hidden="true"
                              >
                                <path
                                  d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
                                ></path></svg></span></span></span></span
                      ><span class="Polaris-Choice__Label">Select customer</span></label
                    >
                  </div>
                </div>
              </td>
              <td class="Polaris-IndexTable__TableCell">
                <span class="Polaris-TextStyle--variationStrong">Mae Jemison</span>
              </td>
              <td class="Polaris-IndexTable__TableCell">Decatur, USA</td>
              <td class="Polaris-IndexTable__TableCell">20</td>
              <td class="Polaris-IndexTable__TableCell">$2,400</td>
            </tr>
            <tr class="Polaris-IndexTable__TableRow">
              <td class="Polaris-IndexTable__TableCell Polaris-IndexTable__TableCell--first">
                <div class="Polaris-IndexTable-Checkbox__TableCellContentContainer">
                  <div
                    class="Polaris-IndexTable-Checkbox__Wrapper Polaris-IndexTable-Checkbox--expanded"
                  >
                    <label class="Polaris-Choice Polaris-Choice--labelHidden" for="2565"
                      ><span class="Polaris-Choice__Control"
                        ><span class="Polaris-Checkbox"
                          ><input
                            id="2565"
                            type="checkbox"
                            class="Polaris-Checkbox__Input"
                            aria-invalid="false"
                            role="checkbox"
                            aria-checked="false"
                            value="" /><span class="Polaris-Checkbox__Backdrop"></span
                          ><span class="Polaris-Checkbox__Icon"
                            ><span class="Polaris-Icon"
                              ><span class="Polaris-VisuallyHidden"></span
                              ><svg
                                viewBox="0 0 20 20"
                                class="Polaris-Icon__Svg"
                                focusable="false"
                                aria-hidden="true"
                              >
                                <path
                                  d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
                                ></path></svg></span></span></span></span
                      ><span class="Polaris-Choice__Label">Select customer</span></label
                    >
                  </div>
                </div>
              </td>
              <td class="Polaris-IndexTable__TableCell">
                <span class="Polaris-TextStyle--variationStrong">Ellen Ochoa</span>
              </td>
              <td class="Polaris-IndexTable__TableCell">Los Angeles, USA</td>
              <td class="Polaris-IndexTable__TableCell">30</td>
              <td class="Polaris-IndexTable__TableCell">$140</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="Polaris-IndexTable__ScrollBarContainer">
      <div class="Polaris-IndexTable__ScrollBar" style="--p-scroll-bar-content-width:543px;">
        <div class="Polaris-IndexTable__ScrollBarContent"></div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

Index Table with filtering

マーチャントは、インデックステーブルを元のアイテムのサブセットに絞ることができます。

Image from Gyazo

React
function IndexTableWithFilteringExample() {
  const customers = [
    {
      id: "3416",
      url: "customers/341",
      name: "Mae Jemison",
      location: "Decatur, USA",
      orders: 20,
      amountSpent: "$2,400",
    },
    {
      id: "2566",
      url: "customers/256",
      name: "Ellen Ochoa",
      location: "Los Angeles, USA",
      orders: 30,
      amountSpent: "$140",
    },
  ]
  const resourceName = {
    singular: "customer",
    plural: "customers",
  }

  const { selectedResources, allResourcesSelected, handleSelectionChange } =
    useIndexResourceState(customers)
  const [taggedWith, setTaggedWith] = useState("VIP")
  const [queryValue, setQueryValue] = useState(null)
  const [sortValue, setSortValue] = useState("today")

  const handleTaggedWithChange = useCallback((value) => setTaggedWith(value), [])
  const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), [])
  const handleQueryValueRemove = useCallback(() => setQueryValue(null), [])
  const handleClearAll = useCallback(() => {
    handleTaggedWithRemove()
    handleQueryValueRemove()
  }, [handleQueryValueRemove, handleTaggedWithRemove])
  const handleSortChange = useCallback((value) => setSortValue(value), [])

  const filters = [
    {
      key: "taggedWith",
      label: "Tagged with",
      filter: (
        <TextField
          label="Tagged with"
          value={taggedWith}
          onChange={handleTaggedWithChange}
          autoComplete="off"
          labelHidden
        />
      ),
      shortcut: true,
    },
  ]

  const appliedFilters = !isEmpty(taggedWith)
    ? [
        {
          key: "taggedWith",
          label: disambiguateLabel("taggedWith", taggedWith),
          onRemove: handleTaggedWithRemove,
        },
      ]
    : []

  const sortOptions = [
    { label: "Today", value: "today" },
    { label: "Yesterday", value: "yesterday" },
    { label: "Last 7 days", value: "lastWeek" },
  ]

  const rowMarkup = customers.map(({ id, name, location, orders, amountSpent }, index) => (
    <IndexTable.Row id={id} key={id} selected={selectedResources.includes(id)} position={index}>
      <IndexTable.Cell>
        <TextStyle variation="strong">{name}</TextStyle>
      </IndexTable.Cell>
      <IndexTable.Cell>{location}</IndexTable.Cell>
      <IndexTable.Cell>{orders}</IndexTable.Cell>
      <IndexTable.Cell>{amountSpent}</IndexTable.Cell>
    </IndexTable.Row>
  ))

  return (
    <Card>
      <div style={{ padding: "16px", display: "flex" }}>
        <div style={{ flex: 1 }}>
          <Filters
            queryValue={queryValue}
            filters={filters}
            appliedFilters={appliedFilters}
            onQueryChange={setQueryValue}
            onQueryClear={handleQueryValueRemove}
            onClearAll={handleClearAll}
          />
        </div>
        <div style={{ paddingLeft: "0.4rem" }}>
          <Select
            labelInline
            label="Sort by"
            options={sortOptions}
            value={sortValue}
            onChange={handleSortChange}
          />
        </div>
      </div>
      <IndexTable
        resourceName={resourceName}
        itemCount={customers.length}
        selectedItemsCount={allResourcesSelected ? "All" : selectedResources.length}
        onSelectionChange={handleSelectionChange}
        headings={[
          { title: "Name" },
          { title: "Location" },
          { title: "Order count" },
          { title: "Amount spent" },
        ]}
      >
        {rowMarkup}
      </IndexTable>
    </Card>
  )

  function disambiguateLabel(key, value) {
    switch (key) {
      case "taggedWith":
        return `Tagged with ${value}`
      default:
        return value
    }
  }

  function isEmpty(value) {
    if (Array.isArray(value)) {
      return value.length === 0
    } else {
      return value === "" || value == null
    }
  }
}
HTML
<div>
  <div class="Polaris-Card">
    <div style="padding: 16px; display: flex;">
      <div style="flex: 1 1 0%;">
        <div class="Polaris-Filters">
          <div
            class="Polaris-Filters-ConnectedFilterControl__ProxyButtonContainer"
            aria-hidden="true"
          >
            <div data-key="taggedWith">
              <button class="Polaris-Button" type="button">
                <span class="Polaris-Button__Content"
                  ><span class="Polaris-Button__Text">Tagged with</span
                  ><span class="Polaris-Button__Icon">
                    <div class="">
                      <span class="Polaris-Icon"
                        ><span class="Polaris-VisuallyHidden"></span
                        ><svg
                          viewBox="0 0 20 20"
                          class="Polaris-Icon__Svg"
                          focusable="false"
                          aria-hidden="true"
                        >
                          <path d="m5 8 5 5 5-5H5z"></path></svg
                      ></span>
                    </div> </span
                ></span>
              </button>
            </div>
          </div>
          <div class="Polaris-Filters-ConnectedFilterControl__Wrapper">
            <div
              class="Polaris-Filters-ConnectedFilterControl Polaris-Filters-ConnectedFilterControl--right"
            >
              <div class="Polaris-Filters-ConnectedFilterControl__CenterContainer">
                <div class="Polaris-Filters-ConnectedFilterControl__Item">
                  <div class="Polaris-Labelled--hidden">
                    <div class="Polaris-Labelled__LabelWrapper">
                      <div class="Polaris-Label">
                        <label
                          id="PolarisTextField2Label"
                          for="PolarisTextField2"
                          class="Polaris-Label__Text"
                          >Filter items</label
                        >
                      </div>
                    </div>
                    <div class="Polaris-Connected">
                      <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                        <div class="Polaris-TextField">
                          <div class="Polaris-TextField__Prefix" id="PolarisTextField2Prefix">
                            <span class="Polaris-Filters__SearchIcon"
                              ><span class="Polaris-Icon"
                                ><span class="Polaris-VisuallyHidden"></span
                                ><svg
                                  viewBox="0 0 20 20"
                                  class="Polaris-Icon__Svg"
                                  focusable="false"
                                  aria-hidden="true"
                                >
                                  <path
                                    d="M8 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm9.707 4.293-4.82-4.82A5.968 5.968 0 0 0 14 8 6 6 0 0 0 2 8a6 6 0 0 0 6 6 5.968 5.968 0 0 0 3.473-1.113l4.82 4.82a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414z"
                                  ></path></svg></span
                            ></span>
                          </div>
                          <input
                            id="PolarisTextField2"
                            placeholder="Filter items"
                            autocomplete="off"
                            class="Polaris-TextField__Input Polaris-TextField__Input--hasClearButton"
                            aria-labelledby="PolarisTextField2Label PolarisTextField2Prefix"
                            aria-invalid="false"
                            value=""
                          />
                          <div class="Polaris-TextField__Backdrop"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="Polaris-Filters-ConnectedFilterControl__MoreFiltersButtonContainer Polaris-Filters-ConnectedFilterControl--onlyButtonVisible"
              >
                <div class="Polaris-Filters-ConnectedFilterControl__Item">
                  <div>
                    <button class="Polaris-Button" type="button">
                      <span class="Polaris-Button__Content"
                        ><span class="Polaris-Button__Text">More filters</span></span
                      >
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="Polaris-Filters__TagsContainer" aria-live="polite">
            <span class="Polaris-Tag Polaris-Tag--removable"
              ><span title="Tagged with VIP" class="Polaris-Tag__TagText">Tagged with VIP</span
              ><button
                type="button"
                aria-label="Remove Tagged with VIP"
                class="Polaris-Tag__Button"
              >
                <span class="Polaris-Icon"
                  ><span class="Polaris-VisuallyHidden"></span
                  ><svg
                    viewBox="0 0 20 20"
                    class="Polaris-Icon__Svg"
                    focusable="false"
                    aria-hidden="true"
                  >
                    <path
                      d="m11.414 10 4.293-4.293a.999.999 0 1 0-1.414-1.414L10 8.586 5.707 4.293a.999.999 0 1 0-1.414 1.414L8.586 10l-4.293 4.293a.999.999 0 1 0 1.414 1.414L10 11.414l4.293 4.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L11.414 10z"
                    ></path></svg
                ></span></button
            ></span>
          </div>
        </div>
      </div>
      <div style="padding-left: 0.4rem;">
        <div class="Polaris-Labelled--hidden">
          <div class="Polaris-Labelled__LabelWrapper">
            <div class="Polaris-Label">
              <label id="PolarisSelect2Label" for="PolarisSelect2" class="Polaris-Label__Text"
                >Sort by</label
              >
            </div>
          </div>
          <div class="Polaris-Select">
            <select id="PolarisSelect2" class="Polaris-Select__Input" aria-invalid="false">
              <option value="today">Today</option>
              <option value="yesterday">Yesterday</option>
              <option value="lastWeek">Last 7 days</option>
            </select>
            <div class="Polaris-Select__Content" aria-hidden="true">
              <span class="Polaris-Select__InlineLabel">Sort by</span
              ><span class="Polaris-Select__SelectedOption">Today</span
              ><span class="Polaris-Select__Icon"
                ><span class="Polaris-Icon"
                  ><span class="Polaris-VisuallyHidden"></span
                  ><svg
                    viewBox="0 0 20 20"
                    class="Polaris-Icon__Svg"
                    focusable="false"
                    aria-hidden="true"
                  >
                    <path d="m10 16-4-4h8l-4 4zm0-12 4 4H6l4-4z"></path></svg></span
              ></span>
            </div>
            <div class="Polaris-Select__Backdrop"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="Polaris-IndexTable">
      <div class="Polaris-IndexTable__StickyTable" role="presentation">
        <div>
          <div></div>
          <div>
            <div class="Polaris-IndexTable__StickyTableHeader">
              <div class="Polaris-IndexTable__StickyTableColumnHeader">
                <div
                  class="Polaris-IndexTable__TableHeading"
                  data-index-table-sticky-heading="true"
                  style="min-width: 146px;"
                >
                  <div
                    class="Polaris-Stack Polaris-Stack--spacingNone Polaris-Stack--alignmentCenter Polaris-Stack--noWrap"
                  >
                    <div class="Polaris-Stack__Item">
                      <div
                        class="Polaris-IndexTable__FirstStickyHeaderElement"
                        style="min-width: calc(22px);"
                      >
                        <div class="Polaris-IndexTable__ColumnHeaderCheckboxWrapper">
                          <label
                            class="Polaris-Choice Polaris-Choice--labelHidden"
                            for="PolarisCheckbox18"
                            ><span class="Polaris-Choice__Control"
                              ><span class="Polaris-Checkbox"
                                ><input
                                  id="PolarisCheckbox18"
                                  type="checkbox"
                                  class="Polaris-Checkbox__Input"
                                  aria-invalid="false"
                                  role="checkbox"
                                  aria-checked="false"
                                  value="" /><span class="Polaris-Checkbox__Backdrop"></span
                                ><span class="Polaris-Checkbox__Icon"
                                  ><span class="Polaris-Icon"
                                    ><span class="Polaris-VisuallyHidden"></span
                                    ><svg
                                      viewBox="0 0 20 20"
                                      class="Polaris-Icon__Svg"
                                      focusable="false"
                                      aria-hidden="true"
                                    >
                                      <path
                                        d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
                                      ></path></svg></span></span></span></span
                            ><span class="Polaris-Choice__Label">Select all customers</span></label
                          >
                        </div>
                      </div>
                    </div>
                    <div class="Polaris-Stack__Item">
                      <div class="Polaris-IndexTable--stickyTableHeadingSecondScrolling">Name</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="Polaris-IndexTable__StickyTableHeadings">
                <div
                  class="Polaris-IndexTable__TableHeading Polaris-IndexTable__StickyTableHeading--second"
                  data-index-table-sticky-heading="true"
                  style="min-width: 94px;"
                >
                  Name
                </div>
                <div
                  class="Polaris-IndexTable__TableHeading"
                  data-index-table-sticky-heading="true"
                  style="min-width: 154px;"
                >
                  Location
                </div>
                <div
                  class="Polaris-IndexTable__TableHeading"
                  data-index-table-sticky-heading="true"
                  style="min-width: 116px;"
                >
                  Order count
                </div>
                <div
                  class="Polaris-IndexTable__TableHeading"
                  data-index-table-sticky-heading="true"
                  style="min-width: 131px;"
                >
                  Amount spent
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="Polaris-IndexTable-ScrollContainer">
        <table class="Polaris-IndexTable__Table">
          <thead>
            <tr>
              <th
                class="Polaris-IndexTable__TableHeading Polaris-IndexTable__TableHeading--first"
                data-index-table-heading="true"
              >
                <div class="Polaris-IndexTable__ColumnHeaderCheckboxWrapper">
                  <label class="Polaris-Choice Polaris-Choice--labelHidden" for="PolarisCheckbox17"
                    ><span class="Polaris-Choice__Control"
                      ><span class="Polaris-Checkbox"
                        ><input
                          id="PolarisCheckbox17"
                          type="checkbox"
                          class="Polaris-Checkbox__Input"
                          aria-invalid="false"
                          role="checkbox"
                          aria-checked="false"
                          value="" /><span class="Polaris-Checkbox__Backdrop"></span
                        ><span class="Polaris-Checkbox__Icon"
                          ><span class="Polaris-Icon"
                            ><span class="Polaris-VisuallyHidden"></span
                            ><svg
                              viewBox="0 0 20 20"
                              class="Polaris-Icon__Svg"
                              focusable="false"
                              aria-hidden="true"
                            >
                              <path
                                d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
                              ></path></svg></span></span></span></span
                    ><span class="Polaris-Choice__Label">Select all customers</span></label
                  >
                </div>
              </th>
              <th
                class="Polaris-IndexTable__TableHeading Polaris-IndexTable__TableHeading--second"
                data-index-table-heading="true"
                style="left: 52px;"
              >
                Name
              </th>
              <th class="Polaris-IndexTable__TableHeading" data-index-table-heading="true">
                Location
              </th>
              <th class="Polaris-IndexTable__TableHeading" data-index-table-heading="true">
                Order count
              </th>
              <th
                class="Polaris-IndexTable__TableHeading Polaris-IndexTable__TableHeading--last"
                data-index-table-heading="true"
              >
                Amount spent
              </th>
            </tr>
          </thead>
          <tbody>
            <tr class="Polaris-IndexTable__TableRow">
              <td class="Polaris-IndexTable__TableCell Polaris-IndexTable__TableCell--first">
                <div class="Polaris-IndexTable-Checkbox__TableCellContentContainer">
                  <div
                    class="Polaris-IndexTable-Checkbox__Wrapper Polaris-IndexTable-Checkbox--expanded"
                  >
                    <label class="Polaris-Choice Polaris-Choice--labelHidden" for="3416"
                      ><span class="Polaris-Choice__Control"
                        ><span class="Polaris-Checkbox"
                          ><input
                            id="3416"
                            type="checkbox"
                            class="Polaris-Checkbox__Input"
                            aria-invalid="false"
                            role="checkbox"
                            aria-checked="false"
                            value="" /><span class="Polaris-Checkbox__Backdrop"></span
                          ><span class="Polaris-Checkbox__Icon"
                            ><span class="Polaris-Icon"
                              ><span class="Polaris-VisuallyHidden"></span
                              ><svg
                                viewBox="0 0 20 20"
                                class="Polaris-Icon__Svg"
                                focusable="false"
                                aria-hidden="true"
                              >
                                <path
                                  d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
                                ></path></svg></span></span></span></span
                      ><span class="Polaris-Choice__Label">Select customer</span></label
                    >
                  </div>
                </div>
              </td>
              <td class="Polaris-IndexTable__TableCell">
                <span class="Polaris-TextStyle--variationStrong">Mae Jemison</span>
              </td>
              <td class="Polaris-IndexTable__TableCell">Decatur, USA</td>
              <td class="Polaris-IndexTable__TableCell">20</td>
              <td class="Polaris-IndexTable__TableCell">$2,400</td>
            </tr>
            <tr class="Polaris-IndexTable__TableRow">
              <td class="Polaris-IndexTable__TableCell Polaris-IndexTable__TableCell--first">
                <div class="Polaris-IndexTable-Checkbox__TableCellContentContainer">
                  <div
                    class="Polaris-IndexTable-Checkbox__Wrapper Polaris-IndexTable-Checkbox--expanded"
                  >
                    <label class="Polaris-Choice Polaris-Choice--labelHidden" for="2566"
                      ><span class="Polaris-Choice__Control"
                        ><span class="Polaris-Checkbox"
                          ><input
                            id="2566"
                            type="checkbox"
                            class="Polaris-Checkbox__Input"
                            aria-invalid="false"
                            role="checkbox"
                            aria-checked="false"
                            value="" /><span class="Polaris-Checkbox__Backdrop"></span
                          ><span class="Polaris-Checkbox__Icon"
                            ><span class="Polaris-Icon"
                              ><span class="Polaris-VisuallyHidden"></span
                              ><svg
                                viewBox="0 0 20 20"
                                class="Polaris-Icon__Svg"
                                focusable="false"
                                aria-hidden="true"
                              >
                                <path
                                  d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
                                ></path></svg></span></span></span></span
                      ><span class="Polaris-Choice__Label">Select customer</span></label
                    >
                  </div>
                </div>
              </td>
              <td class="Polaris-IndexTable__TableCell">
                <span class="Polaris-TextStyle--variationStrong">Ellen Ochoa</span>
              </td>
              <td class="Polaris-IndexTable__TableCell">Los Angeles, USA</td>
              <td class="Polaris-IndexTable__TableCell">30</td>
              <td class="Polaris-IndexTable__TableCell">$140</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="Polaris-IndexTable__ScrollBarContainer">
      <div class="Polaris-IndexTable__ScrollBar" style="--p-scroll-bar-content-width:543px;">
        <div class="Polaris-IndexTable__ScrollBarContent"></div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer">
    <div data-portal-id="sheet-Polarisportal2"></div>
  </div>
</div>

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Discussion

ログインするとコメントできます