Skip to content

Commit ce68d23

Browse files
amandacxzamandacxz
committed
chore(DataTable): update story
1 parent 930537f commit ce68d23

4 files changed

Lines changed: 92 additions & 27 deletions

File tree

‎docs/INSTALLATION.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ This method registers all SGDS elements up front in the Custom Elements Registry
5757
<link href='https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.24.0/css/sgds.css' rel='stylesheet' type='text/css' />
5858

5959
// it is recommended to load a particular version when using cdn e.g. https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@1.0.2
60-
<script src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.24.0" async crossorigin="anonymous" integrity="sha384-zhdJP6tQnIxGkXmydDp615RiWzR+OaE6QI0xm++AXMr7e2h3xdfnamHxjMkbhPbe"></script>
60+
<script src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.24.0" async crossorigin="anonymous" integrity="sha384-GH1R75sn3/WZ6sUl4w9bx4ZwBk94unL5t1Hv4FfYUgwmDAq94RqDveUcRk5W6PDX"></script>
6161

6262
//or load a single component e.g. Masthead
6363
<script src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.24.0/components/Masthead/index.umd.min.js" async crossorigin="anonymous" integrity="sha384-vvllpLfJY3jG+vowUWZOJHnvtDTTdaSUOYGbiozHEq4+HESmYu0i/b2r616QoDly"></script>

‎stories/component-templates/DataTable/additional.mdx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ The header checkbox state is computed on load and shows indeterminate or checked
4747

4848
Set `expand` on a row and provide content in the `content` slot.
4949
Set `open` if a row should start expanded.
50+
This example uses static `sgds-table` samples inside expandable content, showing three rows in the first expandable section and two rows in the second.
5051

5152
<Canvas of={DataTableStories.ExpandableRows}>
5253
<Story of={DataTableStories.ExpandableRows} />

‎stories/component-templates/DataTable/additional.stories.js‎

Lines changed: 71 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -97,14 +97,78 @@ const ExpandableRowsTemplate = () => html`
9797
<sgds-data-table-cell>John</sgds-data-table-cell>
9898
<sgds-data-table-cell>Doe</sgds-data-table-cell>
9999
<sgds-data-table-cell>@johndoe</sgds-data-table-cell>
100-
<div slot="content">Department: Engineering · Join date: 01 Jan 2022 · Status: Active</div>
100+
<div slot="content">
101+
<div style="border-radius: var(--sgds-border-radius-sm);">
102+
<sgds-table>
103+
<sgds-table-row>
104+
<sgds-table-head>Case ID</sgds-table-head>
105+
<sgds-table-head>Owner</sgds-table-head>
106+
<sgds-table-head>Category</sgds-table-head>
107+
<sgds-table-head>Amount</sgds-table-head>
108+
<sgds-table-head>Status</sgds-table-head>
109+
</sgds-table-row>
110+
111+
<sgds-table-row>
112+
<sgds-table-cell>OPS-2026-001</sgds-table-cell>
113+
<sgds-table-cell>Amy Tan</sgds-table-cell>
114+
<sgds-table-cell><sgds-badge variant="info" outlined>Operations</sgds-badge></sgds-table-cell>
115+
<sgds-table-cell>12,450.00</sgds-table-cell>
116+
<sgds-table-cell><sgds-badge variant="warning" outlined>Review</sgds-badge></sgds-table-cell>
117+
</sgds-table-row>
118+
119+
<sgds-table-row>
120+
<sgds-table-cell>FIN-2026-014</sgds-table-cell>
121+
<sgds-table-cell>Ben Ho</sgds-table-cell>
122+
<sgds-table-cell><sgds-badge variant="purple" outlined>Finance</sgds-badge></sgds-table-cell>
123+
<sgds-table-cell>3,180.00</sgds-table-cell>
124+
<sgds-table-cell><sgds-badge variant="success" outlined>Approved</sgds-badge></sgds-table-cell>
125+
</sgds-table-row>
126+
127+
<sgds-table-row>
128+
<sgds-table-cell>SEC-2026-007</sgds-table-cell>
129+
<sgds-table-cell>Cara Lim</sgds-table-cell>
130+
<sgds-table-cell><sgds-badge variant="danger" outlined>Security</sgds-badge></sgds-table-cell>
131+
<sgds-table-cell>28,900.00</sgds-table-cell>
132+
<sgds-table-cell><sgds-badge variant="danger" outlined>Escalated</sgds-badge></sgds-table-cell>
133+
</sgds-table-row>
134+
</sgds-table>
135+
</div>
136+
</div>
101137
</sgds-data-table-row>
102138
<sgds-data-table-row .expand=${true}>
103139
<sgds-data-table-cell>2</sgds-data-table-cell>
104140
<sgds-data-table-cell>Jane</sgds-data-table-cell>
105141
<sgds-data-table-cell>Doe</sgds-data-table-cell>
106142
<sgds-data-table-cell>@janedoe</sgds-data-table-cell>
107-
<div slot="content">Department: Design · Join date: 15 Mar 2023 · Status: Active</div>
143+
<div slot="content">
144+
<div style="border-radius: var(--sgds-border-radius-sm);">
145+
<sgds-table>
146+
<sgds-table-row>
147+
<sgds-table-head>Case ID</sgds-table-head>
148+
<sgds-table-head>Owner</sgds-table-head>
149+
<sgds-table-head>Category</sgds-table-head>
150+
<sgds-table-head>Amount</sgds-table-head>
151+
<sgds-table-head>Status</sgds-table-head>
152+
</sgds-table-row>
153+
154+
<sgds-table-row>
155+
<sgds-table-cell>OPS-2026-019</sgds-table-cell>
156+
<sgds-table-cell>Faye Low</sgds-table-cell>
157+
<sgds-table-cell><sgds-badge variant="info" outlined>Design</sgds-badge></sgds-table-cell>
158+
<sgds-table-cell>4,560.00</sgds-table-cell>
159+
<sgds-table-cell><sgds-badge variant="warning" outlined>In Review</sgds-badge></sgds-table-cell>
160+
</sgds-table-row>
161+
162+
<sgds-table-row>
163+
<sgds-table-cell>OPS-2026-021</sgds-table-cell>
164+
<sgds-table-cell>Glen Neo</sgds-table-cell>
165+
<sgds-table-cell><sgds-badge variant="primary" outlined>Operations</sgds-badge></sgds-table-cell>
166+
<sgds-table-cell>2,330.00</sgds-table-cell>
167+
<sgds-table-cell><sgds-badge variant="success" outlined>Completed</sgds-badge></sgds-table-cell>
168+
</sgds-table-row>
169+
</sgds-table>
170+
</div>
171+
</div>
108172
</sgds-data-table-row>
109173
<sgds-data-table-row>
110174
<sgds-data-table-cell>3</sgds-data-table-cell>
@@ -128,7 +192,9 @@ const ExpandableMultiSelectTemplate = () => html`
128192
<sgds-data-table-cell>John</sgds-data-table-cell>
129193
<sgds-data-table-cell>Doe</sgds-data-table-cell>
130194
<sgds-data-table-cell>@johndoe</sgds-data-table-cell>
131-
<div slot="content">Department: Engineering</div>
195+
<div slot="content">
196+
<div style="border-radius: var(--sgds-border-radius-sm);">Department: Engineering</div>
197+
</div>
132198
</sgds-data-table-row>
133199
<sgds-data-table-row>
134200
<sgds-data-table-cell>2</sgds-data-table-cell>
@@ -199,10 +265,10 @@ const HideFooterTemplate = () => html`
199265
const HeaderAndCellPropsTemplate = () => html`
200266
<sgds-data-table layout="fixed" .currentPage=${1} .dataLength=${4} .itemsPerPage=${4}>
201267
<sgds-data-table-row>
202-
<sgds-data-table-head width="88">ID</sgds-data-table-head>
268+
<sgds-data-table-head>ID</sgds-data-table-head>
203269
<sgds-data-table-head sorting sortKey="name">Name</sgds-data-table-head>
204270
<sgds-data-table-head>Role</sgds-data-table-head>
205-
<sgds-data-table-head sorting sortKey="score" width="120" textAlign="right">Score</sgds-data-table-head>
271+
<sgds-data-table-head sorting sortKey="score" textAlign="right">Score</sgds-data-table-head>
206272
</sgds-data-table-row>
207273
<sgds-data-table-row>
208274
<sgds-data-table-cell>1</sgds-data-table-cell>

