x
<div class="Polaris-Card">
<div class="Polaris-Card__Section">
<div class="Polaris-Filters">
<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 class="Polaris-Label__Text" for="query">Query</label>
</div>
</div>
<div class="Polaris-Connected">
<div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
<div data-polaris-text-field-has-value-class="Polaris-TextField--hasValue" data-polaris-text-field-clear-button-hidden-class="Polaris-TextField__Hidden" data-controller="polaris-text-field" class="Polaris-TextField">
<div class="Polaris-TextField__Prefix">
<span class="Polaris-Icon">
<svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" 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>
</div>
<input type="text" name="query" id="query" placeholder="Filter items" data-polaris-text-field-target="input" data-action="polaris-text-field#syncValue" class="Polaris-TextField__Input" />
<button
type="button"
class="Polaris-TextField__ClearButton
Polaris-TextField__Hidden
"
tabindex="0"
data-polaris-text-field-target="clearButton"
data-action="polaris-text-field#clear"
>
<span class="Polaris-VisuallyHidden">Clear</span>
<span class="Polaris-Icon Polaris-Icon--colorBase Polaris-Icon--applyColor">
<svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true"><path fill-rule="evenodd" d="M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16zM7.707 6.293a1 1 0 0 0-1.414 1.414L8.586 10l-2.293 2.293a1 1 0 1 0 1.414 1.414L10 11.414l2.293 2.293a1 1 0 1 0 1.414-1.414L11.414 10l2.293-2.293a1 1 0 0 0-1.414-1.414L10 8.586 7.707 6.293z"></path></svg>
</span>
</button>
<div class="Polaris-TextField__Backdrop"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="Polaris-Filters-ConnectedFilterControl__RightContainer Polaris-Filters-ConnectedFilterControl__RightContainerWithoutMoreFilters Polaris-Filters-ConnectedFilterControl--queryFieldHidden">
<div class="Polaris-Filters-ConnectedFilterControl__Item">
<div data-controller="polaris-popover" data-polaris-popover-active-value="false" data-polaris-popover-placement-value="bottom-start" data-polaris-popover-open-class="Polaris-Popover__PopoverOverlay--open" data-polaris-popover-closed-class="Polaris-Popover__PopoverOverlay--closed" style="display: inline-block;">
<div data-polaris-popover-target="activator">
<button data-action="polaris-popover#toggle [email protected]>polaris-popover#hide" data-controller="polaris-button" type="button" class="Polaris-Button">
<span class="Polaris-Button__Content">
<div class="Polaris-Button__Text">
Availability
</div>
<div class="Polaris-Button__Icon">
<span class="Polaris-Icon">
<svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true"><path d="M13.098 8H6.902c-.751 0-1.172.754-.708 1.268L9.292 12.7c.36.399 1.055.399 1.416 0l3.098-3.433C14.27 8.754 13.849 8 13.098 8z"></path></svg>
</span>
</div>
</span>
</button>
</div>
<div style="width: 150px" data-polaris-popover-target="popover" class="Polaris-PositionedOverlay Polaris-Popover__PopoverOverlay Polaris-Popover__PopoverOverlay--closed">
<div class="Polaris-Popover">
<div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
<div style="">
<div class="Polaris-Popover__Wrapper">
<div tabindex="-1" class="Polaris-Popover__Content">
<div data-polaris-scrollable-shadow-value="true" data-polaris-scrollable-top-shadow-class="Polaris-Scrollable--hasTopShadow" data-polaris-scrollable-bottom-shadow-class="Polaris-Scrollable--hasBottomShadow" data-controller="polaris-scrollable" style="" class="Polaris-Popover__Pane Polaris-Scrollable Polaris-Scrollable--vertical">
<span data-polaris-scrollable-target="topEdge"></span>
<div class="Polaris-Popover__Section">
<fieldset class="Polaris-ChoiceList Polaris-ChoiceList--titleHidden">
<legend class="Polaris-ChoiceList__Title">
</legend>
<ul class="Polaris-ChoiceList__Choices">
<li>
<div>
<label class="Polaris-Choice">
<span class="Polaris-Choice__Control">
<span class="Polaris-Checkbox">
<input type="checkbox" id="" value="online_store" aria-checked="false" class="Polaris-Checkbox__Input" />
<span class="Polaris-Checkbox__Backdrop"></span>
<span class="Polaris-Checkbox__Icon">
<span class="Polaris-Icon">
<svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" 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">
Online Store
</span>
</label>
</div>
</li>
<li>
<div>
<label class="Polaris-Choice">
<span class="Polaris-Choice__Control">
<span class="Polaris-Checkbox">
<input type="checkbox" id="" value="point_of_sale" aria-checked="false" class="Polaris-Checkbox__Input" />
<span class="Polaris-Checkbox__Backdrop"></span>
<span class="Polaris-Checkbox__Icon">
<span class="Polaris-Icon">
<svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" 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">
Point of Sale
</span>
</label>
</div>
</li>
<li>
<div>
<label class="Polaris-Choice">
<span class="Polaris-Choice__Control">
<span class="Polaris-Checkbox">
<input type="checkbox" id="" value="buy_button" aria-checked="false" class="Polaris-Checkbox__Input" />
<span class="Polaris-Checkbox__Backdrop"></span>
<span class="Polaris-Checkbox__Icon">
<span class="Polaris-Icon">
<svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" 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">
Buy Button
</span>
</label>
</div>
</li>
</ul>
</fieldset>
</div>
<span data-polaris-scrollable-target="bottomEdge"></span>
</div>
</div>
</div>
</div>
<div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="">
<div class="Polaris-DataTable">
<div class="Polaris-DataTable__ScrollContainer">
<table class="Polaris-DataTable__Table">
<thead>
<tr>
<th scope="col" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn Polaris-DataTable__Cell--header">
Product
</th>
<th scope="col" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric Polaris-DataTable__Cell--header">
Price
</th>
<th scope="col" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric Polaris-DataTable__Cell--header">
SKU Number
</th>
<th scope="col" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric Polaris-DataTable__Cell--header">
Net quantity
</th>
<th scope="col" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric Polaris-DataTable__Cell--header">
Net sales
</th>
</tr>
<tr>
<th scope="row" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn Polaris-DataTable__Cell--total">
Totals
</th>
<td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric Polaris-DataTable__Cell--total">
</td>
<td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric Polaris-DataTable__Cell--total">
</td>
<td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric Polaris-DataTable__Cell--total">
255
</td>
<td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric Polaris-DataTable__Cell--total">
$155,830.00
</td>
</tr>
</thead>
<tbody>
<tr class="Polaris-DataTable__TableRow Polaris-DataTable--hoverable">
<th scope="row" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn">
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 scope="row" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn">
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 scope="row" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn">
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>
<% data = [
{ product: "Emerald Silk Gown", price: "$875.00", sku: 124689, qty: 140, sales: "$122,500.00" },
{ product: "Mauve Cashmere Scarf", price: "$230.00", sku: 124533, qty: 83, sales: "$19,090.00" },
{ product: "Navy Merino Wool Blazer with khaki chinos and yellow belt", price: "$445.00", sku: 124518, qty: 32, sales: "$14,240.00" },
] %>
<%= polaris_card do |card| %>
<% card.section do %>
<%= polaris_filters do |filters| %>
<% filters.query(
name: :query,
placeholder: "Filter items",
) %>
<% filters.item(label: "Availability", width: "150px") do %>
<%= polaris_choice_list(title_hidden: true) do |choice| %>
<% choice.checkbox(label: "Online Store", value: "online_store") %>
<% choice.checkbox(label: "Point of Sale", value: "point_of_sale") %>
<% choice.checkbox(label: "Buy Button", value: "buy_button") %>
<% end %>
<% end %>
<% end %>
<% end %>
<% card.section(unstyled: true) do %>
<%= polaris_data_table(data, totals_in_header: true) do |table| %>
<% table.column("Product", total: "Totals") do |row| %>
<%= row[:product] %>
<% end %>
<% table.column("Price", numeric: true) do |row| %>
<%= row[:price] %>
<% end %>
<% table.column("SKU Number", numeric: true) do |row| %>
<%= row[:sku] %>
<% end %>
<% table.column("Net quantity", numeric: true, total: 255) do |row| %>
<%= row[:qty] %>
<% end %>
<% table.column("Net sales", numeric: true, total: "$155,830.00") do |row| %>
<%= row[:sales] %>
<% end %>
<% end %>
<% end %>
<% end %>
No notes provided.
No params configured.