Skip to content

Commit 5fd7f43

Browse files
davebcn87davebcn87
authored
Merge pull request #3507 from Shopify/format-in-table-components
Improved Table examples
2 parents dbd2d1e + 7f58bcb commit 5fd7f43

File tree

11 files changed

+111
-51
lines changed

11 files changed

+111
-51
lines changed

‎packages/ui-extensions/src/surfaces/admin/components/Table/Table.doc.ts‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -112,8 +112,7 @@ const data: AdminReferenceEntityTemplateSchema = {
112112
title: 'Basic usage',
113113
examples: [
114114
{
115-
description:
116-
'Tables are full-width by default to utilize all available space for displaying data.',
115+
description: 'Tables expand to full width by default.',
117116
codeblock: {
118117
title: 'Basic Usage',
119118
tabs: [
@@ -132,7 +131,7 @@ const data: AdminReferenceEntityTemplateSchema = {
132131
},
133132
{
134133
description:
135-
'Demonstrates a table with pagination controls, showing how to add previous and next page functionality to handle large datasets.',
134+
'Add pagination controls for navigating large datasets.',
136135
codeblock: {
137136
title: 'With Pagination',
138137
tabs: [
@@ -150,8 +149,7 @@ const data: AdminReferenceEntityTemplateSchema = {
150149
},
151150
},
152151
{
153-
description:
154-
"Showcases the table's loading state, which can be used to indicate that data is being fetched or processed.",
152+
description: 'Display a loading state while fetching data.',
155153
codeblock: {
156154
title: 'With Loading State',
157155
tabs: [
@@ -168,8 +166,7 @@ const data: AdminReferenceEntityTemplateSchema = {
168166
},
169167
},
170168
{
171-
description:
172-
'A comprehensive example showing a full-width table with multiple columns. Tables automatically expand to fill their container width.',
169+
description: 'Display multiple columns in a full-width table.',
173170
codeblock: {
174171
title: 'Full-width table with multiple columns',
175172
tabs: [
@@ -191,17 +188,16 @@ const data: AdminReferenceEntityTemplateSchema = {
191188
},
192189
{
193190
description:
194-
'A comprehensive example demonstrating different list slot types for various header and cell configurations, showing how to use kicker, primary, secondary, inline, and labeled slots.',
191+
'Display data using the list variant with specialized slot types. List is the default variant on mobile devices.',
195192
codeblock: {
196-
title: 'Advanced Table with All List Slot Types',
193+
title: 'List Variant',
197194
tabs: [
198195
{
199-
code: './examples/advanced-table-with-all-list-slot-types.html',
196+
code: './examples/list-variant.html',
200197
language: 'html',
201198
},
202-
203199
{
204-
code: './examples/advanced-table-with-all-list-slot-types.jsx',
200+
code: './examples/list-variant.jsx',
205201
language: 'preview-jsx',
206202
layout: 'padding',
207203
},

‎packages/ui-extensions/src/surfaces/admin/components/Table/examples/default.html‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,27 @@
33
<s-table-header-row>
44
<s-table-header>Name</s-table-header>
55
<s-table-header>Email</s-table-header>
6+
<s-table-header format="numeric">Orders placed</s-table-header>
67
<s-table-header>Phone</s-table-header>
78
</s-table-header-row>
89
<s-table-body>
910
<s-table-row>
10-
<s-table-cell>John Doe</s-table-cell>
11-
<s-table-cell>[email protected]</s-table-cell>
11+
<s-table-cell>John Smith</s-table-cell>
12+
<s-table-cell>[email protected]</s-table-cell>
13+
<s-table-cell>23</s-table-cell>
1214
<s-table-cell>123-456-7890</s-table-cell>
1315
</s-table-row>
1416
<s-table-row>
15-
<s-table-cell>Jane Doe</s-table-cell>
16-
<s-table-cell>[email protected]</s-table-cell>
17-
<s-table-cell>123-456-7890</s-table-cell>
17+
<s-table-cell>Jane Johnson</s-table-cell>
18+
<s-table-cell>[email protected]</s-table-cell>
19+
<s-table-cell>15</s-table-cell>
20+
<s-table-cell>234-567-8901</s-table-cell>
1821
</s-table-row>
1922
<s-table-row>
20-
<s-table-cell>Brandon Doe</s-table-cell>
21-
<s-table-cell>[email protected]</s-table-cell>
22-
<s-table-cell>123-456-7890</s-table-cell>
23+
<s-table-cell>Brandon Williams</s-table-cell>
24+
<s-table-cell>[email protected]</s-table-cell>
25+
<s-table-cell>42</s-table-cell>
26+
<s-table-cell>345-678-9012</s-table-cell>
2327
</s-table-row>
2428
</s-table-body>
2529
</s-table>

‎packages/ui-extensions/src/surfaces/admin/components/Table/examples/default.jsx‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,28 @@
33
<s-table-header-row>
44
<s-table-header>Name</s-table-header>
55
<s-table-header>Email</s-table-header>
6+
<s-table-header format="numeric">Orders placed</s-table-header>
67
<s-table-header>Phone</s-table-header>
78
</s-table-header-row>
89
<s-table-body>
910
<s-table-row>
10-
<s-table-cell>John Doe</s-table-cell>
11-
<s-table-cell>[email protected]</s-table-cell>
11+
<s-table-cell>John Smith</s-table-cell>
12+
<s-table-cell>[email protected]</s-table-cell>
13+
<s-table-cell>23</s-table-cell>
1214
<s-table-cell>123-456-7890</s-table-cell>
1315
</s-table-row>
1416
<s-table-row>
15-
<s-table-cell>Jane Doe</s-table-cell>
16-
<s-table-cell>[email protected]</s-table-cell>
17-
<s-table-cell>123-456-7890</s-table-cell>
17+
<s-table-cell>Jane Johnson</s-table-cell>
18+
<s-table-cell>[email protected]</s-table-cell>
19+
<s-table-cell>15</s-table-cell>
20+
<s-table-cell>234-567-8901</s-table-cell>
1821
</s-table-row>
1922
<s-table-row>
20-
<s-table-cell>Brandon Doe</s-table-cell>
21-
<s-table-cell>[email protected]</s-table-cell>
22-
<s-table-cell>123-456-7890</s-table-cell>
23+
<s-table-cell>Brandon Williams</s-table-cell>
24+
<s-table-cell>[email protected]</s-table-cell>
25+
<s-table-cell>42</s-table-cell>
26+
<s-table-cell>345-678-9012</s-table-cell>
2327
</s-table-row>
2428
</s-table-body>
2529
</s-table>
26-
</s-section>
30+
</s-section>

‎packages/ui-extensions/src/surfaces/admin/components/Table/examples/full-width-product-inventory-table.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
<s-table-header listSlot="primary">Product</s-table-header>
55
<s-table-header listSlot="kicker">SKU</s-table-header>
66
<s-table-header listSlot="inline">Status</s-table-header>
7-
<s-table-header listSlot="labeled">Inventory</s-table-header>
8-
<s-table-header listSlot="labeled">Price</s-table-header>
7+
<s-table-header listSlot="labeled" format="numeric">Inventory</s-table-header>
8+
<s-table-header listSlot="labeled" format="currency">Price</s-table-header>
99
<s-table-header listSlot="labeled">Last updated</s-table-header>
1010
</s-table-header-row>
1111

‎packages/ui-extensions/src/surfaces/admin/components/Table/examples/full-width-product-inventory-table.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
<s-table-header listSlot="primary">Product</s-table-header>
55
<s-table-header listSlot="kicker">SKU</s-table-header>
66
<s-table-header listSlot="inline">Status</s-table-header>
7-
<s-table-header listSlot="labeled">Inventory</s-table-header>
8-
<s-table-header listSlot="labeled">Price</s-table-header>
7+
<s-table-header listSlot="labeled" format="numeric">Inventory</s-table-header>
8+
<s-table-header listSlot="labeled" format="currency">Price</s-table-header>
99
<s-table-header listSlot="labeled">Last updated</s-table-header>
1010
</s-table-header-row>
1111

‎packages/ui-extensions/src/surfaces/admin/components/Table/examples/advanced-table-with-all-list-slot-types.html‎ renamed to ‎packages/ui-extensions/src/surfaces/admin/components/Table/examples/list-variant.html‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,45 @@
11
<s-section padding="none">
2-
<s-table>
2+
<s-table variant="list">
33
<s-table-header-row>
44
<s-table-header listSlot="kicker">ID</s-table-header>
55
<s-table-header listSlot="primary">Customer</s-table-header>
66
<s-table-header listSlot="secondary">Email</s-table-header>
77
<s-table-header listSlot="inline">Status</s-table-header>
8-
<s-table-header listSlot="labeled">Orders</s-table-header>
9-
<s-table-header listSlot="labeled">Total spent</s-table-header>
8+
<s-table-header listSlot="labeled" format="numeric">
9+
Orders
10+
</s-table-header>
11+
<s-table-header listSlot="labeled" format="currency">
12+
Total spent
13+
</s-table-header>
1014
</s-table-header-row>
1115
<s-table-body>
1216
<s-table-row>
1317
<s-table-cell>#1001</s-table-cell>
1418
<s-table-cell>Sarah Johnson</s-table-cell>
1519
<s-table-cell>[email protected]</s-table-cell>
16-
<s-table-cell><s-badge tone="success">Active</s-badge></s-table-cell>
20+
<s-table-cell>
21+
<s-badge tone="success">Active</s-badge>
22+
</s-table-cell>
1723
<s-table-cell>23</s-table-cell>
1824
<s-table-cell>$1,245.50</s-table-cell>
1925
</s-table-row>
2026
<s-table-row>
2127
<s-table-cell>#1002</s-table-cell>
2228
<s-table-cell>Mike Chen</s-table-cell>
2329
<s-table-cell>[email protected]</s-table-cell>
24-
<s-table-cell><s-badge tone="neutral">Inactive</s-badge></s-table-cell>
30+
<s-table-cell>
31+
<s-badge tone="neutral">Inactive</s-badge>
32+
</s-table-cell>
2533
<s-table-cell>7</s-table-cell>
2634
<s-table-cell>$432.75</s-table-cell>
2735
</s-table-row>
2836
<s-table-row>
2937
<s-table-cell>#1003</s-table-cell>
3038
<s-table-cell>Emma Davis</s-table-cell>
3139
<s-table-cell>[email protected]</s-table-cell>
32-
<s-table-cell><s-badge tone="success">Active</s-badge></s-table-cell>
40+
<s-table-cell>
41+
<s-badge tone="success">Active</s-badge>
42+
</s-table-cell>
3343
<s-table-cell>15</s-table-cell>
3444
<s-table-cell>$892.25</s-table-cell>
3545
</s-table-row>

‎packages/ui-extensions/src/surfaces/admin/components/Table/examples/advanced-table-with-all-list-slot-types.jsx‎ renamed to ‎packages/ui-extensions/src/surfaces/admin/components/Table/examples/list-variant.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<s-section padding="none">
2-
<s-table>
2+
<s-table variant="list">
33
<s-table-header-row>
44
<s-table-header listSlot="kicker">ID</s-table-header>
55
<s-table-header listSlot="primary">Customer</s-table-header>
66
<s-table-header listSlot="secondary">Email</s-table-header>
77
<s-table-header listSlot="inline">Status</s-table-header>
8-
<s-table-header listSlot="labeled">Orders</s-table-header>
9-
<s-table-header listSlot="labeled">Total spent</s-table-header>
8+
<s-table-header listSlot="labeled" format="numeric">Orders</s-table-header>
9+
<s-table-header listSlot="labeled" format="currency">Total spent</s-table-header>
1010
</s-table-header-row>
1111
<s-table-body>
1212
<s-table-row>

‎packages/ui-extensions/src/surfaces/admin/components/Table/examples/with-loading-state.html‎

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,32 @@
88

99
<s-table-body>
1010
<s-table-row>
11-
<s-table-cell>Loading...</s-table-cell>
12-
<s-table-cell>Loading...</s-table-cell>
13-
<s-table-cell>Loading...</s-table-cell>
11+
<s-table-cell>Water bottle</s-table-cell>
12+
<s-table-cell>
13+
<s-badge tone="success">Active</s-badge>
14+
</s-table-cell>
15+
<s-table-cell>128</s-table-cell>
16+
</s-table-row>
17+
<s-table-row>
18+
<s-table-cell>T-shirt</s-table-cell>
19+
<s-table-cell>
20+
<s-badge tone="warning">Low stock</s-badge>
21+
</s-table-cell>
22+
<s-table-cell>15</s-table-cell>
23+
</s-table-row>
24+
<s-table-row>
25+
<s-table-cell>Cutting board</s-table-cell>
26+
<s-table-cell>
27+
<s-badge tone="critical">Out of stock</s-badge>
28+
</s-table-cell>
29+
<s-table-cell>0</s-table-cell>
30+
</s-table-row>
31+
<s-table-row>
32+
<s-table-cell>Notebook set</s-table-cell>
33+
<s-table-cell>
34+
<s-badge tone="success">Active</s-badge>
35+
</s-table-cell>
36+
<s-table-cell>245</s-table-cell>
1437
</s-table-row>
1538
</s-table-body>
1639
</s-table>

‎packages/ui-extensions/src/surfaces/admin/components/Table/examples/with-loading-state.jsx‎

Lines changed: 27 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,33 @@
88

99
<s-table-body>
1010
<s-table-row>
11-
<s-table-cell>Loading...</s-table-cell>
12-
<s-table-cell>Loading...</s-table-cell>
13-
<s-table-cell>Loading...</s-table-cell>
11+
<s-table-cell>Water bottle</s-table-cell>
12+
<s-table-cell>
13+
<s-badge tone="success">Active</s-badge>
14+
</s-table-cell>
15+
<s-table-cell>128</s-table-cell>
16+
</s-table-row>
17+
<s-table-row>
18+
<s-table-cell>T-shirt</s-table-cell>
19+
<s-table-cell>
20+
<s-badge tone="warning">Low stock</s-badge>
21+
</s-table-cell>
22+
<s-table-cell>15</s-table-cell>
23+
</s-table-row>
24+
<s-table-row>
25+
<s-table-cell>Cutting board</s-table-cell>
26+
<s-table-cell>
27+
<s-badge tone="critical">Out of stock</s-badge>
28+
</s-table-cell>
29+
<s-table-cell>0</s-table-cell>
30+
</s-table-row>
31+
<s-table-row>
32+
<s-table-cell>Notebook set</s-table-cell>
33+
<s-table-cell>
34+
<s-badge tone="success">Active</s-badge>
35+
</s-table-cell>
36+
<s-table-cell>245</s-table-cell>
1437
</s-table-row>
1538
</s-table-body>
1639
</s-table>
17-
</s-section>
40+
</s-section>

‎packages/ui-extensions/src/surfaces/admin/components/Table/examples/with-pagination.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<s-table-header-row>
44
<s-table-header listSlot="primary">Product</s-table-header>
55
<s-table-header listSlot="inline">Status</s-table-header>
6-
<s-table-header listSlot="secondary">Sales</s-table-header>
6+
<s-table-header listSlot="secondary" format="numeric">Sales</s-table-header>
77
</s-table-header-row>
88

99
<s-table-body>

0 commit comments

Comments
 (0)