Skip to content

Commit 96b94b6

Browse files
shleewhiteshleewhite
authored
AdvancedTable: create component (#2615)
1 parent f3eed40 commit 96b94b6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+7010
-1
lines changed

‎.changeset/strange-wolves-press.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"@hashicorp/design-system-components": minor
3+
---
4+
5+
`AdvancedTable` - Added `AdvancedTable` component and related sub-components
6+
7+
Add `tabbable` as a dependency.

‎packages/components/package.json

+12
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@
6969
"luxon": "^2.3.2 || ^3.4.2",
7070
"prismjs": "^1.29.0",
7171
"sass": "^1.83.0",
72+
"tabbable": "^6.2.0",
7273
"tippy.js": "^6.3.7"
7374
},
7475
"devDependencies": {
@@ -133,6 +134,17 @@
133134
"./components/hds/accordion/index.js": "./dist/_app_/components/hds/accordion/index.js",
134135
"./components/hds/accordion/item/button.js": "./dist/_app_/components/hds/accordion/item/button.js",
135136
"./components/hds/accordion/item/index.js": "./dist/_app_/components/hds/accordion/item/index.js",
137+
"./components/hds/advanced-table/expandable-tr-group.js": "./dist/_app_/components/hds/advanced-table/expandable-tr-group.js",
138+
"./components/hds/advanced-table/helpers.js": "./dist/_app_/components/hds/advanced-table/helpers.js",
139+
"./components/hds/advanced-table/index.js": "./dist/_app_/components/hds/advanced-table/index.js",
140+
"./components/hds/advanced-table/td.js": "./dist/_app_/components/hds/advanced-table/td.js",
141+
"./components/hds/advanced-table/th-button-expand.js": "./dist/_app_/components/hds/advanced-table/th-button-expand.js",
142+
"./components/hds/advanced-table/th-button-sort.js": "./dist/_app_/components/hds/advanced-table/th-button-sort.js",
143+
"./components/hds/advanced-table/th-button-tooltip.js": "./dist/_app_/components/hds/advanced-table/th-button-tooltip.js",
144+
"./components/hds/advanced-table/th-selectable.js": "./dist/_app_/components/hds/advanced-table/th-selectable.js",
145+
"./components/hds/advanced-table/th-sort.js": "./dist/_app_/components/hds/advanced-table/th-sort.js",
146+
"./components/hds/advanced-table/th.js": "./dist/_app_/components/hds/advanced-table/th.js",
147+
"./components/hds/advanced-table/tr.js": "./dist/_app_/components/hds/advanced-table/tr.js",
136148
"./components/hds/alert/description.js": "./dist/_app_/components/hds/alert/description.js",
137149
"./components/hds/alert/index.js": "./dist/_app_/components/hds/alert/index.js",
138150
"./components/hds/alert/title.js": "./dist/_app_/components/hds/alert/title.js",

‎packages/components/src/components.ts

+13
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,19 @@ export { default as HdsAccordion } from './components/hds/accordion/index.ts';
1414
export { default as HdsAccordionItem } from './components/hds/accordion/item/index.ts';
1515
export * from './components/hds/accordion/types.ts';
1616

17+
// Advanced Table
18+
export { default as HdsAdvancedTable } from './components/hds/advanced-table/index.ts';
19+
export { default as HdsAdvancedTableTd } from './components/hds/advanced-table/td.ts';
20+
export { default as HdsAdvancedTableTh } from './components/hds/advanced-table/th.ts';
21+
export { default as HdsAdvancedTableThButtonSort } from './components/hds/advanced-table/th-button-sort.ts';
22+
export { default as HdsAdvancedTableThButtonTooltip } from './components/hds/advanced-table/th-button-tooltip.ts';
23+
export { default as HdsAdvancedTableThSelectable } from './components/hds/advanced-table/th-selectable.ts';
24+
export { default as HdsAdvancedTableThSort } from './components/hds/advanced-table/th-sort.ts';
25+
export { default as HdsAdvancedTableTr } from './components/hds/advanced-table/tr.ts';
26+
export { default as HdsAdvancedTableThButtonExpand } from './components/hds/advanced-table/th-button-expand.ts';
27+
export { default as HdsAdvancedTableExpandableTrGroup } from './components/hds/advanced-table/expandable-tr-group.ts';
28+
export * from './components/hds/advanced-table/types.ts';
29+
1730
// Alert
1831
export { default as HdsAlert } from './components/hds/alert/index.ts';
1932
export { default as HdsAlertDescription } from './components/hds/alert/description.ts';

‎packages/components/src/components/hds/advanced-table/expandable-tr-group.hbs

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{{!
2+
Copyright (c) HashiCorp, Inc.
3+
SPDX-License-Identifier: MPL-2.0
4+
}}
5+
{{yield
6+
(hash
7+
data=@record
8+
isExpandable=this.hasChildren
9+
id=this._id
10+
depth=this.depth
11+
onClickToggle=this.onClickToggle
12+
isExpanded=this._isExpanded
13+
parentId=@parentId
14+
rowIndex=this.rowIndex
15+
)
16+
}}
17+
{{#if (and this.hasChildren this._isExpanded)}}
18+
{{#each this.children as |childRecord|}}
19+
<Hds::AdvancedTable::ExpandableTrGroup
20+
@record={{childRecord}}
21+
@depth={{this.childrenDepth}}
22+
@align={{@align}}
23+
@parentId={{this._id}}
24+
@childrenKey={{this.childrenKey}}
25+
@rowIndex="{{this.rowIndex}}.{{this.childrenDepth}}"
26+
as |T|
27+
>
28+
{{yield
29+
(hash
30+
data=T.data
31+
isExpandable=T.isExpandable
32+
depth=T.depth
33+
onClickToggle=T.onClickToggle
34+
isExpanded=T.isExpanded
35+
parentId=T.parentId
36+
id=T.id
37+
)
38+
}}
39+
</Hds::AdvancedTable::ExpandableTrGroup>
40+
{{/each}}
41+
{{/if}}

‎packages/components/src/components/hds/advanced-table/expandable-tr-group.ts

+97
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
import Component from '@glimmer/component';
6+
import { guidFor } from '@ember/object/internals';
7+
import { tracked } from '@glimmer/tracking';
8+
import { action } from '@ember/object';
9+
10+
import type { HdsAdvancedTableHorizontalAlignment } from './types.ts';
11+
export interface HdsAdvancedTableExpandableTrGroupSignature {
12+
Args: {
13+
align?: HdsAdvancedTableHorizontalAlignment;
14+
depth?: number;
15+
record: Record<string, unknown>;
16+
parentId?: string;
17+
childrenKey?: string;
18+
rowIndex: number | string;
19+
};
20+
Blocks: {
21+
default?: [
22+
{
23+
data: Record<string, unknown>;
24+
isExpandable: boolean;
25+
id?: string;
26+
parentId?: string;
27+
depth: number;
28+
onClickToggle?: () => void;
29+
isExpanded?: boolean;
30+
rowIndex?: string;
31+
},
32+
];
33+
};
34+
Element: HTMLDivElement;
35+
}
36+
37+
export default class HdsAdvancedTableExpandableTrGroup extends Component<HdsAdvancedTableExpandableTrGroupSignature> {
38+
@tracked private _isExpanded = false;
39+
40+
private _id = guidFor(this);
41+
42+
constructor(
43+
owner: unknown,
44+
args: HdsAdvancedTableExpandableTrGroupSignature['Args']
45+
) {
46+
super(owner, args);
47+
48+
this._isExpanded =
49+
this.args.record['isOpen'] &&
50+
typeof this.args.record['isOpen'] === 'boolean'
51+
? this.args.record['isOpen']
52+
: false;
53+
}
54+
55+
get childrenKey(): string {
56+
const { childrenKey = 'children' } = this.args;
57+
58+
return childrenKey;
59+
}
60+
61+
get children(): Array<Record<string, unknown>> | undefined {
62+
const { record } = this.args;
63+
64+
if (record[this.childrenKey]) {
65+
const children = record[this.childrenKey];
66+
67+
if (Array.isArray(children)) {
68+
return children;
69+
}
70+
}
71+
return undefined;
72+
}
73+
74+
get hasChildren(): boolean {
75+
if (!this.children) return false;
76+
return true;
77+
}
78+
79+
get depth(): number {
80+
const { depth = 0 } = this.args;
81+
82+
return depth;
83+
}
84+
85+
get rowIndex(): string {
86+
const { rowIndex } = this.args;
87+
return `${rowIndex}`;
88+
}
89+
90+
get childrenDepth(): number {
91+
return this.depth + 1;
92+
}
93+
94+
@action onClickToggle() {
95+
this._isExpanded = !this._isExpanded;
96+
}
97+
}

0 commit comments

Comments
 (0)