Skip to content

Commit c59f619

Browse files
mmarchettinteractivellama
mmarchett
and
interactivellama
authored
feat: add columns resizable options (#2935)
* feat: add columns resizable options Resolves: B2BSOLUT-5767 * fix: test description * fix: snapshot tests * fix: snapshot test * chore: add styles for resizer accessibility * feat: add accessibility for tab navigation and column resizing with arrow buttons * fix: validation * fix: tabble items behavior * fix: update snapshot * fix: linter * Resizing is not accessible if keyboard navigation is not present (#2) * Make resizable require keyboardNavigation * Remove non fixed header example * Rename variables in examples * Limit resizable use to fixed layout and header * fix: replace document reference for react ref. Avoid header displacement on table reload. Add unique id for header-cell. Add documentation for resize feature. * fix: deep scan * chore: add resize tests Co-authored-by: Stephen James <[email protected]>
1 parent 74f8b54 commit c59f619

17 files changed

+8180
-2435
lines changed

‎.storybook/preview-head.html

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
href="assets/styles/salesforce-lightning-design-system.css"
33
type="text/css" />
44
<link rel="stylesheet" href="assets/styles/override.css" type="text/css" />
5+
<link rel="stylesheet" href="assets/styles/table.css" type="text/css" />
56
<style>
67
html {
78
background-color: transparent;

‎assets/styles/table.css

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
.slds-table-column-resizer{
2+
border-left: 1px solid #0176d3;
3+
}
4+
5+
.grip-handle:hover, .grip-handle-active{
6+
border-left: 1px solid #0176d3;
7+
}
8+
9+
.grip-handle:hover:before, .grip-handle-active:before{
10+
background-color: #0176d3;
11+
width: .25rem;
12+
height: 100%;
13+
content: " ";
14+
position: absolute;
15+
height: 33px;
16+
right: -1.4px;
17+
}
18+
19+
.grip-handle:active:before{
20+
background-color: #0176d3;
21+
width: .25rem;
22+
height: 100%;
23+
content: " ";
24+
position: absolute;
25+
height: 33px;
26+
right: -1.4px;
27+
}
28+
29+
.grip-handle .grip-resizable {
30+
background-color: #0176d3;
31+
width: 1px;
32+
height: 100vh;
33+
opacity: 0;
34+
}
35+
36+
.slds-table_fixed-layout .grip-handle {
37+
position: absolute;
38+
z-index: 9;
39+
background-color: #0176d3;
40+
width: 1px;
41+
height: 100vh;
42+
opacity: 0;
43+
top: -33px;
44+
z-index: 9;
45+
}
46+
47+
.slds-table_fixed-layout .grip-container {
48+
position: absolute;
49+
}
50+
51+
.slds-table_header-fixed_container .grip-handle {
52+
position: absolute;
53+
top: -33px;
54+
z-index: 9;
55+
}
56+
57+
.slds-table_header-fixed_container .grip-container {
58+
position: absolute;
59+
}
60+
61+
.slds-table th:focus .slds-cell-fixed, .slds-table th.slds-has-focus .slds-cell-fixed, .slds-table [role="gridcell"]:focus , .slds-table [role="gridcell"].slds-has-focus{
62+
box-shadow: #0070d2 0 0 0 1px inset;
63+
}
64+
65+
th > div > .slds-truncate {
66+
padding-left: 0.5rem;
67+
padding-right: 0.5rem;
68+
padding: 0.25rem 0.5rem;
69+
height: 2rem;
70+
}

‎components/card/__docs__/__snapshots__/storybook-stories.storyshot

+5
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,7 @@ exports[`DOM snapshots SLDSCard Custom Header 1`] = `
141141
aria-label="Opportunity Name"
142142
aria-sort="none"
143143
className=""
144+
id="SLDSDataTableExample-1-name-th"
144145
onFocus={[Function]}
145146
onKeyDown={[Function]}
146147
scope="col"
@@ -360,6 +361,7 @@ exports[`DOM snapshots SLDSCard Custom Heading 1`] = `
360361
aria-label="Opportunity Name"
361362
aria-sort="none"
362363
className=""
364+
id="SLDSDataTableExample-1-name-th"
363365
onFocus={[Function]}
364366
onKeyDown={[Function]}
365367
scope="col"
@@ -571,6 +573,7 @@ exports[`DOM snapshots SLDSCard Doc site Related List With Table 1`] = `
571573
aria-label="Opportunity Name"
572574
aria-sort="none"
573575
className=""
576+
id="DataTableExample-1-name-th"
574577
onFocus={[Function]}
575578
onKeyDown={[Function]}
576579
scope="col"
@@ -969,6 +972,7 @@ exports[`DOM snapshots SLDSCard w/ Items 1`] = `
969972
aria-label="Opportunity Name"
970973
aria-sort="none"
971974
className=""
975+
id="SLDSDataTableExample-1-name-th"
972976
onFocus={[Function]}
973977
onKeyDown={[Function]}
974978
scope="col"
@@ -1098,6 +1102,7 @@ exports[`DOM snapshots SLDSCard w/o Header 1`] = `
10981102
aria-label="Opportunity Name"
10991103
aria-sort="none"
11001104
className=""
1105+
id="SLDSDataTableExample-1-name-th"
11011106
onFocus={[Function]}
11021107
onKeyDown={[Function]}
11031108
scope="col"

‎components/component-docs.json

+153
Original file line numberDiff line numberDiff line change
@@ -5251,13 +5251,41 @@
52515251
"data-table": {
52525252
"description": "DataTables support the display of structured data in rows and columns with an HTML table. To sort, filter or paginate the table, simply update the data passed in the items to the table and it will re-render itself appropriately. The table will throw a sort event as needed, and helper components for paging and filtering are coming soon.\n\nNOTE: for horizontal scrolling with `fixedHeader`-enabled DataTables, see the `style` property description",
52535253
"methods": [
5254+
{
5255+
"name": "onResize",
5256+
"docblock": null,
5257+
"modifiers": [],
5258+
"params": [],
5259+
"returns": null
5260+
},
52545261
{
52555262
"name": "getId",
52565263
"docblock": null,
52575264
"modifiers": [],
52585265
"params": [],
52595266
"returns": null
52605267
},
5268+
{
5269+
"name": "getFixedHeader",
5270+
"docblock": null,
5271+
"modifiers": [],
5272+
"params": [],
5273+
"returns": null
5274+
},
5275+
{
5276+
"name": "getKeyboardNavigation",
5277+
"docblock": null,
5278+
"modifiers": [],
5279+
"params": [],
5280+
"returns": null
5281+
},
5282+
{
5283+
"name": "getFixedLayout",
5284+
"docblock": null,
5285+
"modifiers": [],
5286+
"params": [],
5287+
"returns": null
5288+
},
52615289
{
52625290
"name": "getFirstInteractiveElement",
52635291
"docblock": null,
@@ -5310,6 +5338,13 @@
53105338
],
53115339
"returns": null
53125340
},
5341+
{
5342+
"name": "repositionResizers",
5343+
"docblock": null,
5344+
"modifiers": [],
5345+
"params": [],
5346+
"returns": null
5347+
},
53135348
{
53145349
"name": "resizeFixedHeaders",
53155350
"docblock": null,
@@ -5341,6 +5376,34 @@
53415376
],
53425377
"returns": null
53435378
},
5379+
{
5380+
"name": "isResizable",
5381+
"docblock": null,
5382+
"modifiers": [],
5383+
"params": [],
5384+
"returns": null
5385+
},
5386+
{
5387+
"name": "resizeGrips",
5388+
"docblock": null,
5389+
"modifiers": [],
5390+
"params": [],
5391+
"returns": null
5392+
},
5393+
{
5394+
"name": "enableResize",
5395+
"docblock": null,
5396+
"modifiers": [],
5397+
"params": [],
5398+
"returns": null
5399+
},
5400+
{
5401+
"name": "disableResize",
5402+
"docblock": null,
5403+
"modifiers": [],
5404+
"params": [],
5405+
"returns": null
5406+
},
53445407
{
53455408
"name": "changeActiveCell",
53465409
"docblock": null,
@@ -5395,6 +5458,30 @@
53955458
"params": [],
53965459
"returns": null
53975460
},
5461+
{
5462+
"name": "displaceByArrowKey",
5463+
"docblock": null,
5464+
"modifiers": [],
5465+
"params": [
5466+
{
5467+
"name": "factor",
5468+
"type": null
5469+
}
5470+
],
5471+
"returns": null
5472+
},
5473+
{
5474+
"name": "makeGripVisible",
5475+
"docblock": null,
5476+
"modifiers": [],
5477+
"params": [
5478+
{
5479+
"name": "newIndex",
5480+
"type": null
5481+
}
5482+
],
5483+
"returns": null
5484+
},
53985485
{
53995486
"name": "handleKeyDownLeft",
54005487
"docblock": null,
@@ -5423,6 +5510,50 @@
54235510
"params": [],
54245511
"returns": null
54255512
},
5513+
{
5514+
"name": "moveNext",
5515+
"docblock": null,
5516+
"modifiers": [],
5517+
"params": [
5518+
{
5519+
"name": "event",
5520+
"type": null
5521+
},
5522+
{
5523+
"name": "rowIndex",
5524+
"type": null
5525+
},
5526+
{
5527+
"name": "columnIndex",
5528+
"type": null
5529+
}
5530+
],
5531+
"returns": null
5532+
},
5533+
{
5534+
"name": "handleNextActionable",
5535+
"docblock": null,
5536+
"modifiers": [],
5537+
"params": [
5538+
{
5539+
"name": "event",
5540+
"type": null
5541+
}
5542+
],
5543+
"returns": null
5544+
},
5545+
{
5546+
"name": "handleKeyTabPress",
5547+
"docblock": null,
5548+
"modifiers": [],
5549+
"params": [
5550+
{
5551+
"name": "event",
5552+
"type": null
5553+
}
5554+
],
5555+
"returns": null
5556+
},
54265557
{
54275558
"name": "registerInteractiveElement",
54285559
"docblock": null,
@@ -5732,6 +5863,28 @@
57325863
},
57335864
"required": false,
57345865
"description": "A variant which removes horizontal padding. CSS class will be removed if `fixedLayout==true`."
5866+
},
5867+
"resizable": {
5868+
"type": {
5869+
"name": "bool"
5870+
},
5871+
"required": false,
5872+
"description": "A variant which allows column dividers to be grabbed with the mouse. This feature needs\n`@salesforce/design-system-react/assets/styles/table.css` to be loaded.",
5873+
"defaultValue": {
5874+
"value": "false",
5875+
"computed": false
5876+
}
5877+
},
5878+
"resizerOptions": {
5879+
"type": {
5880+
"name": "object"
5881+
},
5882+
"required": false,
5883+
"description": "Object with properties to be used in case of resizable: true\n\nresizeMode: It is used to set how the resize method works. Those are the possible values: 'fit', 'flex' and 'overflow'\ndisable: It is used for disable the resize functionality, default is false\ndisabledColumns: Array of indexes for the columns to be disabled\nwidths: An array of column widths to set the initial width.\nonResize: Callback function to be fired when the user has ended dragging a column",
5884+
"defaultValue": {
5885+
"value": "{\n\tresizeMode: 'flex',\n\tdraggingClass: 'slds-table-column-resizer',\n}",
5886+
"computed": false
5887+
}
57355888
}
57365889
},
57375890
"route": "data-tables",

0 commit comments

Comments
 (0)