Skip to content

Commit d8e09fb

Browse files
zamoorezamoore
authored
AdvancedTable - Column resizing (#2849)
1 parent a47a1ac commit d8e09fb

File tree

26 files changed

+2034
-181
lines changed

26 files changed

+2034
-181
lines changed

‎.changeset/chilly-cheetahs-rescue.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"@hashicorp/design-system-components": minor
3+
---
4+
5+
Added `ember-math-helpers` dependency.
6+
7+
`AdvancedTable` - Added `hasResizableColumns` argument. When `true`, allows the table's columns to be resized with both a click-and-drag and a keyboard interface.

‎packages/components/package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,7 @@
9797
"concurrently": "^9.1.2",
9898
"ember-basic-dropdown": "^8.6.1",
9999
"ember-source": "^6.4.0",
100+
"ember-math-helpers": "^5.0.0",
100101
"ember-template-lint": "^7.0.2",
101102
"ember-template-lint-plugin-prettier": "^5.0.0",
102103
"eslint": "^9.23.0",
@@ -139,12 +140,15 @@
139140
"./components/hds/accordion/item/index.js": "./dist/_app_/components/hds/accordion/item/index.js",
140141
"./components/hds/advanced-table/expandable-tr-group.js": "./dist/_app_/components/hds/advanced-table/expandable-tr-group.js",
141142
"./components/hds/advanced-table/index.js": "./dist/_app_/components/hds/advanced-table/index.js",
143+
"./components/hds/advanced-table/models/column.js": "./dist/_app_/components/hds/advanced-table/models/column.js",
142144
"./components/hds/advanced-table/models/row.js": "./dist/_app_/components/hds/advanced-table/models/row.js",
143145
"./components/hds/advanced-table/models/table.js": "./dist/_app_/components/hds/advanced-table/models/table.js",
144146
"./components/hds/advanced-table/td.js": "./dist/_app_/components/hds/advanced-table/td.js",
145147
"./components/hds/advanced-table/th-button-expand.js": "./dist/_app_/components/hds/advanced-table/th-button-expand.js",
146148
"./components/hds/advanced-table/th-button-sort.js": "./dist/_app_/components/hds/advanced-table/th-button-sort.js",
147149
"./components/hds/advanced-table/th-button-tooltip.js": "./dist/_app_/components/hds/advanced-table/th-button-tooltip.js",
150+
"./components/hds/advanced-table/th-context-menu.js": "./dist/_app_/components/hds/advanced-table/th-context-menu.js",
151+
"./components/hds/advanced-table/th-resize-handle.js": "./dist/_app_/components/hds/advanced-table/th-resize-handle.js",
148152
"./components/hds/advanced-table/th-selectable.js": "./dist/_app_/components/hds/advanced-table/th-selectable.js",
149153
"./components/hds/advanced-table/th-sort.js": "./dist/_app_/components/hds/advanced-table/th-sort.js",
150154
"./components/hds/advanced-table/th.js": "./dist/_app_/components/hds/advanced-table/th.js",

‎packages/components/src/components/hds/advanced-table/index.hbs‎

Lines changed: 29 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<div
66
class="hds-advanced-table__container
77
{{(if this.isStickyHeaderPinned 'hds-advanced-table__container--header-is-pinned')}}"
8-
{{this._didUpdateModel}}
8+
{{did-update this.setupTableModelData @columns @model @sortBy @sortOrder}}
99
...attributes
1010
>
1111
{{! Caption }}
@@ -30,8 +30,8 @@
3030
<div class={{this.theadClassNames}} role="rowgroup" {{this._setUpThead}}>
3131
<Hds::AdvancedTable::Tr
3232
@selectionScope="col"
33-
@onClickSortBySelected={{if @selectableColumnKey (fn this.setSortBy @selectableColumnKey)}}
34-
@sortBySelectedOrder={{if (eq this._sortBy @selectableColumnKey) this._sortOrder}}
33+
@onClickSortBySelected={{if @selectableColumnKey (fn this._tableModel.setSortBy @selectableColumnKey)}}
34+
@sortBySelectedOrder={{if (eq this._tableModel.sortBy @selectableColumnKey) this._tableModel.sortOrder}}
3535
@isSelectable={{this.isSelectable}}
3636
@onSelectionChange={{this.onSelectionAllChange}}
3737
@didInsert={{this.didInsertSelectAllCheckbox}}
@@ -40,29 +40,45 @@
4040
@hasStickyColumn={{@hasStickyFirstColumn}}
4141
@isStickyColumnPinned={{this.isStickyColumnPinned}}
4242
>
43-
{{#each @columns as |column index|}}
43+
{{#each this._tableModel.columns as |column index|}}
4444
{{#if column.isSortable}}
4545
<Hds::AdvancedTable::ThSort
46-
@sortOrder={{if (eq column.key this._sortBy) this._sortOrder}}
47-
@onClickSort={{fn this.setSortBy column.key}}
46+
@column={{column}}
47+
@sortOrder={{if (eq column.key this._tableModel.sortBy) this._tableModel.sortOrder}}
48+
@onClickSort={{if column.key (fn this._tableModel.setSortBy column.key)}}
4849
@align={{column.align}}
4950
@tooltip={{column.tooltip}}
51+
@hasResizableColumns={{@hasResizableColumns}}
52+
@isLastColumn={{eq index (sub this._tableModel.columns.length 1)}}
5053
@isStickyColumn={{if (and (eq index 0) @hasStickyFirstColumn) true}}
5154
@isStickyColumnPinned={{this.isStickyColumnPinned}}
55+
@previousColumn={{get this._tableModel.columns (sub index 1)}}
56+
@nextColumn={{get this._tableModel.columns (add index 1)}}
57+
@tableHeight={{this._tableHeight}}
58+
@onColumnResize={{@onColumnResize}}
59+
{{this._setColumnWidth column}}
5260
>
5361
{{column.label}}
5462
</Hds::AdvancedTable::ThSort>
5563
{{else}}
5664
<Hds::AdvancedTable::Th
5765
@align={{column.align}}
58-
@tooltip={{column.tooltip}}
59-
@isVisuallyHidden={{column.isVisuallyHidden}}
60-
@isExpandable={{column.isExpandable}}
61-
@onClickToggle={{this._tableModel.toggleAll}}
62-
@isExpanded={{this._tableModel.expandState}}
66+
@column={{column}}
6367
@hasExpandAllButton={{this._tableModel.hasRowsWithChildren}}
68+
@hasResizableColumns={{@hasResizableColumns}}
69+
@isExpanded={{this._tableModel.expandState}}
70+
@isExpandable={{column.isExpandable}}
71+
@isLastColumn={{eq index (sub this._tableModel.columns.length 1)}}
6472
@isStickyColumn={{if (and (eq index 0) @hasStickyFirstColumn) true}}
6573
@isStickyColumnPinned={{this.isStickyColumnPinned}}
74+
@isVisuallyHidden={{column.isVisuallyHidden}}
75+
@previousColumn={{get this._tableModel.columns (sub index 1)}}
76+
@nextColumn={{get this._tableModel.columns (add index 1)}}
77+
@tableHeight={{this._tableHeight}}
78+
@tooltip={{column.tooltip}}
79+
@onClickToggle={{this._tableModel.toggleAll}}
80+
@onColumnResize={{@onColumnResize}}
81+
{{this._setColumnWidth column}}
6682
>
6783
{{column.label}}
6884
</Hds::AdvancedTable::Th>
@@ -78,8 +94,7 @@
7894
we yield the Tr/Td/Th elements _and_ the record itself as `data`
7995
this means the consumer will *have to* use the `data` key to access it in their template
8096
-------------------------------------------------------------------------------------------- }}
81-
{{! @glint-expect-error: [HDS-4380](https://hashicorp.atlassian.net/browse/HDS-4380) }}
82-
{{#each (sort-by this.getSortCriteria this._tableModel.rows) key=this.identityKey as |record index|}}
97+
{{#each this._tableModel.sortedRows key=this.identityKey as |record index|}}
8398
{{#if this._tableModel.hasRowsWithChildren}}
8499
<Hds::AdvancedTable::ExpandableTrGroup
85100
@record={{record}}
@@ -145,6 +160,7 @@
145160
{{/each}}
146161
</div>
147162
</div>
163+
148164
{{#if this.showScrollIndicatorLeft}}
149165
<div
150166
class="hds-advanced-table__scroll-indicator hds-advanced-table__scroll-indicator-left"

0 commit comments

Comments
 (0)