⭐️

【Polaris和訳】Components/Lists and tables①

2021/10/29に公開約61,000字

この記事について

この記事は、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

Data table

データテーブルは、データセットのすべての情報を整理して表示するために使用されます。データビジュアライゼーションはデータセットの一部を表示しますが、データテーブルはデータセット全体の詳細を表示します。これにより、マーチャントはデータを比較・分析することができます。

default data table

Image from Gyazo

react
function DataTableExample() {
  const rows = [
    ["Emerald Silk Gown", "$875.00", 124689, 140, "$122,500.00"],
    ["Mauve Cashmere Scarf", "$230.00", 124533, 83, "$19,090.00"],
    [
      "Navy Merino Wool Blazer with khaki chinos and yellow belt",
      "$445.00",
      124518,
      32,
      "$14,240.00",
    ],
  ]
  return (
    <Page title="Sales by product">
      <Card>
        <DataTable
          columnContentTypes={["text", "numeric", "numeric", "numeric", "numeric"]}
          headings={["Product", "Price", "SKU Number", "Net quantity", "Net sales"]}
          rows={rows}
          totals={["", "", "", 255, "$155,830.00"]}
        />
      </Card>
    </Page>
  )
}
html
<div>
  <div class="Polaris-Page">
    <div
      class="Polaris-Page-Header Polaris-Page-Header--isSingleRow Polaris-Page-Header--mobileView Polaris-Page-Header--noBreadcrumbs Polaris-Page-Header--mediumTitle"
    >
      <div class="Polaris-Page-Header__Row">
        <div class="Polaris-Page-Header__TitleWrapper">
          <div>
            <div class="Polaris-Header-Title__TitleAndSubtitleWrapper">
              <h1 class="Polaris-Header-Title">Sales by product</h1>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="Polaris-Page__Content">
      <div class="Polaris-Card">
        <div class="Polaris-DataTable--condensed">
          <div class="Polaris-DataTable__Navigation">
            <button
              class="Polaris-Button Polaris-Button--disabled Polaris-Button--plain Polaris-Button--iconOnly"
              aria-label="Scroll table left one column"
              type="button"
              disabled=""
            >
              <span class="Polaris-Button__Content"
                ><span class="Polaris-Button__Icon"
                  ><span class="Polaris-Icon"
                    ><svg
                      viewBox="0 0 20 20"
                      class="Polaris-Icon__Svg"
                      focusable="false"
                      aria-hidden="true"
                    >
                      <path
                        d="M12 16a.997.997 0 0 1-.707-.293l-5-5a.999.999 0 0 1 0-1.414l5-5a.999.999 0 1 1 1.414 1.414L8.414 10l4.293 4.293A.999.999 0 0 1 12 16z"
                      ></path></svg></span></span
              ></span>
            </button>
            <div class="Polaris-DataTable__Pip Polaris-DataTable__Pip--visible"></div>
            <div class="Polaris-DataTable__Pip Polaris-DataTable__Pip--visible"></div>
            <div class="Polaris-DataTable__Pip Polaris-DataTable__Pip--visible"></div>
            <div class="Polaris-DataTable__Pip Polaris-DataTable__Pip--visible"></div>
            <div class="Polaris-DataTable__Pip Polaris-DataTable__Pip--visible"></div>
            <button
              class="Polaris-Button Polaris-Button--plain Polaris-Button--iconOnly"
              aria-label="Scroll table right one column"
              type="button"
            >
              <span class="Polaris-Button__Content"
                ><span class="Polaris-Button__Icon"
                  ><span class="Polaris-Icon"
                    ><svg
                      viewBox="0 0 20 20"
                      class="Polaris-Icon__Svg"
                      focusable="false"
                      aria-hidden="true"
                    >
                      <path
                        d="M8 16a.999.999 0 0 1-.707-1.707L11.586 10 7.293 5.707a.999.999 0 1 1 1.414-1.414l5 5a.999.999 0 0 1 0 1.414l-5 5A.997.997 0 0 1 8 16z"
                      ></path></svg></span></span
              ></span>
            </button>
          </div>
          <div class="Polaris-DataTable Polaris-DataTable--condensed">
            <div class="Polaris-DataTable__ScrollContainer">
              <table class="Polaris-DataTable__Table">
                <thead>
                  <tr>
                    <th
                      data-polaris-header-cell="true"
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn Polaris-DataTable__Cell--header"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      data-polaris-header-cell="true"
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      data-polaris-header-cell="true"
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric"
                      scope="col"
                    >
                      SKU Number
                    </th>
                    <th
                      data-polaris-header-cell="true"
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric"
                      scope="col"
                    >
                      Net quantity
                    </th>
                    <th
                      data-polaris-header-cell="true"
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric"
                      scope="col"
                    >
                      Net sales
                    </th>
                  </tr>
                  <tr>
                    <th
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn Polaris-DataTable__Cell--total"
                      scope="row"
                    >
                      Totals
                    </th>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--total"
                    ></td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--total"
                    ></td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--total Polaris-DataTable__Cell--numeric"
                    >
                      255
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--total Polaris-DataTable__Cell--numeric"
                    >
                      $155,830.00
                    </td>
                  </tr>
                </thead>
                <tbody>
                  <tr class="Polaris-DataTable__TableRow Polaris-DataTable--hoverable">
                    <th
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn"
                      scope="row"
                    >
                      Emerald Silk Gown
                    </th>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      $875.00
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      124689
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      140
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      $122,500.00
                    </td>
                  </tr>
                  <tr class="Polaris-DataTable__TableRow Polaris-DataTable--hoverable">
                    <th
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn"
                      scope="row"
                    >
                      Mauve Cashmere Scarf
                    </th>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      $230.00
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      124533
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      83
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      $19,090.00
                    </td>
                  </tr>
                  <tr class="Polaris-DataTable__TableRow Polaris-DataTable--hoverable">
                    <th
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn"
                      scope="row"
                    >
                      Navy Merino Wool Blazer with khaki chinos and yellow belt
                    </th>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      $445.00
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      124518
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      32
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      $14,240.00
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

サンドボックスでの編集

https://codesandbox.io/s/sqpc1?module=App.js

Sortable data table

Image from Gyazo

React
function SortableDataTableExample() {
  const [sortedRows, setSortedRows] = useState(null)
  const initiallySortedRows = [
    ["Emerald Silk Gown", "$875.00", 124689, 140, "$122,500.00"],
    ["Mauve Cashmere Scarf", "$230.00", 124533, 83, "$19,090.00"],
    [
      "Navy Merino Wool Blazer with khaki chinos and yellow belt",
      "$445.00",
      124518,
      32,
      "$14,240.00",
    ],
  ]
  const rows = sortedRows ? sortedRows : initiallySortedRows
  const handleSort = useCallback(
    (index, direction) => setSortedRows(sortCurrency(rows, index, direction)),
    [rows]
  )
  return (
    <Page title="Sales by product">
      <Card>
        <DataTable
          columnContentTypes={["text", "numeric", "numeric", "numeric", "numeric"]}
          headings={["Product", "Price", "SKU Number", "Net quantity", "Net sales"]}
          rows={rows}
          totals={["", "", "", 255, "$155,830.00"]}
          sortable={[false, true, false, false, true]}
          defaultSortDirection="descending"
          initialSortColumnIndex={4}
          onSort={handleSort}
        />
      </Card>
    </Page>
  )
  function sortCurrency(rows, index, direction) {
    return [...rows].sort((rowA, rowB) => {
      const amountA = parseFloat(rowA[index].substring(1))
      const amountB = parseFloat(rowB[index].substring(1))
      return direction === "descending" ? amountB - amountA : amountA - amountB
    })
  }
}
HTML
<div>
  <div class="Polaris-Page">
    <div
      class="Polaris-Page-Header Polaris-Page-Header--isSingleRow Polaris-Page-Header--mobileView Polaris-Page-Header--noBreadcrumbs Polaris-Page-Header--mediumTitle"
    >
      <div class="Polaris-Page-Header__Row">
        <div class="Polaris-Page-Header__TitleWrapper">
          <div>
            <div class="Polaris-Header-Title__TitleAndSubtitleWrapper">
              <h1 class="Polaris-Header-Title">Sales by product</h1>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="Polaris-Page__Content">
      <div class="Polaris-Card">
        <div class="Polaris-DataTable--condensed">
          <div class="Polaris-DataTable__Navigation">
            <button
              class="Polaris-Button Polaris-Button--disabled Polaris-Button--plain Polaris-Button--iconOnly"
              aria-label="Scroll table left one column"
              type="button"
              disabled=""
            >
              <span class="Polaris-Button__Content"
                ><span class="Polaris-Button__Icon"
                  ><span class="Polaris-Icon"
                    ><svg
                      viewBox="0 0 20 20"
                      class="Polaris-Icon__Svg"
                      focusable="false"
                      aria-hidden="true"
                    >
                      <path
                        d="M12 16a.997.997 0 0 1-.707-.293l-5-5a.999.999 0 0 1 0-1.414l5-5a.999.999 0 1 1 1.414 1.414L8.414 10l4.293 4.293A.999.999 0 0 1 12 16z"
                      ></path></svg></span></span
              ></span>
            </button>
            <div class="Polaris-DataTable__Pip Polaris-DataTable__Pip--visible"></div>
            <div class="Polaris-DataTable__Pip Polaris-DataTable__Pip--visible"></div>
            <div class="Polaris-DataTable__Pip Polaris-DataTable__Pip--visible"></div>
            <div class="Polaris-DataTable__Pip Polaris-DataTable__Pip--visible"></div>
            <div class="Polaris-DataTable__Pip Polaris-DataTable__Pip--visible"></div>
            <button
              class="Polaris-Button Polaris-Button--plain Polaris-Button--iconOnly"
              aria-label="Scroll table right one column"
              type="button"
            >
              <span class="Polaris-Button__Content"
                ><span class="Polaris-Button__Icon"
                  ><span class="Polaris-Icon"
                    ><svg
                      viewBox="0 0 20 20"
                      class="Polaris-Icon__Svg"
                      focusable="false"
                      aria-hidden="true"
                    >
                      <path
                        d="M8 16a.999.999 0 0 1-.707-1.707L11.586 10 7.293 5.707a.999.999 0 1 1 1.414-1.414l5 5a.999.999 0 0 1 0 1.414l-5 5A.997.997 0 0 1 8 16z"
                      ></path></svg></span></span
              ></span>
            </button>
          </div>
          <div class="Polaris-DataTable Polaris-DataTable--condensed">
            <div class="Polaris-DataTable__ScrollContainer">
              <table class="Polaris-DataTable__Table">
                <thead>
                  <tr>
                    <th
                      data-polaris-header-cell="true"
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn Polaris-DataTable__Cell--header"
                      scope="col"
                      aria-sort="none"
                    >
                      Product
                    </th>
                    <th
                      data-polaris-header-cell="true"
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric Polaris-DataTable__Cell--sortable"
                      scope="col"
                      aria-sort="none"
                    >
                      <button class="Polaris-DataTable__Heading">
                        <span class="Polaris-DataTable__Icon"
                          ><span class="Polaris-Icon" aria-label="sort descending by"
                            ><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></span
                        >Price
                      </button>
                    </th>
                    <th
                      data-polaris-header-cell="true"
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric"
                      scope="col"
                      aria-sort="none"
                    >
                      SKU Number
                    </th>
                    <th
                      data-polaris-header-cell="true"
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric"
                      scope="col"
                      aria-sort="none"
                    >
                      Net quantity
                    </th>
                    <th
                      data-polaris-header-cell="true"
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric Polaris-DataTable__Cell--sortable Polaris-DataTable__Cell--sorted"
                      scope="col"
                      aria-sort="descending"
                    >
                      <button class="Polaris-DataTable__Heading">
                        <span class="Polaris-DataTable__Icon"
                          ><span class="Polaris-Icon" aria-label="sort ascending by"
                            ><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></span
                        >Net sales
                      </button>
                    </th>
                  </tr>
                  <tr>
                    <th
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn Polaris-DataTable__Cell--total"
                      scope="row"
                    >
                      Totals
                    </th>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--total"
                    ></td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--total"
                    ></td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--total Polaris-DataTable__Cell--numeric"
                    >
                      255
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--total Polaris-DataTable__Cell--numeric"
                    >
                      $155,830.00
                    </td>
                  </tr>
                </thead>
                <tbody>
                  <tr class="Polaris-DataTable__TableRow Polaris-DataTable--hoverable">
                    <th
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn"
                      scope="row"
                    >
                      Emerald Silk Gown
                    </th>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      $875.00
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      124689
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      140
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      $122,500.00
                    </td>
                  </tr>
                  <tr class="Polaris-DataTable__TableRow Polaris-DataTable--hoverable">
                    <th
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn"
                      scope="row"
                    >
                      Mauve Cashmere Scarf
                    </th>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      $230.00
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      124533
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      83
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      $19,090.00
                    </td>
                  </tr>
                  <tr class="Polaris-DataTable__TableRow Polaris-DataTable--hoverable">
                    <th
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn"
                      scope="row"
                    >
                      Navy Merino Wool Blazer with khaki chinos and yellow belt
                    </th>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      $445.00
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      124518
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      32
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      $14,240.00
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

サンドボックスでの編集

https://codesandbox.io/s/z7dhk?module=App.js

Image from Gyazo

React
function DataTableFooterExample() {
  const rows = [
    ["Emerald Silk Gown", "$875.00", 124689, 140, "$122,500.00"],
    ["Mauve Cashmere Scarf", "$230.00", 124533, 83, "$19,090.00"],
    [
      "Navy Merino Wool Blazer with khaki chinos and yellow belt",
      "$445.00",
      124518,
      32,
      "$14,240.00",
    ],
  ]
  return (
    <Page title="Sales by product">
      <Card>
        <DataTable
          columnContentTypes={["text", "numeric", "numeric", "numeric", "numeric"]}
          headings={["Product", "Price", "SKU Number", "Net quantity", "Net sales"]}
          rows={rows}
          totals={["", "", "", 255, "$155,830.00"]}
          footerContent={`Showing ${rows.length} of ${rows.length} results`}
        />
      </Card>
    </Page>
  )
}
HTML
<div>
  <div class="Polaris-Page">
    <div
      class="Polaris-Page-Header Polaris-Page-Header--isSingleRow Polaris-Page-Header--mobileView Polaris-Page-Header--noBreadcrumbs Polaris-Page-Header--mediumTitle"
    >
      <div class="Polaris-Page-Header__Row">
        <div class="Polaris-Page-Header__TitleWrapper">
          <div>
            <div class="Polaris-Header-Title__TitleAndSubtitleWrapper">
              <h1 class="Polaris-Header-Title">Sales by product</h1>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="Polaris-Page__Content">
      <div class="Polaris-Card">
        <div class="Polaris-DataTable--condensed">
          <div class="Polaris-DataTable__Navigation">
            <button
              class="Polaris-Button Polaris-Button--disabled Polaris-Button--plain Polaris-Button--iconOnly"
              aria-label="Scroll table left one column"
              type="button"
              disabled=""
            >
              <span class="Polaris-Button__Content"
                ><span class="Polaris-Button__Icon"
                  ><span class="Polaris-Icon"
                    ><svg
                      viewBox="0 0 20 20"
                      class="Polaris-Icon__Svg"
                      focusable="false"
                      aria-hidden="true"
                    >
                      <path
                        d="M12 16a.997.997 0 0 1-.707-.293l-5-5a.999.999 0 0 1 0-1.414l5-5a.999.999 0 1 1 1.414 1.414L8.414 10l4.293 4.293A.999.999 0 0 1 12 16z"
                      ></path></svg></span></span
              ></span>
            </button>
            <div class="Polaris-DataTable__Pip Polaris-DataTable__Pip--visible"></div>
            <div class="Polaris-DataTable__Pip Polaris-DataTable__Pip--visible"></div>
            <div class="Polaris-DataTable__Pip Polaris-DataTable__Pip--visible"></div>
            <div class="Polaris-DataTable__Pip Polaris-DataTable__Pip--visible"></div>
            <div class="Polaris-DataTable__Pip Polaris-DataTable__Pip--visible"></div>
            <button
              class="Polaris-Button Polaris-Button--plain Polaris-Button--iconOnly"
              aria-label="Scroll table right one column"
              type="button"
            >
              <span class="Polaris-Button__Content"
                ><span class="Polaris-Button__Icon"
                  ><span class="Polaris-Icon"
                    ><svg
                      viewBox="0 0 20 20"
                      class="Polaris-Icon__Svg"
                      focusable="false"
                      aria-hidden="true"
                    >
                      <path
                        d="M8 16a.999.999 0 0 1-.707-1.707L11.586 10 7.293 5.707a.999.999 0 1 1 1.414-1.414l5 5a.999.999 0 0 1 0 1.414l-5 5A.997.997 0 0 1 8 16z"
                      ></path></svg></span></span
              ></span>
            </button>
          </div>
          <div class="Polaris-DataTable Polaris-DataTable--condensed">
            <div class="Polaris-DataTable__ScrollContainer">
              <table class="Polaris-DataTable__Table">
                <thead>
                  <tr>
                    <th
                      data-polaris-header-cell="true"
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn Polaris-DataTable__Cell--header"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      data-polaris-header-cell="true"
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      data-polaris-header-cell="true"
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric"
                      scope="col"
                    >
                      SKU Number
                    </th>
                    <th
                      data-polaris-header-cell="true"
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric"
                      scope="col"
                    >
                      Net quantity
                    </th>
                    <th
                      data-polaris-header-cell="true"
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric"
                      scope="col"
                    >
                      Net sales
                    </th>
                  </tr>
                  <tr>
                    <th
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn Polaris-DataTable__Cell--total"
                      scope="row"
                    >
                      Totals
                    </th>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--total"
                    ></td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--total"
                    ></td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--total Polaris-DataTable__Cell--numeric"
                    >
                      255
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--total Polaris-DataTable__Cell--numeric"
                    >
                      $155,830.00
                    </td>
                  </tr>
                </thead>
                <tbody>
                  <tr class="Polaris-DataTable__TableRow Polaris-DataTable--hoverable">
                    <th
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn"
                      scope="row"
                    >
                      Emerald Silk Gown
                    </th>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      $875.00
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      124689
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      140
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      $122,500.00
                    </td>
                  </tr>
                  <tr class="Polaris-DataTable__TableRow Polaris-DataTable--hoverable">
                    <th
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn"
                      scope="row"
                    >
                      Mauve Cashmere Scarf
                    </th>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      $230.00
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      124533
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      83
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      $19,090.00
                    </td>
                  </tr>
                  <tr class="Polaris-DataTable__TableRow Polaris-DataTable--hoverable">
                    <th
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn"
                      scope="row"
                    >
                      Navy Merino Wool Blazer with khaki chinos and yellow belt
                    </th>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      $445.00
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      124518
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      32
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      $14,240.00
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="Polaris-DataTable__Footer">Showing 3 of 3 results</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

