Skip to content

Commit 1d8c033

Browse files
author
shleewhite
committed
feat: add sticky header, nested examples
1 parent e1d48e2 commit 1d8c033

File tree

3 files changed

+321
-2
lines changed

3 files changed

+321
-2
lines changed

‎website/app/styles/pages/components/advanced-table.scss

+5
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@
1010
overflow-x: auto;
1111
}
1212

13+
.doc-advanced-table-vertical-scrollable-wrapper {
14+
max-height: 500px;
15+
overflow-y: auto;
16+
}
17+
1318
.doc-advanced-table-multiselect-with-pagination-demo {
1419
.hds-advanced-table + .hds-pagination {
1520
margin-top: 16px;

‎website/docs/components/table/advanced-table/index.js

+236
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,242 @@ export default class Index extends Component {
157157
},
158158
];
159159
}
160+
161+
get demoDataWithNestedRows() {
162+
return [
163+
{
164+
"id": 1,
165+
"name": "Policy set 1",
166+
"status": "PASS",
167+
"description": "",
168+
"children": [
169+
{
170+
"id": 11,
171+
"name": "test-advisory-pass.sentinel",
172+
"status": "PASS",
173+
"description": "Sample description for this thing."
174+
},
175+
{
176+
"id": 12,
177+
"name": "test-hard-mandatory-pass.sentinel",
178+
"status": "PASS",
179+
"description": "Sample description for this thing."
180+
}
181+
]
182+
},
183+
{
184+
"id": 2,
185+
"name": "Policy set 2",
186+
"status": "FAIL",
187+
"description": "",
188+
"children": [
189+
{
190+
"id": 21,
191+
"name": "test-advisory-pass.sentinel",
192+
"status": "PASS",
193+
"description": "Sample description for this thing.",
194+
},
195+
{
196+
"id": 22,
197+
"name": "test-hard-mandatory-pass.sentinel",
198+
"status": "FAIL",
199+
"description": "Sample description for this thing."
200+
}
201+
]
202+
}
203+
];
204+
}
205+
206+
get demoDataWithLargeNumberOfRows() {
207+
return [
208+
{
209+
"id": 1,
210+
"name": "Burnaby Kuscha",
211+
"email": "1_bkuscha0@tiny.cc",
212+
"role": "Owner"
213+
},
214+
{
215+
"id": 2,
216+
"name": "Barton Penley",
217+
"email": "2_bpenley1@miibeian.gov.cn",
218+
"role": "Admin"
219+
},
220+
{
221+
"id": 3,
222+
"name": "Norina Emanulsson",
223+
"email": "3_nemanulsson2@walmart.com",
224+
"role": "Contributor"
225+
},
226+
{
227+
"id": 4,
228+
"name": "Orbadiah Smales",
229+
"email": "4_osmales3@amazon.co.jp",
230+
"role": "Contributor"
231+
},
232+
{
233+
"id": 5,
234+
"name": "Dido Titchener",
235+
"email": "5_dtitchener4@blogs.com",
236+
"role": "Contributor"
237+
},
238+
{
239+
"id": 6,
240+
"name": "Trish Horsburgh",
241+
"email": "6_thorsburgh5@samsung.com",
242+
"role": "Contributor"
243+
},
244+
{
245+
"id": 7,
246+
"name": "Orion Laverack",
247+
"email": "7_olaverack6@techcrunch.com",
248+
"role": "Contributor"
249+
},
250+
{
251+
"id": 8,
252+
"name": "Delly Moulsdale",
253+
"email": "8_dmoulsdale7@sciencedirect.com",
254+
"role": "Contributor"
255+
},
256+
{
257+
"id": 9,
258+
"name": "Gil Carlyle",
259+
"email": "9_gcarlyle8@canalblog.com",
260+
"role": "Contributor"
261+
},
262+
{
263+
"id": 10,
264+
"name": "Marinna Corbin",
265+
"email": "10_mcorbin9@google.ca",
266+
"role": "Contributor"
267+
},
268+
{
269+
"id": 11,
270+
"name": "Yardley Entwhistle",
271+
"email": "11_yentwhistlea@tumblr.com",
272+
"role": "Contributor"
273+
},
274+
{
275+
"id": 12,
276+
"name": "Brinn Clack",
277+
"email": "12_bclackb@blogger.com",
278+
"role": "Contributor"
279+
},
280+
{
281+
"id": 13,
282+
"name": "Charleen Millen",
283+
"email": "13_cmillenc@mtv.com",
284+
"role": "Contributor"
285+
},
286+
{
287+
"id": 14,
288+
"name": "Kalie Piers",
289+
"email": "14_kpiersd@businessweek.com",
290+
"role": "Contributor"
291+
},
292+
{
293+
"id": 15,
294+
"name": "Laure Boxer",
295+
"email": "15_lboxere@elegantthemes.com",
296+
"role": "Contributor"
297+
},
298+
{
299+
"id": 16,
300+
"name": "Libby Bonallack",
301+
"email": "16_lbonallackf@disqus.com",
302+
"role": "Contributor"
303+
},
304+
{
305+
"id": 17,
306+
"name": "Zebedee Gofton",
307+
"email": "17_zgoftong@bbc.co.uk",
308+
"role": "Contributor"
309+
},
310+
{
311+
"id": 18,
312+
"name": "Sari Eckford",
313+
"email": "18_seckfordh@cloudflare.com",
314+
"role": "Contributor"
315+
},
316+
{
317+
"id": 19,
318+
"name": "Carlos Byrth",
319+
"email": "19_cbyrthi@prlog.org",
320+
"role": "Contributor"
321+
},
322+
{
323+
"id": 20,
324+
"name": "Avery Allmark",
325+
"email": "20_aallmarkj@webnode.com",
326+
"role": "Contributor"
327+
},
328+
{
329+
"id": 21,
330+
"name": "Ninnette McSpirron",
331+
"email": "21_nmcspirronk@amazon.com",
332+
"role": "Contributor"
333+
},
334+
{
335+
"id": 22,
336+
"name": "Sharlene Ewestace",
337+
"email": "22_sewestacel@twitpic.com",
338+
"role": "Contributor"
339+
},
340+
{
341+
"id": 23,
342+
"name": "Jessamine Kembry",
343+
"email": "23_jkembrym@hatena.ne.jp",
344+
"role": "Contributor"
345+
},
346+
{
347+
"id": 24,
348+
"name": "Homerus Dixcee",
349+
"email": "24_hdixceen@deviantart.com",
350+
"role": "Contributor"
351+
},
352+
{
353+
"id": 25,
354+
"name": "Clevie Clear",
355+
"email": "25_cclearo@tmall.com",
356+
"role": "Contributor"
357+
},
358+
{
359+
"id": 26,
360+
"name": "Mohammed Hubatsch",
361+
"email": "26_mhubatschp@salon.com",
362+
"role": "Contributor"
363+
},
364+
{
365+
"id": 27,
366+
"name": "Gigi Hovard",
367+
"email": "27_ghovardq@cbslocal.com",
368+
"role": "Contributor"
369+
},
370+
{
371+
"id": 28,
372+
"name": "Dorey Tinker",
373+
"email": "28_dtinkerr@google.co.uk",
374+
"role": "Contributor"
375+
},
376+
{
377+
"id": 29,
378+
"name": "Arel Mullarkey",
379+
"email": "29_amullarkeys@blogs.com",
380+
"role": "Contributor"
381+
},
382+
{
383+
"id": 30,
384+
"name": "Veronike Ventura",
385+
"email": "30_vventurat@google.fr",
386+
"role": "Contributor"
387+
},
388+
{
389+
"id": 31,
390+
"name": "Gerti Dranfield",
391+
"email": "31_gdranfieldu@vistaprint.com",
392+
"role": "Contributor"
393+
},
394+
]
395+
}
160396