‎stories/component-templates/DataTable/basic.js‎

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
import { html } from "lit";
22

33
const sampleRows = [
4-
{ id: 1, name: "Amy", status: "Active" },
5-
{ id: 2, name: "Ben", status: "Pending" },
6-
{ id: 3, name: "Cara", status: "Inactive" },
7-
{ id: 4, name: "Dan", status: "Active" },
8-
{ id: 5, name: "Eli", status: "Pending" },
9-
{ id: 6, name: "Faye", status: "Inactive" },
10-
{ id: 7, name: "Gabe", status: "Active" },
11-
{ id: 8, name: "Hana", status: "Pending" },
12-
{ id: 9, name: "Ivan", status: "Inactive" },
13-
{ id: 10, name: "Jade", status: "Active" },
14-
{ id: 11, name: "Kai", status: "Pending" },
15-
{ id: 12, name: "Lena", status: "Inactive" },
16-
{ id: 13, name: "Milo", status: "Active" },
17-
{ id: 14, name: "Nora", status: "Pending" },
18-
{ id: 15, name: "Owen", status: "Inactive" }
4+
{ id: 1, name: "Amy", status: "Active", age: 28 },
5+
{ id: 2, name: "Ben", status: "Pending", age: 35 },
6+
{ id: 3, name: "Cara", status: "Inactive", age: 31 },
7+
{ id: 4, name: "Dan", status: "Active", age: 26 },
8+
{ id: 5, name: "Eli", status: "Pending", age: 40 },
9+
{ id: 6, name: "Faye", status: "Inactive", age: 29 },
10+
{ id: 7, name: "Gabe", status: "Active", age: 33 },
11+
{ id: 8, name: "Hana", status: "Pending", age: 24 },
12+
{ id: 9, name: "Ivan", status: "Inactive", age: 37 },
13+
{ id: 10, name: "Jade", status: "Active", age: 27 },
14+
{ id: 11, name: "Kai", status: "Pending", age: 30 },
15+
{ id: 12, name: "Lena", status: "Inactive", age: 38 },
16+
{ id: 13, name: "Milo", status: "Active", age: 25 },
17+
{ id: 14, name: "Nora", status: "Pending", age: 34 },
18+
{ id: 15, name: "Owen", status: "Inactive", age: 32 }
1919
];
2020

2121
export const Template = args => html`
@@ -33,9 +33,9 @@ export const Template = args => html`
3333
<sgds-data-table-row>
3434
<sgds-data-table-head .sorting=${false}>#</sgds-data-table-head>
3535
<sgds-data-table-head .sorting=${false}>Name</sgds-data-table-head>
36-
<sgds-data-table-head .sorting=${false}>Status</sgds-data-table-head>
37-
<sgds-data-table-head .sorting=${false}>Button (sm)</sgds-data-table-head>
38-
<sgds-data-table-head .sorting=${false}>Overflow</sgds-data-table-head>
36+
<sgds-data-table-head .sorting=${true}>Status</sgds-data-table-head>
37+
<sgds-data-table-head .sorting=${false}>Age</sgds-data-table-head>
38+
<sgds-data-table-head .sorting=${false}>Action</sgds-data-table-head>
3939
</sgds-data-table-row>
4040
${sampleRows.map(
4141
row => html`
@@ -49,9 +49,7 @@ export const Template = args => html`
4949
? html`<sgds-badge variant="warning" outlined>${row.status}</sgds-badge>`
5050
: html`<sgds-badge variant="neutral" outlined>${row.status}</sgds-badge>`}
5151
</sgds-data-table-cell>
52-
<sgds-data-table-cell>
53-
<sgds-button size="sm" variant="outline">View</sgds-button>
54-
</sgds-data-table-cell>
52+
<sgds-data-table-cell> ${row.age} </sgds-data-table-cell>
5553
<sgds-data-table-cell>
5654
<sgds-overflow-menu size="sm">
5755
<sgds-dropdown-item ariaLabel="View">View</sgds-dropdown-item>

0 commit comments

Comments
 (0)