サンドボックスでの編集

https://codesandbox.io/s/irhtq?module=App.js

Data table with custom totals heading

Image from Gyazo

React
function DataTableExample() {
  const rows = [
    ["Emerald Silk Gown", "$875.00", 124689, 140, "$122,500.00"],
    ["Mauve Cashmere Scarf", "$230.00", 124533, 83, "$19,090.00"],
    [
      "Navy Merino Wool Blazer with khaki chinos and yellow belt",
      "$445.00",
      124518,
      32,
      "$14,240.00",
    ],
  ]
  return (
    <Page title="Sales by product">
      <Card>
        <DataTable
          showTotalsInFooter
          columnContentTypes={["text", "numeric", "numeric", "numeric", "numeric"]}
          headings={["Product", "Price", "SKU Number", "Net quantity", "Net sales"]}
          rows={rows}
          totals={["", "", "", "", "$155,830.00"]}
          totalsName={{
            singular: "Total net sales",
            plural: "Total net sales",
          }}
        />
      </Card>
    </Page>
  )
}
HTML
<div>
  <div class="Polaris-Page">
    <div
      class="Polaris-Page-Header Polaris-Page-Header--isSingleRow Polaris-Page-Header--mobileView Polaris-Page-Header--noBreadcrumbs Polaris-Page-Header--mediumTitle"
    >
      <div class="Polaris-Page-Header__Row">
        <div class="Polaris-Page-Header__TitleWrapper">
          <div>
            <div class="Polaris-Header-Title__TitleAndSubtitleWrapper">
              <h1 class="Polaris-Header-Title">Sales by product</h1>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="Polaris-Page__Content">
      <div class="Polaris-Card">
        <div class="Polaris-DataTable--condensed">
          <div class="Polaris-DataTable__Navigation">
            <button
              class="Polaris-Button Polaris-Button--disabled Polaris-Button--plain Polaris-Button--iconOnly"
              aria-label="Scroll table left one column"
              type="button"
              disabled=""
            >
              <span class="Polaris-Button__Content"
                ><span class="Polaris-Button__Icon"
                  ><span class="Polaris-Icon"
                    ><svg
                      viewBox="0 0 20 20"
                      class="Polaris-Icon__Svg"
                      focusable="false"
                      aria-hidden="true"
                    >
                      <path
                        d="M12 16a.997.997 0 0 1-.707-.293l-5-5a.999.999 0 0 1 0-1.414l5-5a.999.999 0 1 1 1.414 1.414L8.414 10l4.293 4.293A.999.999 0 0 1 12 16z"
                      ></path></svg></span></span
              ></span>
            </button>
            <div class="Polaris-DataTable__Pip Polaris-DataTable__Pip--visible"></div>
            <div class="Polaris-DataTable__Pip Polaris-DataTable__Pip--visible"></div>
            <div class="Polaris-DataTable__Pip Polaris-DataTable__Pip--visible"></div>
            <div class="Polaris-DataTable__Pip Polaris-DataTable__Pip--visible"></div>
            <div class="Polaris-DataTable__Pip Polaris-DataTable__Pip--visible"></div>
            <button
              class="Polaris-Button Polaris-Button--plain Polaris-Button--iconOnly"
              aria-label="Scroll table right one column"
              type="button"
            >
              <span class="Polaris-Button__Content"
                ><span class="Polaris-Button__Icon"
                  ><span class="Polaris-Icon"
                    ><svg
                      viewBox="0 0 20 20"
                      class="Polaris-Icon__Svg"
                      focusable="false"
                      aria-hidden="true"
                    >
                      <path
                        d="M8 16a.999.999 0 0 1-.707-1.707L11.586 10 7.293 5.707a.999.999 0 1 1 1.414-1.414l5 5a.999.999 0 0 1 0 1.414l-5 5A.997.997 0 0 1 8 16z"
                      ></path></svg></span></span
              ></span>
            </button>
          </div>
          <div class="Polaris-DataTable Polaris-DataTable--condensed">
            <div class="Polaris-DataTable__ScrollContainer">
              <table class="Polaris-DataTable__Table">
                <thead>
                  <tr>
                    <th
                      data-polaris-header-cell="true"
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn Polaris-DataTable__Cell--header"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      data-polaris-header-cell="true"
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      data-polaris-header-cell="true"
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric"
                      scope="col"
                    >
                      SKU Number
                    </th>
                    <th
                      data-polaris-header-cell="true"
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric"
                      scope="col"
                    >
                      Net quantity
                    </th>
                    <th
                      data-polaris-header-cell="true"
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric"
                      scope="col"
                    >
                      Net sales
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="Polaris-DataTable__TableRow Polaris-DataTable--hoverable">
                    <th
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn"
                      scope="row"
                    >
                      Emerald Silk Gown
                    </th>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      $875.00
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      124689
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      140
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      $122,500.00
                    </td>
                  </tr>
                  <tr class="Polaris-DataTable__TableRow Polaris-DataTable--hoverable">
                    <th
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn"
                      scope="row"
                    >
                      Mauve Cashmere Scarf
                    </th>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      $230.00
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      124533
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      83
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      $19,090.00
                    </td>
                  </tr>
                  <tr class="Polaris-DataTable__TableRow Polaris-DataTable--hoverable">
                    <th
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn"
                      scope="row"
                    >
                      Navy Merino Wool Blazer with khaki chinos and yellow belt
                    </th>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      $445.00
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      124518
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      32
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      $14,240.00
                    </td>
                  </tr>
                </tbody>
                <tfoot>
                  <tr>
                    <th
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn Polaris-DataTable__Cell--total Polaris-DataTable--cellTotalFooter"
                      scope="row"
                    >
                      Total net sales
                    </th>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--total Polaris-DataTable--cellTotalFooter"
                    ></td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--total Polaris-DataTable--cellTotalFooter"
                    ></td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--total Polaris-DataTable--cellTotalFooter"
                    ></td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--total Polaris-DataTable--cellTotalFooter Polaris-DataTable__Cell--numeric"
                    >
                      $155,830.00
                    </td>
                  </tr>
                </tfoot>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

サンドボックスでの編集

https://codesandbox.io/s/3dsee?module=App.js

Image from Gyazo

React
function DataTableExample() {
  const rows = [
    ["Emerald Silk Gown", "$875.00", 124689, 140, "$122,500.00"],
    ["Mauve Cashmere Scarf", "$230.00", 124533, 83, "$19,090.00"],
    [
      "Navy Merino Wool Blazer with khaki chinos and yellow belt",
      "$445.00",
      124518,
      32,
      "$14,240.00",
    ],
  ]
  return (
    <Page title="Sales by product">
      <Card>
        <DataTable
          columnContentTypes={["text", "numeric", "numeric", "numeric", "numeric"]}
          headings={["Product", "Price", "SKU Number", "Net quantity", "Net sales"]}
          rows={rows}
          totals={["", "", "", 255, "$155,830.00"]}
          showTotalsInFooter
        />
      </Card>
    </Page>
  )
}
HTML
<div>
  <div class="Polaris-Page">
    <div
      class="Polaris-Page-Header Polaris-Page-Header--isSingleRow Polaris-Page-Header--mobileView Polaris-Page-Header--noBreadcrumbs Polaris-Page-Header--mediumTitle"
    >
      <div class="Polaris-Page-Header__Row">
        <div class="Polaris-Page-Header__TitleWrapper">
          <div>
            <div class="Polaris-Header-Title__TitleAndSubtitleWrapper">
              <h1 class="Polaris-Header-Title">Sales by product</h1>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="Polaris-Page__Content">
      <div class="Polaris-Card">
        <div class="Polaris-DataTable--condensed">
          <div class="Polaris-DataTable__Navigation">
            <button
              class="Polaris-Button Polaris-Button--disabled Polaris-Button--plain Polaris-Button--iconOnly"
              aria-label="Scroll table left one column"
              type="button"
              disabled=""
            >
              <span class="Polaris-Button__Content"
                ><span class="Polaris-Button__Icon"
                  ><span class="Polaris-Icon"
                    ><svg
                      viewBox="0 0 20 20"
                      class="Polaris-Icon__Svg"
                      focusable="false"
                      aria-hidden="true"
                    >
                      <path
                        d="M12 16a.997.997 0 0 1-.707-.293l-5-5a.999.999 0 0 1 0-1.414l5-5a.999.999 0 1 1 1.414 1.414L8.414 10l4.293 4.293A.999.999 0 0 1 12 16z"
                      ></path></svg></span></span
              ></span>
            </button>
            <div class="Polaris-DataTable__Pip Polaris-DataTable__Pip--visible"></div>
            <div class="Polaris-DataTable__Pip Polaris-DataTable__Pip--visible"></div>
            <div class="Polaris-DataTable__Pip Polaris-DataTable__Pip--visible"></div>
            <div class="Polaris-DataTable__Pip Polaris-DataTable__Pip--visible"></div>
            <div class="Polaris-DataTable__Pip Polaris-DataTable__Pip--visible"></div>
            <button
              class="Polaris-Button Polaris-Button--plain Polaris-Button--iconOnly"
              aria-label="Scroll table right one column"
              type="button"
            >
              <span class="Polaris-Button__Content"
                ><span class="Polaris-Button__Icon"
                  ><span class="Polaris-Icon"
                    ><svg
                      viewBox="0 0 20 20"
                      class="Polaris-Icon__Svg"
                      focusable="false"
                      aria-hidden="true"
                    >
                      <path
                        d="M8 16a.999.999 0 0 1-.707-1.707L11.586 10 7.293 5.707a.999.999 0 1 1 1.414-1.414l5 5a.999.999 0 0 1 0 1.414l-5 5A.997.997 0 0 1 8 16z"
                      ></path></svg></span></span
              ></span>
            </button>
          </div>
          <div class="Polaris-DataTable Polaris-DataTable--condensed">
            <div class="Polaris-DataTable__ScrollContainer">
              <table class="Polaris-DataTable__Table">
                <thead>
                  <tr>
                    <th
                      data-polaris-header-cell="true"
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn Polaris-DataTable__Cell--header"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      data-polaris-header-cell="true"
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      data-polaris-header-cell="true"
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric"
                      scope="col"
                    >
                      SKU Number
                    </th>
                    <th
                      data-polaris-header-cell="true"
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric"
                      scope="col"
                    >
                      Net quantity
                    </th>
                    <th
                      data-polaris-header-cell="true"
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric"
                      scope="col"
                    >
                      Net sales
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="Polaris-DataTable__TableRow Polaris-DataTable--hoverable">
                    <th
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn"
                      scope="row"
                    >
                      Emerald Silk Gown
                    </th>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      $875.00
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      124689
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      140
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      $122,500.00
                    </td>
                  </tr>
                  <tr class="Polaris-DataTable__TableRow Polaris-DataTable--hoverable">
                    <th
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn"
                      scope="row"
                    >
                      Mauve Cashmere Scarf
                    </th>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      $230.00
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      124533
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      83
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      $19,090.00
                    </td>
                  </tr>
                  <tr class="Polaris-DataTable__TableRow Polaris-DataTable--hoverable">
                    <th
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn"
                      scope="row"
                    >
                      Navy Merino Wool Blazer with khaki chinos and yellow belt
                    </th>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      $445.00
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      124518
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      32
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"
                    >
                      $14,240.00
                    </td>
                  </tr>
                </tbody>
                <tfoot>
                  <tr>
                    <th
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn Polaris-DataTable__Cell--total Polaris-DataTable--cellTotalFooter"
                      scope="row"
                    >
                      Totals
                    </th>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--total Polaris-DataTable--cellTotalFooter"
                    ></td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--total Polaris-DataTable--cellTotalFooter"
                    ></td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--total Polaris-DataTable--cellTotalFooter Polaris-DataTable__Cell--numeric"
                    >
                      255
                    </td>
                    <td
                      class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--total Polaris-DataTable--cellTotalFooter Polaris-DataTable__Cell--numeric"
                    >
                      $155,830.00
                    </td>
                  </tr>
                </tfoot>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

サンドボックスでの編集

https://codesandbox.io/s/zqkkp?module=App.js

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

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