161397
get demoPaginatedData() {
162398
const start = (this.demoCurrentPage - 1) * this.demoCurrentPageSize;

‎website/docs/components/table/advanced-table/partials/code/how-to-use.md

+80-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
## How to use this component
22

3-
### Non-sortable Advanced Table
3+
The Advanced Table is a component meant to display tabular data to overcome limitations with the HTML `<table>` elements and increase the accessibility for complex features, like nested rows and [a sticky header](#vertical-scrolling).
4+
5+
Instead of using the `<table>` elements, the Advanced Table uses `<div>`s with explicitly set roles (for example, instead of `<tr>`, it uses `<div role="row">`). This allows the Advanced Table to use [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/grid) for styling.
6+
7+
### Basic Advanced Table
48

59
To use an Advanced Table, first define the data model in your route or model:
610

@@ -65,6 +69,43 @@ For clarity, there are a couple of important points to note here:
6569

6670
!!!
6771

72+
### Nested rows
73+
For complex data sets where there is a parent row with several children, you can render them as nested rows. By default, the Advanced Table uses the `children` key on the `@model` argument to render the nested rows. To change the key used, set the `@childrenKey` argument on the Advanced Table.
74+
75+
To ensure the Advanced Table is accessible, the columns in the nested rows **must** match the columns of the parent rows. Otherwise the relationship between the parent and nested rows will not be clear to users.
76+
77+
!!! Warning
78+
79+
It is not currently supported to have `@isStriped`, `@isSelectable`, or sortable columns with nested rows. If your use case requires any of these features, please [contact the Design Systems Team](/about/support).
80+
81+
!!!
82+
83+
```handlebars
84+
<Hds::AdvancedTable
85+
@model={{this.demoDataWithNestedRows}}
86+
@columns={{array
87+
(hash key="name" label="Name")
88+
(hash key="status" label="Status")
89+
(hash key="description" label="Description")
90+
}}
91+
>
92+
<:body as |B|>
93+
<B.Tr>
94+
<B.Th>{{B.data.name}}</B.Th>
95+
<B.Td>
96+
{{#if (eq B.data.status "FAIL")}}
97+
<Hds::Badge @text="Fail" @color="critical" @icon="x" />
98+
{{else}}
99+
<Hds::Badge @text="Pass" @color="success" @icon="check" />
100+
{{/if}}
101+
</B.Td>
102+
<B.Td>{{B.data.description}}</B.Td>
103+
</B.Tr>
104+
</:body>
105+
</Hds::AdvancedTable>
106+
```
107+
108+
68109
### Sortable Advanced Table
69110

70111
!!! Info
@@ -75,6 +116,12 @@ This component takes advantage of the `sort-by` helper provided by [ember-compos
75116

76117
Add `isSortable=true` to the hash for each column that should be sortable.
77118

119+
!!! Warning
120+
121+
At this time, the Advanced Table does not support sortable nested rows. If this is a use case you require, contact the Design System team.
122+
123+
!!!
124+
78125
```handlebars
79126
<Hds::AdvancedTable
80127
@model={{this.model.myDemoData}}
@@ -294,7 +341,38 @@ Consuming a large amount of data in a tabular format can lead to an intense cogn
294341

295342
We recommend using functionalities like [pagination](/components/pagination), [sorting](/components/table/advanced-table?tab=code#sortable-table), and [filtering](/patterns/filter-patterns) to reduce this load.
296343

297-
That said, there may be cases when it’s necessary to show an Advanced Table with a large number of columns and allow the user to scroll horizontally. In this case the consumer can place the Advanced Table inside a container with `overflow: auto`.
344+
#### Vertical scrolling
345+
346+
For situations where the default number of rows visible may be high, it can be difficult for users to track which column is which once they scroll. In this case, the `hasStickyHeader` argument can be used to make the column headers persist as the user scrolls.
347+
348+
```handlebars
349+
<!-- this is an element with "overflow: auto" and "max-height: 500px" -->
350+
<div class="doc-advanced-table-vertical-scrollable-wrapper">
351+
<Hds::AdvancedTable
352+
@model={{this.demoDataWithLargeNumberOfRows}}
353+
@columns={{array
354+
(hash key="id" label="ID")
355+
(hash key="name" label="Name" isSortable=true)
356+
(hash key="email" label="Email")
357+
(hash key="role" label="Role" isSortable=true)
358+
}}
359+
@hasStickyHeader={{true}}
360+
>
361+
<:body as |B|>
362+
<B.Tr>
363+
<B.Td>{{B.data.id}}</B.Td>
364+
<B.Td>{{B.data.name}}</B.Td>
365+
<B.Td>{{B.data.email}}</B.Td>
366+
<B.Td>{{B.data.role}}</B.Td>
367+
</B.Tr>
368+
</:body>
369+
</Hds::AdvancedTable>
370+
</div>
371+
```
372+
373+
#### Horizontal scrolling
374+
375+
There may be cases when it’s necessary to show an Advanced Table with a large number of columns and allow the user to scroll horizontally. In this case the consumer can place the Advanced Table inside a container with `overflow: auto`.
298376

299377
```handlebars
300378
<!-- this is an element with "overflow: auto" -->

0 commit comments

Comments
 (0)