⭐️
【Polaris和訳】Components/Lists and tables⓺
この記事について
この記事は、Polaris/Components/Lists and tablesの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Index table with row status
ステータスで区別された行を持つインデックステーブルです。
React
function IndexTableWithRowStatusExample() {
const customers = [
{
id: "3411",
url: "customers/341",
name: "Mae Jemison",
location: "Decatur, USA",
orders: 20,
amountSpent: "$2,400",
status: "success",
},
{
id: "2561",
url: "customers/256",
name: "Ellen Ochoa",
location: "Los Angeles, USA",
orders: 30,
amountSpent: "$140",
status: "subdued",
},
]
const resourceName = {
singular: "customer",
plural: "customers",
}
const { selectedResources, allResourcesSelected, handleSelectionChange } =
useIndexResourceState(customers)
const rowMarkup = customers.map(({ id, name, location, orders, amountSpent, status }, index) => (
<IndexTable.Row
id={id}
key={id}
selected={selectedResources.includes(id)}
position={index}
status={status}
>
<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}
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="PolarisCheckbox21"
><span class="Polaris-Choice__Control"
><span class="Polaris-Checkbox"
><input
id="PolarisCheckbox21"
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="PolarisCheckbox20"
><span class="Polaris-Choice__Control"
><span class="Polaris-Checkbox"
><input
id="PolarisCheckbox20"
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 Polaris-IndexTable--statusSuccess">
<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="3411"
><span class="Polaris-Choice__Control"
><span class="Polaris-Checkbox"
><input
id="3411"
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 Polaris-IndexTable--statusSubdued">
<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="2561"
><span class="Polaris-Choice__Control"
><span class="Polaris-Checkbox"
><input
id="2561"
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 sticky last column
スクロールしても最後の列が表示されたままになるスティッキーなインデックステーブルです。最後の見出しも非表示になっていなければスティッキーになります。
React
function StickyLastCellIndexTableExample() {
const customers = [
{
id: "3411",
url: "customers/341",
name: "Mae Jemison",
location: "Decatur, USA",
orders: 20,
amountSpent: "$2,400",
},
{
id: "2561",
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}
headings={[
{ title: "Name" },
{ title: "Location" },
{ title: "Order count" },
{ title: "Amount spent", hidden: false },
]}
lastColumnSticky
>
{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="PolarisCheckbox24"
><span class="Polaris-Choice__Control"
><span class="Polaris-Checkbox"
><input
id="PolarisCheckbox24"
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 Polaris-IndexTable--tableStickyLast Polaris-IndexTable--tableStickyScrolling"
>
<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="PolarisCheckbox23"
><span class="Polaris-Choice__Control"
><span class="Polaris-Checkbox"
><input
id="PolarisCheckbox23"
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="3411"
><span class="Polaris-Choice__Control"
><span class="Polaris-Checkbox"
><input
id="3411"
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="2561"
><span class="Polaris-Choice__Control"
><span class="Polaris-Checkbox"
><input
id="2561"
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 without checkboxes
チェックボックスやバルクアクションを使わないインデックステーブルです。
React
function IndexTableWithoutCheckboxesExample() {
const customers = [
{
id: "3411",
url: "customers/341",
name: "Mae Jemison",
location: "Decatur, USA",
orders: 20,
amountSpent: "$2,400",
},
{
id: "2561",
url: "customers/256",
name: "Ellen Ochoa",
location: "Los Angeles, USA",
orders: 30,
amountSpent: "$140",
},
]
const resourceName = {
singular: "customer",
plural: "customers",
}
const rowMarkup = customers.map(({ id, name, location, orders, amountSpent }, index) => (
<IndexTable.Row id={id} key={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}
headings={[
{ title: "Name" },
{ title: "Location" },
{ title: "Order count" },
{ title: "Amount spent", hidden: false },
]}
selectable={false}
>
{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: 129px;"
>
<div
class="Polaris-Stack Polaris-Stack--spacingNone Polaris-Stack--alignmentCenter Polaris-Stack--noWrap"
>
<div class="Polaris-Stack__Item">
<div class="Polaris-IndexTable__FirstStickyHeaderElement">Name</div>
</div>
</div>
</div>
</div>
<div class="Polaris-IndexTable__StickyTableHeadings">
<div
class="Polaris-IndexTable__TableHeading Polaris-IndexTable__StickyTableHeading--second Polaris-IndexTable--unselectable"
data-index-table-sticky-heading="true"
style="min-width: 129px;"
>
Name
</div>
<div
class="Polaris-IndexTable__TableHeading"
data-index-table-sticky-heading="true"
style="min-width: 158px;"
>
Location
</div>
<div
class="Polaris-IndexTable__TableHeading"
data-index-table-sticky-heading="true"
style="min-width: 120px;"
>
Order count
</div>
<div
class="Polaris-IndexTable__TableHeading"
data-index-table-sticky-heading="true"
style="min-width: 134px;"
>
Amount spent
</div>
</div>
</div>
</div>
</div>
</div>
<div class="Polaris-IndexTable-ScrollContainer">
<table class="Polaris-IndexTable__Table Polaris-IndexTable__Table--unselectable">
<thead>
<tr>
<th
class="Polaris-IndexTable__TableHeading Polaris-IndexTable__TableHeading--second Polaris-IndexTable__TableHeading--unselectable"
data-index-table-heading="true"
>
Name
</th>
<th
class="Polaris-IndexTable__TableHeading Polaris-IndexTable__TableHeading--unselectable"
data-index-table-heading="true"
>
Location
</th>
<th
class="Polaris-IndexTable__TableHeading Polaris-IndexTable__TableHeading--unselectable"
data-index-table-heading="true"
>
Order count
</th>
<th
class="Polaris-IndexTable__TableHeading Polaris-IndexTable__TableHeading--last Polaris-IndexTable__TableHeading--unselectable"
data-index-table-heading="true"
>
Amount spent
</th>
</tr>
</thead>
<tbody>
<tr class="Polaris-IndexTable__TableRow Polaris-IndexTable__TableRow--unclickable">
<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 Polaris-IndexTable__TableRow--unclickable">
<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:537px;">
<div class="Polaris-IndexTable__ScrollBarContent"></div>
</div>
</div>
</div>
<div id="PolarisPortalsContainer"></div>
</div>
Index Table with all of its elements
インデックステーブルに利用可能な要素や小道具のほとんどを含む大まかな例として使用します。
React
function IndexTableWithAllElementsExample() {
const customers = [
{
id: "3417",
url: "customers/341",
name: "Mae Jemison",
location: "Decatur, USA",
orders: 20,
amountSpent: "$2,400",
},
{
id: "2567",
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 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 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}
hasMoreItems
bulkActions={bulkActions}
promotedBulkActions={promotedBulkActions}
lastColumnSticky
headings={[
{ title: "Name" },
{ title: "Location" },
{ title: "Order count" },
{ title: "Amount spent", hidden: false },
]}
>
{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="PolarisTextField4Label"
for="PolarisTextField4"
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="PolarisTextField4Prefix">
<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="PolarisTextField4"
placeholder="Filter items"
autocomplete="off"
class="Polaris-TextField__Input Polaris-TextField__Input--hasClearButton"
aria-labelledby="PolarisTextField4Label PolarisTextField4Prefix"
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="PolarisSelect4Label" for="PolarisSelect4" class="Polaris-Label__Text"
>Sort by</label
>
</div>
</div>
<div class="Polaris-Select">
<select id="PolarisSelect4" 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="PolarisCheckbox27"
><span class="Polaris-Choice__Control"
><span class="Polaris-Checkbox"
><input
id="PolarisCheckbox27"
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 Polaris-IndexTable--tableStickyLast Polaris-IndexTable--tableStickyScrolling"
>
<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="PolarisCheckbox26"
><span class="Polaris-Choice__Control"
><span class="Polaris-Checkbox"
><input
id="PolarisCheckbox26"
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="3417"
><span class="Polaris-Choice__Control"
><span class="Polaris-Checkbox"
><input
id="3417"
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="2567"
><span class="Polaris-Choice__Control"
><span class="Polaris-Checkbox"
><input
id="2567"
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-Polarisportal4"></div>
</div>
</div>
Small screen Index Table with all of its elements
インデックステーブルに利用可能な要素や小道具のほとんどを含む大まかな例として使用します。
React
function SmallScreenIndexTableWithAllElementsExample() {
const customers = [
{
id: "3418",
url: "customers/341",
name: "Mae Jemison",
location: "Decatur, USA",
orders: 20,
amountSpent: "$2,400",
},
{
id: "2568",
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 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 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}>
<div style={{ padding: "1.2rem 1.6rem" }}>
<p>
<TextStyle variation="strong">{name}</TextStyle>
</p>
<p>{location}</p>
<p>{orders}</p>
<p>{amountSpent}</p>
</div>
</IndexTable.Row>
))
return (
<div style={{ width: "430px" }}>
<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}
hasMoreItems
condensed
bulkActions={bulkActions}
promotedBulkActions={promotedBulkActions}
headings={[
{ title: "Name" },
{ title: "Location" },
{ title: "Order count" },
{ title: "Amount spent" },
]}
>
{rowMarkup}
</IndexTable>
</Card>
</div>
)
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 style="width: 430px;">
<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="PolarisTextField6Label"
for="PolarisTextField6"
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="PolarisTextField6Prefix">
<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="PolarisTextField6"
placeholder="Filter items"
autocomplete="off"
class="Polaris-TextField__Input Polaris-TextField__Input--hasClearButton"
aria-labelledby="PolarisTextField6Label PolarisTextField6Prefix"
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="PolarisSelect6Label" for="PolarisSelect6" class="Polaris-Label__Text"
>Sort by</label
>
</div>
</div>
<div class="Polaris-Select">
<select id="PolarisSelect6" 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 Polaris-IndexTable__StickyTable--condensed"
role="presentation"
>
<div>
<div></div>
<div>
<div class="Polaris-IndexTable__HeaderWrapper">
<button class="Polaris-Button" type="button">
<span class="Polaris-Button__Content"
><span class="Polaris-Button__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
fill-rule="evenodd"
d="M4.5 3A1.5 1.5 0 0 0 3 4.5v11A1.5 1.5 0 0 0 4.5 17h11a1.5 1.5 0 0 0 1.5-1.5v-11A1.5 1.5 0 0 0 15.5 3h-11zm9.207 5.707a1 1 0 0 0-1.414-1.414L9 10.586 7.707 9.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4z"
></path></svg></span></span
><span class="Polaris-Button__Text">Select</span></span
>
</button>
</div>
</div>
</div>
</div>
<ul data-selectmode="false" class="Polaris-IndexTable__CondensedList">
<li class="Polaris-IndexTable__TableRow Polaris-IndexTable--condensedRow">
<div class="Polaris-IndexTable-Checkbox__TableCellContentContainer">
<div
class="Polaris-IndexTable-Checkbox__Wrapper Polaris-IndexTable-Checkbox--condensed"
>
<label class="Polaris-Choice Polaris-Choice--labelHidden" for="3418"
><span class="Polaris-Choice__Control"
><span class="Polaris-Checkbox"
><input
id="3418"
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>
<div style="padding: 1.2rem 1.6rem;">
<p><span class="Polaris-TextStyle--variationStrong">Mae Jemison</span></p>
<p>Decatur, USA</p>
<p>20</p>
<p>$2,400</p>
</div>
</li>
<li class="Polaris-IndexTable__TableRow Polaris-IndexTable--condensedRow">
<div class="Polaris-IndexTable-Checkbox__TableCellContentContainer">
<div
class="Polaris-IndexTable-Checkbox__Wrapper Polaris-IndexTable-Checkbox--condensed"
>
<label class="Polaris-Choice Polaris-Choice--labelHidden" for="2568"
><span class="Polaris-Choice__Control"
><span class="Polaris-Checkbox"
><input
id="2568"
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>
<div style="padding: 1.2rem 1.6rem;">
<p><span class="Polaris-TextStyle--variationStrong">Ellen Ochoa</span></p>
<p>Los Angeles, USA</p>
<p>30</p>
<p>$140</p>
</div>
</li>
</ul>
</div>
<div
class="Polaris-IndexTable__ScrollBarContainer Polaris-IndexTable--scrollBarContainerCondensed"
>
<div class="Polaris-IndexTable__ScrollBar" style="--p-scroll-bar-content-width:0px;">
<div class=""></div>
</div>
</div>
</div>
</div>
<div id="PolarisPortalsContainer">
<div data-portal-id="sheet-Polarisportal6"></div>
</div>
</div>
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion